/* Home calendar: today first, then what's coming. A tapped day shows that
   day's bookings and what comes after it. Loaded after the workspace sheets. */

/* Day panels: a full week elsewhere, one selected day on the current week. */
.route-home .week-after{display:none}
.route-home .week-rows.is-focused .selected-day .week-after{display:block}
.route-home .operational-week:not(.is-focused) .week-day-panels{display:none}
.route-home .operational-week.is-focused>:is(.operational-section,.week-unfinished){display:none}
.route-home .week-rows.is-focused .selected-day{padding:0;animation:none}
.route-home .week-rows.is-focused .selected-day .day-row{display:block;padding:8px 0 4px;border-top:0}
.route-home .week-rows.is-focused .selected-day .day-label{display:none}
.route-home .week-rows.is-focused .selected-day.today-row::before,
.route-home .week-rows.is-focused .selected-day .today-row::before{display:none}
.route-home .week-day-panel+.week-day-panel .day-row{border-top:1px solid var(--sp-shell-line,var(--line))}
.route-home .week-rows.is-focused .week-day-panel .day-row{border-top:0}

/* Section labels and the selected-day heading share one quiet style. */
.route-home .operational-heading{flex-direction:row;align-items:baseline;padding:16px 0 6px;border-top:0;border-bottom:1px solid var(--sp-shell-line,var(--line))}
.route-home .operational-today .operational-heading{padding-top:6px}
.route-home .operational-section .job-list,.route-home .week-after .job-list{padding-top:4px}
.route-home .operational-section .empty-slot,.route-home .week-after .empty-slot,.route-home .week-rows.is-focused .empty-slot{padding:12px 0 4px;font-size:.9375rem}
.route-home .day-focus-head{align-items:center;margin:4px 0 0;padding:0;border-bottom:1px solid var(--sp-shell-line,var(--line))}
.route-home .day-focus-head strong{margin:0;font-family:inherit;font-size:.75rem;line-height:1.5;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.route-home .day-focus-head [data-week-clear]{flex:0 0 auto;white-space:nowrap;padding:10px 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-gold);text-decoration-thickness:1.5px;text-underline-offset:4px}

