/* Home v2 (docs/HOME_PROJECTION.md).
   The party's story on the left, the reader's own column on the right, one rule between them.
   Tokens only. Labels are sentence case; rules separate list items, not sections. */
body[data-view="home"] .content-area { background: var(--weave-color-canvas); }
.campaign-role-pending #homeBriefing { display: none; }
#homeView { max-width: 76rem; margin-inline: auto; }
#homeView > .view-header { margin-bottom: var(--weave-space-5); padding: 0; }
#homeView > .campaign-home-heading { flex-direction: row; justify-content: flex-start; align-items: center; }
.campaign-home-heading #campaignHomeHeading { min-width: 0; padding: 0; color: var(--weave-color-secondary); font-style: italic; font-weight: var(--weave-weight-regular); text-align: left; overflow-wrap: anywhere; }
.campaign-home-heading #campaignHomeHeading::after { display: none; }

.home-page { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--weave-space-7); align-items: start; }
.home-main { container-type: inline-size; display: grid; gap: var(--weave-space-7); min-width: 0; align-content: start; }
.home-side { display: grid; gap: var(--weave-space-5); padding-left: var(--weave-space-6); border-left: 1px solid var(--weave-color-rule); align-self: stretch; align-content: start; min-width: 0; }
.home-briefing a { color: var(--weave-color-action); text-decoration-color: var(--weave-color-spark); text-underline-offset: .12em; }
.home-briefing h3, .home-briefing h4, .home-briefing blockquote { margin: 0; }
.home-briefing a:focus-visible, .home-briefing button:focus-visible, .home-briefing summary:focus-visible { outline: 2px solid var(--weave-color-action); outline-offset: 2px; }
.home-face img { width: 100%; height: 100%; object-fit: cover; }
.home-synopsis { font: var(--weave-text-md)/1.6 var(--weave-font-reading); }
.home-label { margin: 0 0 var(--weave-space-1); color: var(--weave-color-action); font: 600 var(--weave-text-md)/1.5 var(--weave-font-display); }
.home-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--weave-space-4); margin: 0 0 var(--weave-space-3); }
.home-block-head h3 { margin: 0; font: 500 var(--weave-text-xl)/1.3 var(--weave-font-display); }
.home-block-head a { font-size: var(--weave-text-sm); }
.home-face { display: grid; place-items: center; overflow: hidden; color: var(--weave-color-action); flex: none; width: 40px; height: 40px; border-radius: var(--weave-radius-full); object-fit: cover; background: var(--weave-color-selected); }
.home-briefing .primary-btn { box-shadow: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--weave-space-4); border: 0; border-radius: var(--weave-radius-sm); background: var(--weave-color-action); color: var(--weave-color-on-action); font-weight: 600; font-size: var(--weave-text-sm); text-decoration: none; white-space: nowrap; cursor: pointer; }
.home-briefing .btn-secondary { box-shadow: none; min-height: 44px; border: 1px solid var(--weave-color-rule-strong); background: var(--weave-color-paper); color: var(--weave-color-ink); }
.home-briefing .primary-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--weave-color-spark); }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--weave-space-3) var(--weave-space-5); font-size: var(--weave-text-sm); }

/* Lead: new recap */
.home-last { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--weave-space-5); }
.home-last h3 { margin: 0 0 var(--weave-space-3); font: 600 var(--weave-text-2xl)/1.12 var(--weave-font-display); text-wrap: balance; }
.home-beats { margin: 0 0 var(--weave-space-5); padding: 0; list-style: none; font: var(--weave-text-md)/1.6 var(--weave-font-reading); }
.home-beats li { position: relative; padding: var(--weave-space-1) 0 var(--weave-space-1) var(--weave-space-5); }
.home-beats li::before { content: ""; position: absolute; left: 4px; top: 1em; width: 5px; height: 5px; border-radius: var(--weave-radius-full); background: var(--weave-color-spark); }
.home-art { margin: 0; min-width: 0; }
.home-art a { display: block; width: 100%; }
.home-art img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--weave-radius-sm); box-shadow: 0 0 0 5px var(--weave-color-paper), 0 0 0 6px var(--weave-color-rule-strong); }
.home-quote.is-table { grid-column: 1 / -1; margin: 0; padding: var(--weave-space-4) 0 0 var(--weave-space-4); border-left: 2px solid var(--weave-color-spark); }
.home-quote.is-table blockquote { margin: 0 0 var(--weave-space-1); font: italic var(--weave-text-lg)/1.35 var(--weave-font-display); }
.home-quote.is-table figcaption { color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
@container (min-width: 600px) {
  .home-last.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--weave-space-6); align-items: stretch; }
  .home-last.has-art .home-art { grid-column: 2; grid-row: 1; display: flex; }
  .home-last.has-art .home-art img { height: 100%; min-height: 18rem; aspect-ratio: auto; }
}

