/* availability.css -- session 256, cleaner scheduling (availability.js). Almost everything is inline, copied from
   the mockups (briefs/s256-mockup-*.html), which are the specification; this file holds only what inline styles
   cannot: hover, the day editor's pop-over, and the tab row. */
.s-ca{ font-family:var(--ui-font); color:#16181a }
.ca-tabs{ margin-bottom:18px }
.ca-tabs a.tab{ text-decoration:none }
.ca-cell{ cursor:pointer; transition:transform .08s ease, filter .08s ease }
.ca-cell:hover{ filter:brightness(0.97); transform:translateY(-1px) }
.ca-name:hover{ color:#1d6e77 !important; text-decoration:underline !important }
.ca-chip{ user-select:none }
.ca-pop{ position:absolute; z-index:60; width:360px; background:#ffffff; border-radius:14px; padding:16px;
  box-shadow:0 12px 36px rgba(20,40,45,0.22), 0 0 0 1px rgba(20,40,45,0.06); font-family:var(--ui-font); color:#16181a }
.ca-cover-row:hover{ background:#f7f9f9 }
.ca-viewsw{ margin-bottom:18px }
.ca-review:hover{ filter:brightness(1.03) }
/* The Staff list / App access switch: the Team map's own view switch (index.html .s-teammap .tm-viewsw), reused. */
.ca-viewsw{ display:inline-flex; background:var(--gray-bg); border-radius:999px; padding:3px; gap:2px }
.ca-viewsw .tm-viewbtn{ border:0; background:none; color:var(--text); padding:6px 14px; border-radius:999px; font:600 13px var(--ui-font); cursor:pointer }
.ca-viewsw .tm-viewbtn.on{ background:var(--teal-dark); color:#fff }
/* The Board / Requests tabs: the staff profile's own tab look (a row of words, the active one underlined). */
.ca-tabs{ display:flex; gap:4px; border-bottom:1px solid #dfe3e6 }
.ca-tabs a.tab{ padding:10px 14px; font-size:14px; font-weight:600; color:#6b747b }
.ca-tabs a.tab.on{ font-weight:700; color:#144d54; box-shadow:inset 0 -3px 0 #1d6e77 }
/* Session 269: the link box (availability.js caLinkOpen), a panel fixed over the page so it shows wherever the office
   has scrolled. Only its own Close button closes it. */
.ca-lm{ position:fixed; inset:0; z-index:1000; background:rgba(14,54,59,0.45); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; overflow-y:auto }
.ca-lm-panel{ background:#ffffff; border-radius:14px; width:100%; max-width:640px; max-height:100%; overflow-y:auto; padding:20px 22px; box-sizing:border-box; display:flex; flex-direction:column; gap:14px;
  box-shadow:inset 0 0 0 2px #ffd13a, 0 18px 48px rgba(20,40,45,0.3); font-family:var(--ui-font); color:#16181a }
.ca-lm-card{ display:flex; flex-direction:column; gap:8px }
.ca-lm-card + .ca-lm-card{ border-top:1px solid #dfe3e6; padding-top:14px }
.ca-lm-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.ca-lm-name{ font-size:18px; font-weight:800 }
.ca-lm-once{ font-size:13px; font-weight:700; color:#9a4a0e; background:#ffe8d6; padding:4px 10px; border-radius:999px }
.ca-lm-label{ font-size:12px; font-weight:700; color:#6b747b; margin-top:4px }
.ca-lm-link{ font:13px/1.45 ui-monospace, Menlo, Consolas, monospace; background:#f2f4f5; border-radius:9px; padding:9px 11px; word-break:break-all; user-select:all; -webkit-user-select:all }
.ca-lm-msg{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:9px; padding:9px 11px; font:13.5px/1.45 var(--ui-font); resize:vertical; color:#16181a }
.ca-lm-line{ font-size:13.5px; color:#4d545a; line-height:1.45 }
.ca-lm-nophone{ color:#7a5312; background:#fff5cc; border-radius:9px; padding:8px 11px }
.ca-lm-warn{ font-size:14.5px; font-weight:700; color:#9a4a0e; background:#ffe8d6; border-radius:9px; padding:10px 12px }
.ca-lm-btns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.ca-lm-done{ font-size:13px; font-weight:700; color:#1d6e77; padding:0 6px }
.ca-lm-note{ font-size:13.5px; color:#08513f; line-height:1.45 }
.ca-lm-note:empty{ display:none }
@media (max-width:600px){ .ca-lm{ align-items:flex-start } .ca-lm-panel{ padding:16px } .ca-lm-btns .btn{ flex:1 1 auto } }
/* Session 304 (briefs/session-304-brief.md Part 5): the Board on a phone, one day at a time (availability.js caPhoneNavHtml,
   caPhoneSectionHtml, caPhoneRowHtml), and App access on a phone (Part 4.1). The inline styles come from the mockups, so the
   phone rules below say !important where they must win over them. A laptop is unchanged. */
.ca-nh{ align-self:flex-start; font-size:11.5px; font-weight:700; color:#7a5312; background:#fff5cc; border-radius:999px; padding:1px 8px; margin-top:2px }
.ca-nhstop{ font-size:12px; color:#6b747b; line-height:1.35 }
.ca-pnav, .ca-pdays, .ca-prow, .ca-psec{ display:none }
@media (max-width:760px){
  .s-ca .ca-top{ flex-wrap:wrap !important; align-items:flex-start !important }
  .s-ca .ca-h1{ font-size:22px !important }
  .s-ca .ca-heads{ grid-template-columns:1fr !important; gap:12px !important }
  .s-ca .ca-hero, .s-ca .ca-stat{ grid-column:1 / -1 !important }
  .s-ca .ca-tile{ grid-column:span 6 !important; padding:14px !important; gap:4px !important }
  .s-ca .ca-tile .ca-statnum{ font-size:28px !important }
  .s-ca .ca-hero{ padding:16px !important }
  .s-ca .ca-chart{ gap:3px !important }
  .s-ca .ca-barlab{ font-size:9px !important; white-space:nowrap }
  .s-ca .ca-daybar{ flex-wrap:wrap !important; gap:10px !important; padding:12px !important }
  .s-ca .ca-daylook{ min-width:0 !important; flex:1 1 100% }
  .s-ca .ca-dps{ flex-wrap:wrap !important }
  .s-ca .ca-dayhint{ max-width:none !important; flex:1 1 100% }
  .s-ca .ca-avonly{ flex:1 1 100% ; justify-content:center }
  .ca-pnav{ display:flex; gap:8px; flex:1 1 100% }
  .ca-pstep{ flex:1 1 0; min-height:44px; border:none; border-radius:10px; background:#144d54; color:#fff; font:700 14px var(--ui-font); cursor:pointer }
  .ca-pstep:disabled{ background:#e9ecee; color:#9aa1a6; cursor:default }
  .ca-pdays{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; flex:1 1 100% }
  .ca-pday{ border:none; border-radius:8px; background:#f2f4f5; color:#16181a; padding:5px 0 4px; min-height:44px; display:flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer; font-family:var(--ui-font) }
  .ca-pday b{ font-size:11px; line-height:1.1 }
  .ca-pday span{ font-size:10.5px; line-height:1.1; opacity:.85 }
  .ca-pday i{ font-style:normal; font-size:9px; font-weight:700; color:#08513f; line-height:1.15; text-align:center; letter-spacing:-0.02em }
  .s-ca #caPills label[for="caFind"]{ flex:1 1 100% !important; margin-left:0 !important }
  .ca-pday.short i{ color:#9a4a0e }
  .ca-pday.on{ background:#144d54; color:#fff }
  .ca-pday.on i{ color:#6fd5d4 }
  .ca-psec{ display:block; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(20,40,45,0.05), 0 6px 18px rgba(20,40,45,0.06) }
  .ca-psecbar{ background:#144d54; color:#fff; padding:11px 14px; font-size:13px; font-weight:800; letter-spacing:.04em; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
  .ca-psechint{ flex:1 1 100%; font-size:12px; font-weight:600; letter-spacing:0; opacity:.85 }
  .ca-prow{ display:flex; flex-direction:column; gap:8px; padding:10px 14px; border-top:1px solid #dfe3e6 }
  .ca-pwho{ display:flex; align-items:flex-start; gap:10px }
  .ca-pname{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto }
  .ca-pname .ca-name{ font-size:14px; font-weight:700; color:#16181a; text-decoration:none; overflow-wrap:anywhere; white-space:normal }
  .ca-pwk{ font-size:12px; font-weight:700; color:#4d545a; text-align:right; flex:0 0 auto; max-width:40%; line-height:1.3 }
  .ca-pcell{ position:relative; overflow:hidden; min-height:46px; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px 8px; box-sizing:border-box }
  .ca-plab{ font-size:13px; font-weight:700; text-align:center }
  .ca-pout{ font-size:12px; color:#9a4a0e; line-height:1.4 }
  .ca-pflex{ font-size:12px; color:#7a5312; line-height:1.4 }
  .s-ca .ca-setrow{ grid-template-columns:1fr !important; gap:6px !important }
  .ca-pop{ max-width:calc(100vw - 20px); box-sizing:border-box }
  /* App access */
  .s-ca .ca-aahead{ display:none !important }
  .s-ca .ca-aarow{ grid-template-columns:24px minmax(0, 1fr) auto !important; row-gap:6px !important; padding:12px 14px !important }
  .s-ca .ca-aarow > .ca-aaname{ grid-column:2 / 4 }
  .s-ca .ca-aarow > .ca-aac{ grid-column:2 / 4; font-size:12.5px !important }
  .s-ca .ca-aarow > .ca-aac::before{ content:attr(data-k) ": "; color:#6b747b; font-weight:600 }
  .s-ca .ca-aarow > span:nth-child(3){ grid-column:2 / 4 }
  .s-ca .ca-aarow > a:last-child{ grid-column:2 / 4; text-align:left !important }
  .s-ca .ca-aabar{ padding:10px 14px !important }
}