/* AOTC Track — Home (redesign, Oct 2026). Only index.html loads this file,
   and every rule sits under .hm so nothing here reaches another page. */
.hm { max-width: 1240px; }
.hm a.lnk { color: var(--primary-light); font-weight: 600; }
.hm .hm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hm .hm-greet { font-size: 30px; font-weight: 750; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.hm .hm-date { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.hm .hm-date b { color: var(--ink); font-weight: 600; }
.hm .hm-tools { display: flex; gap: 8px; align-items: center; position: relative; }
.hm .hm-search { display: flex; align-items: center; gap: 10px; min-width: 300px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); color: var(--muted); font: inherit; font-size: 13.5px; box-shadow: var(--shadow-sm); cursor: text; text-align: left; }
.hm .hm-search:hover { border-color: var(--primary-light); }
.hm .hm-search kbd { margin-left: auto; font: 600 11px 'Geist Mono', monospace; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.hm .hm-new { display: inline-flex; align-items: center; gap: 6px; }
.hm .hm-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-md); }
.hm .hm-menu[hidden] { display: none; }
.hm .hm-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.hm .hm-menu button:hover, .hm .hm-menu button:focus-visible { background: var(--hover-surface); outline: none; }
.hm .hm-menu svg { width: 18px; height: 18px; color: var(--primary-light); flex: none; }

/* band: verse of the day + where we are in the quarter */
.hm .hm-band { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; border-radius: 16px; background: var(--primary-gradient); color: #fff; position: relative; overflow: hidden; box-shadow: 0 12px 32px rgba(20, 44, 107, .22); }
.hm .hm-band::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); pointer-events: none; }
.hm .hm-verse { font-size: 15px; line-height: 1.5; font-style: italic; max-width: 640px; margin: 0; }
.hm .hm-verse span { display: block; font-style: normal; font-size: 12px; opacity: .75; margin-top: 4px; letter-spacing: .02em; }
.hm .hm-q { display: flex; align-items: center; gap: 16px; }
.hm .hm-ring { position: relative; width: 74px; height: 74px; flex: none; }
.hm .hm-ring svg { transform: rotate(-90deg); display: block; }
.hm .hm-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 750; }
.hm .hm-chips { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.hm .hm-chips span { display: inline-flex; gap: 8px; align-items: center; }
.hm .hm-chips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.7); display: inline-block; flex: none; }
.hm .hm-chips .warn i { background: #FFC857; box-shadow: 0 0 0 3px rgba(255,200,87,.25); }

/* cards */
.hm .hm-grid, .hm .hm-low { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; margin-top: 20px; }
.hm .hm-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-sm); min-width: 0; }
.hm .hm-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 18px 6px; flex-wrap: wrap; }
.hm .hm-card > header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.hm .hm-card > header .sub, .hm .hm-card > header a { font-size: 12.5px; }
.hm .hm-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 8px; border-radius: 999px; background: rgba(215,20,26,.1); color: var(--pcg-red); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.hm .hm-count.zero { background: rgba(0,115,74,.1); color: var(--pcg-green); }