/* Lead: catch-up */
.home-catchup { padding: var(--weave-space-5) var(--weave-space-6); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); box-shadow: var(--weave-shadow-raised); }
.home-catchup .home-label { margin: 0; color: var(--weave-color-secondary); font-size: var(--weave-text-sm); font-weight: 600; }
.home-catchup h3 { margin: var(--weave-space-1) 0 0; font: 500 var(--weave-text-2xl)/1.12 var(--weave-font-display); }
.home-catchup-text { max-width: 40rem; margin: var(--weave-space-3) 0 var(--weave-space-5); font: var(--weave-text-lg)/1.6 var(--weave-font-reading); }
.home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--weave-space-4); margin: 0 0 var(--weave-space-5); padding: 0; list-style: none; }
.home-tiles a { display: grid; gap: var(--weave-space-1); color: var(--weave-color-ink); text-decoration: none; }
.home-tiles img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--weave-radius-sm); margin-bottom: var(--weave-space-1); }
.home-tiles span { color: var(--weave-color-secondary); font-size: var(--weave-text-xs); font-weight: 600; }
.home-tiles strong { font: 500 var(--weave-text-sm)/1.3 var(--weave-font-display); }
.home-tiles a:hover strong { color: var(--weave-color-action); }
@container (max-width: 520px) {
  .home-catchup { padding: var(--weave-space-4); }
  .home-tiles { grid-template-columns: minmax(0, 1fr); }
  .home-tiles a { grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--weave-space-3); align-items: center; }
  .home-tiles img { grid-row: span 2; margin: 0; }
}

/* About to play: the last recap stays, as a card with its art, after the prep sections */
.home-recap-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--weave-space-4); padding: var(--weave-space-4); border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); }
.home-recap-card img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--weave-radius-sm); }
.home-recap-card h3 { margin: 0 0 var(--weave-space-2); font: 600 var(--weave-text-xl)/1.2 var(--weave-font-display); }
.home-recap-card h3 a { color: var(--weave-color-ink); text-decoration: none; }
.home-recap-card h3 a:hover { color: var(--weave-color-action); }
.home-recap-card p { margin: 0; font: var(--weave-text-md)/1.55 var(--weave-font-reading); }
.home-recap-card .home-actions { display: flex; flex-wrap: wrap; gap: var(--weave-space-2) var(--weave-space-5); margin-top: var(--weave-space-3); font: 600 var(--weave-text-sm)/1.5 var(--weave-font-ui); }
@container (min-width: 600px) { .home-recap-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--weave-space-5); } }

