/* Styles for the Week screen, its Call dialog and Share menu (views/week.js).
   Loaded after /app/app.css on every /app/ page. Only the builder of that view edits this file, so
   parallel work never touches the same file. Use the shared classes in app.css first (see the
   class list at its top and CONTRACTS.md §10); put only this screen's own additions here, and
   start every selector with the view's root class (for example .view-week) so nothing leaks into
   other screens. Tokens (colors, fonts) come from /shared/tokens.css. */

/* ---------- Today ---------- */

.view-week .today .btn{justify-self:start}
.view-week .today-lines{font-size:.95rem}
.view-week .today-ok{color:var(--muted);font-size:.95rem}

/* ---------- Needs your attention ----------
   The whole row is the link: the link's ::after covers the row, and the X that hides a row sits
   above it as its own button. */

.view-week .attention .list-row{position:relative}
.view-week .attention a.row-text{color:inherit;text-decoration:none}
.view-week .attention a.row-text::after{content:"";position:absolute;inset:0}
.view-week .attention a.row-text:focus-visible{outline:none}
.view-week .attention .list-row.is-link:hover{background:var(--pen-wash)}
.view-week .attention .list-row:has(> a.row-text:focus-visible){outline:3px solid var(--pen);outline-offset:-3px;border-radius:14px}
.view-week .attention .icon-btn{position:relative;z-index:1}
.view-week .attention .row-trail .icon{width:20px;height:20px}
.view-week .attention .section-title:focus{outline:none}

/* ---------- The week: header, strip, schedule row ---------- */

.view-week .week-title h2:focus{outline:none}
.view-week .strip{padding:4px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.view-week .week-back{justify-self:start}
.view-week .schedule-add{width:100%}
.view-week .schedule-row .row-text{display:grid;gap:2px;min-width:0}
.view-week .schedule-row-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
/* A sheet with no photo: the paper icon with 'No photo' under it, in the thumbnail's place. */
.view-week .no-photo{align-content:center;justify-items:center;gap:1px;padding:2px;font-size:.6rem;line-height:1.1;text-align:center}
.view-week .no-photo .icon{width:18px;height:18px}

/* ---------- Day by day ---------- */

.view-week .days > li + li{border-top:1px solid var(--line);padding-top:20px}
/* Room above a day the strip (or a save) scrolls to. */
.view-week .day,.view-week .fold{scroll-margin-top:16px}
.view-week .day-head{font:inherit;letter-spacing:normal}
.view-week .day-head:focus,.view-week .fold:focus{outline:none}
.view-week .day-head:focus-visible,.view-week .fold:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
.view-week .box-home{font-weight:600}
.view-week .schedule-box .box-row > span:last-child{min-width:0}
/* On a phone the time goes over the place, so a long address isn't squeezed into a thin column. */
@media (max-width:480px){.view-week .schedule-box .box-row{grid-template-columns:minmax(0,1fr);gap:0}}

/* Entry cards */
.view-week .entry-send{justify-self:start}
.view-week .entry-send .icon{color:var(--pen)}

/* ---------- The Share menu (top bar) ----------
   The Share button sits mid-bar, so a list tied to either of its edges runs off one side of a
   phone screen or the other (measured from 320px to 430px wide). The list hangs from the bar
   instead, just under it and lined up with the bar's right padding, so it fits at any width. */
#top .bar:has(> .share-menu){position:relative}
#top .share-menu{position:static}
#top .share-menu .menu-list{left:auto;right:20px}
@media (max-width:360px){#top .share-menu .menu-list{right:14px}}