/* needs you */
.hm .hm-todo { list-style: none; margin: 0; padding: 6px 8px 10px; }
.hm .hm-todo li { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; transition: background .15s; cursor: pointer; }
.hm .hm-todo li + li { border-top: 1px solid var(--rule); }
.hm .hm-todo li:hover { background: var(--hover-surface); }
.hm .hm-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(29,63,148,.08); color: var(--primary); }
.hm .hm-ic svg { width: 18px; height: 18px; }
html[data-theme="dark"] .hm .hm-ic { background: rgba(94,163,245,.12); color: #5EA3F5; }
.hm .hm-ic.red { background: rgba(215,20,26,.09); color: var(--pcg-red); }
.hm .hm-ic.amber { background: rgba(224,138,30,.13); color: #B36B0E; }
.hm .hm-ic.green { background: rgba(0,115,74,.1); color: var(--pcg-green); }
html[data-theme="dark"] .hm .hm-ic.red { color: #FF6B6F; } html[data-theme="dark"] .hm .hm-ic.amber { color: #F2A945; } html[data-theme="dark"] .hm .hm-ic.green { color: #3FC18C; }
.hm .hm-todo .t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.hm .hm-todo .m { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hm .hm-todo .m .due { color: var(--pcg-red); font-weight: 600; }
.hm .hm-todo .go { white-space: nowrap; }
.hm .hm-foot { padding: 6px 18px 16px; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.hm .hm-foot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pcg-green); flex: none; }
.hm .hm-foot.warn::before { background: var(--amber); }
.hm .hm-empty { padding: 22px 18px 24px; display: flex; gap: 14px; align-items: center; }
.hm .hm-empty b { display: block; font-size: 15px; }
.hm .hm-empty span { font-size: 13px; color: var(--muted); }
.hm .hm-skel { height: 58px; margin: 6px 10px; border-radius: 10px; background: linear-gradient(90deg, var(--rule) 0%, var(--hover-surface) 50%, var(--rule) 100%); background-size: 200% 100%; animation: hm-shimmer 1.2s linear infinite; opacity: .6; }
@keyframes hm-shimmer { to { background-position: -200% 0; } }

/* coming up */
.hm .hm-week { padding: 0 18px 14px; }
.hm .hm-week > header { padding-left: 0; padding-right: 0; }
.hm .hm-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 4px 0 10px; }
.hm .hm-days div { text-align: center; padding: 6px 0; border-radius: 9px; font-size: 11px; color: var(--muted); }
.hm .hm-days div b { display: block; font-size: 15px; color: var(--ink); font-weight: 650; margin-top: 1px; }
.hm .hm-days div.today { background: var(--primary); color: rgba(255,255,255,.8); }
.hm .hm-days div.today b { color: #fff; }
.hm .hm-days .dot { display: block; width: 5px; height: 5px; border-radius: 50%; margin: 4px auto 0; background: var(--primary-light); }
.hm .hm-days .nodot { display: block; height: 5px; margin-top: 4px; }
.hm .hm-days div.today .dot { background: #fff; }
.hm .hm-ev { display: grid; grid-template-columns: 56px 3px 1fr; gap: 10px; padding: 8px 0; cursor: pointer; }
.hm .hm-ev + .hm-ev { border-top: 1px dashed var(--rule); }
.hm .hm-ev time { font-size: 12px; color: var(--muted); line-height: 1.3; }
.hm .hm-ev time b { display: block; color: var(--ink); font-size: 12.5px; }
.hm .hm-ev i { border-radius: 3px; background: var(--primary-light); }
.hm .hm-ev i.session { background: var(--pcg-red); } .hm .hm-ev i.meeting { background: var(--pcg-green); } .hm .hm-ev i.election { background: var(--amber); } .hm .hm-ev i.letter { background: var(--muted); }
/* Church Diary items on Home, coloured as on the diary. */
.hm .hm-ev i.diary { background: #8A8F9C; } .hm .hm-ev i.funeral { background: #3A3A3A; } .hm .hm-ev i.wedding { background: #C2185B; }
.hm .hm-ev i.traditional { background: #A86A12; } .hm .hm-ev i.thanksgiving { background: #0E7C86; } .hm .hm-ev i.preaching { background: #00734A; } .hm .hm-ev i.programme { background: #7B3FA0; }
html[data-theme="dark"] .hm .hm-ev i.funeral { background: #C9CED8; }
.hm .hm-ev .t { font-size: 13.5px; font-weight: 600; }
.hm .hm-ev .m { font-size: 12px; color: var(--muted); }
.hm .hm-ev:hover .t { color: var(--primary-light); }

/* pulse tiles */
.hm .hm-pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.hm .hm-tile { padding: 16px 18px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; }
.hm .hm-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hm .hm-tile .lb { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.hm .hm-tile .v { font-size: 28px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm .hm-tile .v small { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 2px; }
.hm .hm-tile .d { font-size: 12px; margin-top: 2px; color: var(--muted); position: relative; z-index: 1; }
.hm .hm-tile .d .up { color: var(--pcg-green); font-weight: 700; } .hm .hm-tile .d .dn { color: var(--pcg-red); font-weight: 700; }
.hm .hm-spark { position: absolute; right: 14px; top: 18px; opacity: .9; }
.hm .hm-bar { height: 6px; border-radius: 999px; background: var(--rule); margin-top: 10px; overflow: hidden; }
.hm .hm-bar > div { height: 100%; border-radius: inherit; background: var(--primary-gradient); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.hm .hm-bar.green > div { background: linear-gradient(90deg, #00734A, #2FB37A); }

/* charts and board */
.hm .hm-chart { padding: 4px 18px 16px; }
.hm .hm-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.hm .hm-legend span::before { content: ''; display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; background: var(--primary-light); }
.hm .hm-legend.green span:first-child::before { background: var(--pcg-green); }
.hm .hm-legend span.avg::before { background: none; border-top: 2px dashed var(--amber); height: 0; }
.hm .hm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.hm .hm-chart svg text { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.hm #hmGrpSub { font-size: 12.5px; }
.hm .hm-chart rect.b { transition: y .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1); }
.hm .hm-chart rect.b:hover { opacity: 1 !important; }
.hm .hm-board { padding: 4px 18px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.hm .hm-board span { text-align: center; padding: 7px 0; border-radius: 8px; font: 600 11.5px 'Geist Mono', monospace; background: var(--paper); color: var(--muted); border: 1px solid var(--rule); }
.hm .hm-board span.ok { background: rgba(0,115,74,.1); color: var(--pcg-green); border-color: transparent; }
.hm .hm-board-foot { padding: 0 18px 16px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.hm details.hm-more { margin-top: 10px; }
.hm details.hm-more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.hm .hm-full { margin-top: 20px; }
.hm .hm-full .hm-card > header select { max-width: 220px; margin-left: auto; }
.hm .hm-note { border-left: 3px solid var(--amber); padding: 6px 0 6px 10px; font-size: 12.5px; color: var(--muted); }
.hm .hm-kpi p { margin: 8px 0 3px; font-size: 12.5px; }
.hm .hm-goals { padding: 0 18px 16px; }

/* quick actions */
.hm .hm-qa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.hm .hm-qa a { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; transition: border-color .15s, transform .15s; }
.hm .hm-qa a:hover { border-color: var(--primary-light); transform: translateY(-1px); }
.hm .hm-qa svg { width: 20px; height: 20px; color: var(--primary-light); }

/* motion: cards rise in once, staggered; the ring, bars and numbers draw in */
@media (prefers-reduced-motion: no-preference) {
  .hm .rise { opacity: 0; transform: translateY(10px); animation: hm-rise .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
  .hm .hm-todo li { animation: hm-rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(120ms + var(--i, 0) * 50ms); }
  .hm .hm-ring circle.fg { transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1) .2s; }
}
@keyframes hm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hm .hm-bar > div, .hm .hm-chart rect.b { transition: none; }
  .hm .hm-skel { animation: none; }
}

@media (max-width: 1100px) { .hm .hm-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm .hm-qa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hm .hm-grid, .hm .hm-low { grid-template-columns: 1fr; }
  .hm .hm-search { min-width: 0; flex: 1; } .hm .hm-tools { width: 100%; }
  .hm .hm-search kbd { display: none; }
  .hm .hm-greet { font-size: 24px; }
  .hm .hm-band { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .hm .hm-verse { font-size: 14px; }
}
@media (max-width: 560px) {
  .hm .hm-new span { display: none; }
  .hm .hm-tile .v { font-size: 24px; }
  /* On a phone the whole row is the button; a chevron says so. */
  .hm .hm-todo li { grid-template-columns: 38px 1fr 14px; gap: 10px; }
  .hm .hm-todo .go { display: none; }
  .hm .hm-todo li::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); opacity: .7; }
  .hm .hm-full .hm-card > header select { font-size: 13px; padding: 6px 8px; max-width: 60%; }
  .hm .hm-pulse { gap: 10px; } .hm .hm-spark { display: none; }
  .hm .hm-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}