/* Where we left off */
.home-leftoff { padding-top: var(--weave-space-5); border-top: 3px double var(--weave-color-rule-strong); }
.home-leftoff-text { max-width: 36rem; margin: var(--weave-space-1) 0 0; font: var(--weave-text-xl)/1.55 var(--weave-font-display); }
.home-party { display: flex; flex-wrap: wrap; gap: var(--weave-space-4) var(--weave-space-6); margin: var(--weave-space-4) 0 0; padding: 0; list-style: none; }
.home-party a { display: grid; grid-template-columns: 48px auto; column-gap: var(--weave-space-3); align-items: center; color: var(--weave-color-ink); text-decoration: none; }
.home-party .home-face { grid-row: span 2; width: 48px; height: 48px; }
.home-party strong { font-size: var(--weave-text-md); font-weight: 600; }
.home-party span { color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
.home-party a:hover strong { color: var(--weave-color-action); }

/* Threads */
.home-threads { border-top: 1px solid var(--weave-color-rule); }
.home-thread { border-bottom: 1px solid var(--weave-color-rule); }
.home-thread > summary, .home-thread[open] > summary { border: 0; background: transparent; color: var(--weave-color-ink); font-weight: 400; }
.home-thread > .home-thread-body { border: 0; border-radius: 0; background: transparent; }
.home-thread > summary { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto 16px; gap: var(--weave-space-4); align-items: center; padding: var(--weave-space-3) var(--weave-space-2); border-radius: var(--weave-radius-sm); cursor: pointer; list-style: none; }
.home-thread > summary::-webkit-details-marker { display: none; }
.home-thread > summary:hover { background: var(--weave-color-hover); }
.home-thread-kind { color: var(--weave-color-secondary); font-size: var(--weave-text-sm); }
.home-thread-main strong { display: block; font: 500 var(--weave-text-md)/1.3 var(--weave-font-display); }
.home-thread-main small { display: block; color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
.home-yours { display: inline-block; margin-left: var(--weave-space-2); padding: 0 6px; border-radius: var(--weave-radius-sm); background: var(--weave-color-selected); color: var(--weave-color-action); font: 600 var(--weave-text-2xs)/1.6 var(--weave-font-ui); vertical-align: 2px; }
.home-chevron { width: 14px; height: 14px; color: var(--weave-color-secondary); transition: transform 120ms var(--weave-ease); }
.home-thread[open] .home-chevron { transform: rotate(180deg); }
.home-thread-body { padding: 0 var(--weave-space-2) var(--weave-space-5) calc(6.5rem + var(--weave-space-6)); font-size: var(--weave-text-sm); }
.home-trail { margin: 0; padding: 0; list-style: none; }
.home-trail li { position: relative; padding: 0 0 var(--weave-space-3) var(--weave-space-6); }
.home-trail li::before { content: ""; position: absolute; left: 3px; top: .35em; width: 9px; height: 9px; border-radius: var(--weave-radius-full); background: var(--weave-color-secondary); }
.home-trail li::after { content: ""; position: absolute; left: 7px; top: 1.2em; bottom: -.2em; width: 1px; background: var(--weave-color-rule-strong); }
.home-trail li:last-child::after { display: none; }
.home-trail li.is-taken:has(+ .is-next)::before, .home-trail li.is-taken:last-child::before { background: var(--weave-color-spark); }
.home-trail li.is-next::before { box-sizing: border-box; border: 1.5px solid var(--weave-color-action); background: var(--weave-color-canvas); }
.home-trail li.is-next { color: var(--weave-color-secondary); }
.home-trail-when { display: block; color: var(--weave-color-secondary); font-size: var(--weave-text-xs); font-weight: 600; }
.home-more { margin: var(--weave-space-3) 0 0; font-size: var(--weave-text-sm); }
.home-resolved { margin: var(--weave-space-3) 0 0; color: var(--weave-color-secondary); font-size: var(--weave-text-sm); }
.home-done { margin-right: var(--weave-space-1); color: var(--weave-color-success); font-weight: var(--weave-weight-semibold); }
@container (max-width: 560px) {
  .home-thread > summary { grid-template-columns: minmax(0, 1fr) auto 16px; row-gap: 2px; }
  .home-thread-kind { grid-column: 1; grid-row: 1; }
  .home-thread-main { grid-column: 1 / -1; grid-row: 2; }
  .home-thread-body { padding-left: var(--weave-space-2); }
}

/* New in the story */
.home-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--weave-space-3) var(--weave-space-5); margin: 0; padding: 0; list-style: none; }
.home-story a { display: flex; align-items: center; gap: var(--weave-space-3); color: var(--weave-color-ink); text-decoration: none; }
.home-story strong { font-size: var(--weave-text-sm); font-weight: 600; }
.home-story small { display: block; color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
.home-story a:hover strong { color: var(--weave-color-action); }
@container (max-width: 520px) { .home-story { grid-template-columns: minmax(0, 1fr); } }

/* Side: next session */
.home-next { padding: var(--weave-space-5); border: 1px solid var(--weave-color-rule-strong); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); }
.home-countdown { margin-left: var(--weave-space-2); padding: 1px var(--weave-space-2); border-radius: var(--weave-radius-sm); background: var(--weave-color-selected); color: var(--weave-color-action); font-size: var(--weave-text-xs); font-weight: 600; }
.home-next .home-next-date { display: block; font: 500 var(--weave-text-xl)/1.3 var(--weave-font-display); }
.home-dm-says { margin: var(--weave-space-2) 0 0; font: italic var(--weave-text-md)/1.5 var(--weave-font-reading); }
.home-dm-says cite { font: normal var(--weave-text-xs)/1.5 var(--weave-font-ui); color: var(--weave-color-secondary); }
.home-rsvp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--weave-space-2); margin-top: var(--weave-space-4); }
.home-reply { margin: var(--weave-space-2) 0 0; color: var(--weave-color-success); font-size: var(--weave-text-sm); font-weight: 600; }
.home-side h4, .home-inbox h4 { margin: var(--weave-space-5) 0 var(--weave-space-2); color: var(--weave-color-action); font: 600 var(--weave-text-md)/1.5 var(--weave-font-display); }
.home-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--weave-space-2); font-size: var(--weave-text-sm); }
.home-todo label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--weave-space-2); align-items: start; cursor: pointer; }
.home-todo input { margin: 3px 0 0; accent-color: var(--weave-color-action); }
.home-todo small { color: var(--weave-color-secondary); font-size: var(--weave-text-2xs); }
.home-todo input:checked + span { color: var(--weave-color-secondary); text-decoration: line-through; }
.home-link-button { padding: 0; border: 0; background: none; color: var(--weave-color-action); font-size: var(--weave-text-sm); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--weave-color-spark); text-underline-offset: .12em; }
.home-add-todo { margin-top: var(--weave-space-2); }
.home-for-you { margin-top: var(--weave-space-4); padding: var(--weave-space-3) var(--weave-space-4); border-left: 2px solid var(--weave-color-action); background: var(--weave-color-tint); font-size: var(--weave-text-sm); }
.home-for-you p { margin: 0; }
.home-for-you b { display: block; color: var(--weave-color-action); font-size: var(--weave-text-xs); }
.home-message-row { display: flex; align-items: center; justify-content: space-between; gap: var(--weave-space-3); white-space: nowrap; margin-top: var(--weave-space-4); padding-top: var(--weave-space-3); border-top: 1px solid var(--weave-color-rule); font-size: var(--weave-text-sm); }
.home-unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--weave-radius-full); background: var(--weave-color-action); color: var(--weave-color-on-action); font-size: var(--weave-text-2xs); font-weight: 700; }

