/* FREE SAILING — dash-home.css. The organisation home (dash-home.js).
   Phone first: one column, 44 px targets, nothing wider than the screen.
   From 900 px the sections sit two abreast where they are short. */

.glance.is-home{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin:0 0 22px; }

.hs{ background:var(--white,#fff); border:1px solid var(--line); border-radius:var(--r,14px);
  box-shadow:var(--shadow-1); padding:14px 14px 12px; min-width:0; }
.hs-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hs-hd h2{ font-size:17px; line-height:1.25; margin:0; margin-right:auto; color:var(--ink,#0B1B26); }
.hs-act{ display:flex; gap:6px; flex-wrap:wrap; }
.hs-wait, .hs-quiet{ color:var(--ink-60); font-size:14px; margin:4px 0; }
.hs-fail{ color:#B03A21; font-size:14px; margin:4px 0; }
.hs-sub{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-60); margin:12px 0 4px; }

.hbtn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px;
  border-radius:999px; border:1px solid var(--line-2,#C9D6E3); background:#fff; color:var(--navy);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; }
.hbtn:hover{ border-color:var(--cyan); text-decoration:none; }
.hbtn-p{ background:var(--navy); border-color:var(--navy); color:#fff; }
.hbtn-p:hover{ background:var(--navy-deep,#011d5c); }
.hbtn:focus-visible, .hn:focus-visible, .hc-d:focus-visible, .ht-c:focus-visible, .hk-i:focus-visible, .hp:focus-visible{
  outline:3px solid var(--cyan); outline-offset:2px; }

/* 1 — needs. Whole tile is the door. */
.hn-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.hn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:44px; padding:12px;
  border-radius:12px; border:1px solid var(--line); background:#F7FAFD; color:var(--ink,#0B1B26);
  text-align:left; font:inherit; cursor:pointer; text-decoration:none; min-width:0; }
.hn:hover{ border-color:var(--cyan); text-decoration:none; }
.hn-v{ font-size:26px; font-weight:800; line-height:1.1; color:var(--navy); }
.hn-v small{ font-size:14px; font-weight:600; color:var(--ink-60); margin-left:3px; }
.hn-k{ font-size:14px; font-weight:600; line-height:1.3; }
.hn-s{ font-size:12.5px; color:var(--ink-60); line-height:1.3; overflow-wrap:anywhere; }
.hn-a{ margin-top:auto; padding-top:6px; font-size:13px; font-weight:700; color:var(--cyan-text,#00688F); }
.hn-orange .hn-v{ color:#B8501E; }
.hn-teal .hn-v{ color:#016F70; }

/* 2 — calendar. Every day is a button. */
.hc-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.hc-hd b{ font-size:15px; }
.hc-step{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff;
  font-size:22px; line-height:1; color:var(--navy); cursor:pointer; }
.hc-wk, .hc-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.hc-wk span{ text-align:center; font-size:11.5px; font-weight:700; color:var(--ink-60); padding:2px 0; }
.hc-d{ position:relative; min-height:44px; border:1px solid transparent; border-radius:10px; background:#F7FAFD;
  font:inherit; font-size:14px; color:var(--ink,#0B1B26); cursor:pointer; padding:0; }
.hc-d.gone{ color:var(--ink-40,#7A868D); background:transparent; }
.hc-d.has{ background:#E6F6FE; font-weight:700; }
.hc-d.has i{ position:absolute; left:50%; bottom:6px; width:6px; height:6px; margin-left:-3px;
  border-radius:50%; background:var(--cyan); }
.hc-d.now{ border-color:var(--navy); }
.hc-d.on{ background:var(--navy); color:#fff; }
.hc-d.on i{ background:#fff; }
.hc-x{ min-height:44px; }
.hc-day{ border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.hc-day-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.hc-day-hd b{ font-size:15px; }

/* rows shared by 2–6 */
.hr{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.hr:last-child{ border-bottom:0; }
.hr-m{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.hr-t{ font-weight:700; font-size:15px; line-height:1.3; overflow-wrap:anywhere; }
.hr-s{ font-size:13px; color:var(--ink-60); line-height:1.35; overflow-wrap:anywhere; }
.hr-r{ display:flex; align-items:center; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.hr.is-un .hr-t{ color:var(--navy); }
.hm{ display:block; height:5px; border-radius:3px; background:#E8EEF5; margin-top:5px; overflow:hidden; max-width:220px; }
.hm i{ display:block; height:100%; background:var(--teal); border-radius:3px; }

/* templates: a chip is a real composer, filled in */
.ht{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; }
.ht-k{ font-size:13px; font-weight:700; color:var(--ink-60); margin-right:2px; }
.ht-c{ min-height:44px; padding:0 14px; border-radius:999px; border:1px dashed var(--cyan);
  background:#F3FBFF; color:var(--navy); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.ht-c:hover{ background:#E6F6FE; }

/* 4 — the three counts */
.hk{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:6px; }
.hk-i{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px;
  border-radius:12px; background:#F7FAFD; border:1px solid var(--line); color:var(--ink,#0B1B26); text-decoration:none; }
.hk-i b{ font-size:22px; color:var(--navy); line-height:1.1; }
.hk-i span{ font-size:12.5px; color:var(--ink-60); }
.hk-i:hover{ border-color:var(--cyan); text-decoration:none; }

/* 6 — the pipeline */
.hp{ display:flex; align-items:stretch; gap:2px; overflow-x:auto; padding:2px 0 6px; text-decoration:none;
  color:var(--ink,#0B1B26); -webkit-overflow-scrolling:touch; }
.hp-s{ flex:1 0 58px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:56px; border-radius:10px; background:#F7FAFD; border:1px solid var(--line); padding:4px 2px; }
.hp-s b{ font-size:20px; color:var(--ink-40,#7A868D); line-height:1.1; }
.hp-s.has b{ color:var(--navy); }
.hp-s span{ font-size:11.5px; color:var(--ink-60); text-align:center; line-height:1.2; }
.hp-arr{ align-self:center; color:var(--ink-40,#7A868D); font-size:16px; }
.hp:hover .hp-s{ border-color:var(--cyan); }
.hd-l{ margin:0 0 6px; padding-left:18px; }
.hd-l li{ font-size:14px; line-height:1.45; margin:2px 0; }
.hd-l b{ color:var(--navy); }
.hd-a{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.hx{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

@media (max-width:380px){
  .hr{ flex-wrap:wrap; }
  .hr-r{ width:100%; justify-content:flex-start; }
}
@media (min-width:900px){
  .glance.is-home{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #hs-needs, #hs-opps, #hs-demand, #hs-racecal{ grid-column:1 / -1; }
  .hn-row{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
}
@media (prefers-reduced-motion:no-preference){
  .hn, .hc-d, .hbtn, .ht-c, .hk-i{ transition:border-color .15s, background-color .15s; }
}