/* Upcoming bookings carry their real day above the time. */
.route-home .upcoming-list .job-card{grid-template-columns:58px minmax(0,1fr) auto}
.route-home .upcoming-list .job-time b{display:block;font-weight:600;color:var(--ink);white-space:nowrap}
.route-home .upcoming-list .job-time{font-weight:400;color:var(--muted)}
.route-home .upcoming-error{margin:10px 0 0;padding:10px 12px;border:1px solid #e7d3c9;border-radius:10px;background:#fbf1ec;color:#7b4c46;font-size:.875rem;line-height:1.5}
.route-home .upcoming-error .text-action{min-height:44px;padding:0 4px;color:inherit;text-decoration:underline}

/* Day strip: a dot per booking (up to three) instead of a count. */
.route-home .week-chip-dots{display:flex;justify-content:center;gap:3px;height:6px;margin-top:2px}
.route-home .week-chip-dots i{width:5px;height:5px;border-radius:50%;background:#8a7047}
.route-home .week-chip:is(.today,.selected) .week-chip-dots i{background:var(--brand-gold)}
/* The real today keeps a gold outline while another day is selected. */
.route-home .week-strip:has(.selected) .week-chip.today:not(.selected){background:transparent;color:var(--ink);border-color:var(--brand-gold);box-shadow:inset 0 0 0 1px var(--brand-gold)}
.route-home .week-strip:has(.selected) .week-chip.today:not(.selected)>span{color:var(--muted)}
.route-home .week-strip:has(.selected) .week-chip.today:not(.selected) strong{color:var(--ink)}
.route-home .week-chip.selected:not(.today){background:var(--brand-ink);border-color:var(--brand-ink);color:var(--brand-white);outline:0}
.route-home .week-chip.selected:not(.today)>span{color:#d0cec5}
.route-home .week-chip.selected:not(.today) strong{color:var(--brand-gold)}

@media(max-width:720px){
  /* Sits on the page rather than in a second card. */
  .route-home .premium-week{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .route-home .week-toolbar{flex-wrap:nowrap;padding:0 0 6px}
  .route-home .week-heading h2{font-family:inherit;font-size:.9375rem;font-weight:500;letter-spacing:0;color:var(--muted)}
  .route-home .week-toolbar .icon-btn{width:44px;min-width:44px;height:44px;min-height:44px}
  .route-home .week-strip{gap:3px;padding:0 0 10px;border-bottom:0}
  .route-home .week-chip{min-height:60px;padding:6px 0;border-radius:12px;box-shadow:none}
  .route-home .week-chip>span{font-size:.6875rem;letter-spacing:.04em}
  .route-home .week-chip strong{margin:1px 0 0;font-size:1.25rem;line-height:1.2}
  .route-home .today-row::before{display:none}
}

/* Phone Home cards. Laptop keeps its rows: these extras only show on phones. */
.route-home :is(.job-live-state,.job-continue,.job-chev,.home-day-count,.week-back,.home-today-date,.job-clock,.job-quiet-state){display:none}
/* End time under the start, at every width. */
.route-home .job-time .job-end{display:block;font-size:.8125rem;font-weight:400;color:var(--muted)}
@media(max-width:720px){
  /* Top: a little tighter, same text and tap sizes. */
  .route-home .home-topbar{margin-bottom:12px}
  .route-home .home-topbar .page-title{font-size:1.85rem;line-height:1.15}
  .route-home .home-topbar .sub{margin-top:2px}
  .route-home .home-topbar .actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;padding-top:10px}
  .route-home .home-topbar .actions .btn{flex:1 1 140px;justify-content:center;text-align:center;min-height:44px;white-space:normal}
  .route-home .week-mode{margin-bottom:4px}

  /* Week row: with My week / Team week the arrows sit beside the tabs. */
  .route-home .home-page:has(.week-mode) .premium-week{position:relative}
  .route-home .home-page:has(.week-mode) .week-nav{position:absolute;top:-52px;right:0}
  .route-home .home-page:has(.week-mode) .week-mode{margin-right:100px}
  .route-home .home-page:has(.week-mode) .week-toolbar.is-current{padding:0;min-height:0}
  .route-home .home-page:has(.week-mode) .week-toolbar.is-current .week-heading{display:none}
  .route-home .week-toolbar.is-away .week-nav [data-week-nav="today"]{display:none}
  .route-home .week-toolbar.is-away{padding-bottom:2px}
  .route-home .week-toolbar.is-away .week-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto}
  .route-home .week-toolbar.is-away h2::before{content:'Showing '}
  .route-home .week-back{display:inline-flex;align-items:center;padding:0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-gold);text-decoration-thickness:1.5px;text-underline-offset:4px;white-space:nowrap}
  .route-home .home-page:has(.week-mode) .week-toolbar.is-away{padding-right:0}

  /* Day strip: ordinary days unboxed, one dot means bookings. */
  .route-home .week-chip{border-color:transparent;background:transparent;min-height:58px}
  .route-home .week-chip-dots i+i{display:none}
  .route-home .home-day-count{display:inline;font:inherit;font-size:.8125rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
  .route-home .operational-heading .home-day-count{margin-left:auto}
  .route-home .day-focus-head .home-day-count{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:inherit;color:inherit}
  .route-home .operational-heading{padding-top:12px}

  /* Booking cards: time, then who, where and what. */
  .route-home .job-card{display:grid;grid-template-columns:3.4em 1px minmax(0,1fr) auto;grid-template-rows:auto;column-gap:12px;row-gap:0;align-items:start;padding:12px 12px 12px 14px;margin:8px 0 0;background:var(--card,#fff);border:1px solid var(--sp-shell-line,var(--line));border-radius:12px;box-shadow:none}
  .route-home .job-card::before{content:'';grid-column:2;grid-row:1/span 4;align-self:stretch;background:var(--sp-shell-line,var(--line))}
  .route-home .job-card .job-time{grid-column:1;grid-row:1/span 4;font-size:1rem;font-weight:600}
  .route-home .job-card .job-main{display:contents}
  .route-home .job-card .job-main strong{grid-column:3;grid-row:1;align-self:center;font-size:1rem;font-weight:650;letter-spacing:0;font-family:inherit;color:var(--ink)}
  .route-home .job-card .tag{grid-column:4;grid-row:1;align-self:center;justify-self:end;margin:0;padding:1px 8px;border-radius:6px;background:#efebe3;color:var(--muted);font-size:.75rem;line-height:1.5;white-space:nowrap}
  .route-home .job-card .job-main small{grid-column:3/span 2;grid-row:2;margin-top:3px;font-size:.875rem;line-height:1.4;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
  .route-home .job-state-inline{display:none}
  .route-home .job-live-state{display:block;grid-column:3/span 2;grid-row:3;margin-top:4px;font-size:.8125rem;font-weight:650;color:var(--ink)}
  .route-home .job-continue{display:inline-flex;grid-column:3/span 2;grid-row:4;justify-self:start;align-items:center;gap:6px;margin-top:10px;min-height:44px;padding:0 16px;border-radius:10px;background:var(--brand-gold);color:var(--brand-ink);font-weight:650;font-size:.9375rem}
  .route-home .job-continue::after{content:'›';font-size:1.25rem;line-height:1}
  .route-home .job-card:has(.job-chev){grid-template-columns:3.4em 1px minmax(0,1fr) auto 14px}
  .route-home .job-chev{display:block;grid-column:5;grid-row:1/span 4;align-self:center;width:8px;height:8px;border-top:1.75px solid var(--ink);border-right:1.75px solid var(--ink);transform:rotate(45deg);margin-left:2px}
  .route-home .job-card-link:hover{transform:none}

  /* Coming up and After [day]: lighter rows under the bordered Today cards. */
  .route-home .upcoming-list .job-card{background:transparent;border:0;border-top:1px solid var(--sp-shell-line,var(--line));border-radius:0;margin:0;padding:12px 2px}
  .route-home .upcoming-list .job-card:first-child{border-top:0}
  .route-home .upcoming-list .job-card::before{display:none}
  .route-home .upcoming-list .job-card,.route-home .upcoming-list .job-card:has(.job-chev){grid-template-columns:4.1em 0 minmax(0,1fr) auto 14px}
  .route-home .upcoming-list .job-card .job-time{font-size:.9375rem}
  .route-home .upcoming-list .job-card .job-time b{font-size:.9375rem}
}

/* Home v3 on phones: no greeting, the date in the Today heading, a quiet
   Next / Not started line, and done or cancelled bookings as single lines. */
@media(max-width:720px){
  .route-home .home-topbar>div:first-child{display:none}
  .route-home .home-topbar .actions{padding-top:4px}
  .route-home .home-today-date{display:inline}
  .route-home .job-clock:not([hidden]){display:block;grid-column:3/span 2;grid-row:1;margin:0 0 2px;font-size:.6875rem;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .route-home .job-card:has(.job-clock:not([hidden])){grid-template-rows:auto auto}
  .route-home .job-card:has(.job-clock:not([hidden])) .job-main strong,.route-home .job-card:has(.job-clock:not([hidden])) .tag{grid-row:2}
  .route-home .job-card:has(.job-clock:not([hidden])) .job-main small{grid-row:3}
  .route-home .job-card.is-next{border-color:#b9b2a2;box-shadow:inset 3px 0 0 var(--brand-ink)}
  .route-home .job-card.is-next .job-clock{color:#7a5a24}
  /* Unstarted earlier visits are the actionable exception, not a second
     quietly grey 'Next'. Highlight without making the booking look cancelled. */
  .route-home .job-card.is-not-started{border-color:#c1a07a;box-shadow:inset 3px 0 0 #915a2a}
  .route-home .job-card.is-not-started .job-clock{color:#915a2a;font-weight:800}
  /* Done and cancelled: one grey line under the live work, still tappable. */
  .route-home .job-card.job-card-quiet{grid-template-columns:3.4em minmax(0,1fr) auto auto;align-items:center;margin:0;padding:10px 4px;background:transparent;border:0;border-top:1px solid var(--sp-shell-line,var(--line));border-radius:0;color:var(--muted)}
  .route-home .job-card.job-card-quiet::before,.route-home .job-card-quiet .job-chev,.route-home .job-card-quiet .job-main small,.route-home .job-card-quiet .job-end{display:none}
  .route-home .job-card-quiet .job-time{grid-row:auto;font-size:.875rem;font-weight:500;color:var(--muted)}
  .route-home .job-card-quiet.is-cancelled .job-time{text-decoration:line-through}
  .route-home .job-card-quiet .job-main strong{grid-column:2;grid-row:1;font-size:.875rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .route-home .job-card-quiet .tag{grid-column:3;grid-row:1;background:transparent;padding:0}
  .route-home .job-card-quiet .job-quiet-state{display:block;grid-column:4;grid-row:1;font-size:.8125rem;font-weight:600;white-space:nowrap}
  .route-home .job-card:not(.job-card-quiet)+.job-card-quiet{margin-top:10px}
}