/* Side: your character */
.home-you { padding: var(--weave-space-5); border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); }
.home-you-head { min-width: 0; display: grid; justify-items: center; gap: var(--weave-space-3); text-align: center; }
.home-you-head .home-face { width: 96px; height: 96px; box-shadow: 0 0 0 3px var(--weave-color-paper), 0 0 0 4px var(--weave-color-rule-strong); }
.home-you-head .home-identity { margin: 0; }
.home-briefing .home-you-name { display: block; color: var(--weave-color-ink); font: 500 var(--weave-text-xl)/1.2 var(--weave-font-display); text-decoration: none; white-space: nowrap; }
.home-you-name:hover { color: var(--weave-color-action); }
.home-identity { margin: var(--weave-space-1) 0 0; padding: 0; list-style: none; font-size: var(--weave-text-xs); color: var(--weave-color-secondary); }
.home-identity b { color: var(--weave-color-ink); font-weight: 600; }
.home-you .home-beats-sm { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--weave-space-2); font-size: var(--weave-text-sm); }
.home-carry { display: flex; flex-wrap: wrap; gap: var(--weave-space-2); margin: 0; padding: 0; list-style: none; }
.home-carry li { padding: 2px var(--weave-space-2); border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-full); font-size: var(--weave-text-xs); }
.home-carry em { color: var(--weave-color-action); font-style: normal; font-weight: 600; }
.home-line { margin: 0; padding-left: var(--weave-space-3); border-left: 2px solid var(--weave-color-spark); }
.home-line > blockquote { margin: 0 0 var(--weave-space-1); font: italic var(--weave-text-md)/1.4 var(--weave-font-display); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.home-line.is-open > blockquote { -webkit-line-clamp: unset; }
.home-line figcaption { color: var(--weave-color-secondary); font-size: var(--weave-text-2xs); }
.home-you-foot { margin: var(--weave-space-4) 0 0; padding-top: var(--weave-space-3); border-top: 1px solid var(--weave-color-rule); font-size: var(--weave-text-sm); font-weight: 600; }

.home-sources { display: inline; font-size: var(--weave-text-2xs); }
.home-sources > summary { display: inline; margin-left: 4px; padding: 0 5px; border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-sm); color: var(--weave-color-secondary); cursor: pointer; }
.home-sources > div { margin-top: var(--weave-space-2); }
.home-sources:has(> summary:hover) > div { border-color: var(--weave-color-action); }
.home-sources blockquote { font-size: var(--weave-text-sm); }
.home-sources[open] { display: block; }
.home-inbox .party-error:empty, .home-next .party-error:empty { display: none; }
.home-inbox .party-add { display: flex; gap: var(--weave-space-2); margin-top: var(--weave-space-2); }
.home-inbox .party-add input { min-width: 0; flex: 1; }
.home-rsvp button { white-space: nowrap; font-weight: 600; min-width: 0; padding-inline: var(--weave-space-2); font-size: var(--weave-text-sm); }
.home-messages { width: min(420px, 100%); }
.home-messages header { display: flex; justify-content: space-between; gap: var(--weave-space-3); }
.home-messages h2 { font: 500 var(--weave-text-xl)/1.3 var(--weave-font-display); }
.home-messages .party-card { padding: 0; border: 0; background: none; }
.home-messages .party-card > h3, .home-messages .party-to { display: none; }
.home-messages .party-history { max-height: 60vh; overflow-y: auto; }
.home-quote { margin: 0; }
.weave-track .open { fill: none; stroke: currentColor; stroke-width: .14; }
.weave-track .fresh { fill: var(--weave-color-spark); }
.home-desk { display: flex; justify-content: space-between; gap: var(--weave-space-4); padding: var(--weave-space-4); border: 1px solid var(--weave-color-rule); }
.home-desk strong, .home-desk span { display: block; }
.home-desk-link { flex: none; }
.home-next.is-top { margin-bottom: var(--weave-space-7); }
@media (max-width: 960px) {
  .home-page { display: flex; flex-direction: column; align-items: stretch; gap: var(--weave-space-6); }
  .home-main, .home-side { display: contents; }
  .home-main > .home-last, .home-main > .home-catchup { order: 1; }
  .home-main > .home-leftoff { order: 2; }
  .home-side > .home-next { order: 3; }
  .home-main > .home-threads-block { order: 4; }
  .home-main > .home-story-block, .home-main > .home-names-block { order: 5; }
  .home-main > .home-recap-card { order: 6; }
  .home-side > .home-you { order: 7; }
}
@media (max-width: 600px) {
  .home-catchup { padding: var(--weave-space-4); }
  .home-tiles { grid-template-columns: minmax(0, 1fr); }
  .home-tiles a { grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--weave-space-3); align-items: center; }
  .home-tiles img { grid-row: span 2; margin: 0; }
  .home-thread > summary { grid-template-columns: minmax(0, 1fr) auto 16px; row-gap: 2px; }
  .home-thread-kind { grid-column: 1; grid-row: 1; }
  .home-thread-main { grid-column: 1 / -1; grid-row: 2; }
  .home-thread-body { padding-left: var(--weave-space-2); }
  .home-story { grid-template-columns: minmax(0, 1fr); }
  .home-party { gap: var(--weave-space-3) var(--weave-space-5); }
  .home-leftoff-text { font-size: var(--weave-text-lg); }
}