/* crew.css — Crew Calibrator's own styles, shared by index.html and the
   phone page me.html. Everything else comes from toolbox.css. */
/* Shell, buttons, chips, tables, modal/field/toast, .loc-tabs and
     .hidden all come from toolbox.css. Only this tool's own pieces below:
     the shift-start flow (name tiles, PIN pad, briefing cards) and the
     acknowledgment board grid. Sized for a front desk iPad — big targets. */
  .modal.wide{ width:760px; }

  /* ── shift start: name picker ─────────────────────────────────────── */
  .shift-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .shift-head h2{ margin:0; font-size:24px; color:var(--navy); }
  .shift-head p{ margin:4px 0 0; color:var(--muted); font-size:14px; }
  .name-search{ max-width:280px; font-size:15px; }
  .name-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
  .name-tile{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:18px 14px; text-align:left; cursor:pointer; font:inherit; color:var(--ink); min-height:76px;
  }
  .name-tile:hover{ border-color:var(--navy); }
  .name-tile .first{ display:block; font-size:18px; font-weight:700; color:var(--navy); }
  .name-tile .last{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
  .name-tile:disabled{ opacity:.55; cursor:not-allowed; }
  .name-tile.scheduled{ border-color:var(--green); box-shadow:inset 4px 0 0 var(--green), var(--shadow); }
  .name-tile .when{ display:block; font-size:12px; font-weight:600; color:var(--green-ink); margin-top:6px; }
  .name-group-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:6px 0 10px; }
  .name-grid + .name-group-label{ margin-top:22px; }
  .lineup{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
  .lineup-item{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); }
  .name-tile .needs{ display:block; font-size:11.5px; color:var(--muted); margin-top:6px; font-style:italic; }

  /* ── shift start: PIN pad ─────────────────────────────────────────── */
  .pin-wrap{ max-width:340px; margin:10px auto 0; text-align:center; }
  .pin-wrap h2{ margin:6px 0 4px; font-size:24px; color:var(--navy); }
  .pin-wrap p{ margin:0; color:var(--muted); }
  .pin-dots{ display:flex; justify-content:center; gap:16px; margin:22px 0 10px; }
  .pin-dots span{ width:18px; height:18px; border-radius:50%; border:2px solid var(--navy); }
  .pin-dots span.filled{ background:var(--navy); }
  .pin-dots.shake{ animation:fd-shake .35s; }
  @keyframes fd-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
  .pin-msg{ min-height:40px; font-size:13.5px; color:var(--red); font-weight:600; }
  .keypad{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  .keypad button{
    font:inherit; font-size:24px; font-weight:600; color:var(--navy); background:var(--card);
    border:1px solid var(--line); border-radius:14px; height:68px; cursor:pointer; box-shadow:var(--shadow);
  }
  .keypad button:active{ background:var(--bg); }
  .keypad button.small{ font-size:14px; color:var(--muted); }
  .link-btn{ background:none; border:none; color:var(--navy); font:inherit; font-weight:600; cursor:pointer; padding:4px 0; text-decoration:underline; }

  /* ── shift start: briefing ────────────────────────────────────────── */
  .brief-list{ display:flex; flex-direction:column; gap:16px; }
  .brief-card{
    background:var(--card); border:1px solid var(--line); border-left:5px solid var(--brand-gold);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px;
    display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  }
  .brief-card.no-flyer{ grid-template-columns:1fr; }
  .brief-card.kind-event{ border-left-color:var(--brand-pink); }
  .brief-card.kind-promotion{ border-left-color:var(--brand-green); }
  .brief-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:6px; font-size:12.5px; color:var(--muted); }
  .brief-card h3{ margin:0 0 6px; font-size:19px; color:var(--navy); }
  .brief-when{ font-weight:700; color:var(--ink); font-size:14px; margin-bottom:8px; }
  .brief-body{ font-size:14.5px; line-height:1.5; color:var(--ink); }
  .brief-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
  .brief-actions{ margin-top:16px; display:flex; gap:10px; align-items:center; }
  .brief-actions .btn{ font-size:15px; padding:12px 26px; }
  .flyers{ display:flex; flex-direction:column; gap:10px; }
  .flyers.multi{ flex-direction:row; flex-wrap:wrap; max-width:330px; }
  .flyers.multi .flyer{ width:155px; }
  .flyer-link{ display:flex !important; align-items:center; justify-content:center; min-height:80px; }
  .flyer{ display:block; width:190px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg); text-decoration:none; }
  .flyer img, .flyer canvas{ display:block; width:100%; height:auto; }
  .flyer .flyer-cap{ display:block; text-align:center; font-size:11.5px; font-weight:600; color:var(--navy); padding:6px; }
  .flyer.pdf-loading{ min-height:120px; }
  @media (max-width:640px){
    .brief-card{ grid-template-columns:1fr; }
    .flyer{ width:170px; }
    .flyers.multi{ max-width:none; }
  }
  .caught-up{ text-align:center; padding:36px 20px; }
  .caught-up .big-check{
    width:72px; height:72px; border-radius:50%; background:var(--green); color:#fff; font-size:38px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  }
  .caught-up h2{ margin:0 0 6px; color:var(--navy); }
  .ref-section{ margin-top:30px; }
  .ref-section h3{ font-size:14px; color:var(--navy); margin:0 0 4px; }
  .ref-section > p{ font-size:12.5px; color:var(--muted); margin:0 0 10px; }
  .ref-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; }
  .ref-item summary{ padding:12px 16px; cursor:pointer; font-weight:600; color:var(--navy); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .ref-item summary .muted{ font-weight:500; color:var(--muted); font-size:12.5px; }
  .ref-item .ref-body{ padding:0 16px 16px; }
  .ref-item .brief-card{ box-shadow:none; border:none; padding:0; }

  /* ── acknowledgment board ─────────────────────────────────────────── */
  .board-scroll{ overflow-x:auto; }
  .board{ border-collapse:separate; border-spacing:0; min-width:100%; }
  .board th, .board td{ border-bottom:1px solid var(--line); padding:9px 10px; font-size:12.5px; vertical-align:middle; }
  .board th.item-col{ min-width:130px; max-width:170px; white-space:normal; text-transform:none; letter-spacing:0; vertical-align:bottom; }
  .board th.item-col .t{ display:block; font-weight:700; color:var(--navy); font-size:12.5px; line-height:1.25; }
  .board th.item-col .s{ display:block; font-weight:500; color:var(--muted); font-size:11px; margin-top:3px; }
  .board th.item-col.ended .t{ color:var(--muted); }
  .board .name-col{ position:sticky; left:0; background:var(--card); z-index:1; min-width:170px; font-weight:600; }
  .board .name-col .s{ display:block; font-weight:500; color:var(--muted); font-size:11px; }
  .cell-ok{ color:#3f7a13; font-weight:700; white-space:nowrap; }
  .cell-missed{ white-space:nowrap; }
  .cell-none{ color:var(--muted); }
  .missed-row .name-col{ box-shadow:inset 4px 0 0 var(--red); }

  /* ── post editor / lists ──────────────────────────────────────────── */
  .row-click{ cursor:pointer; }
  .row-click:hover{ background:var(--bg); }
  .loc-checks{ display:flex; gap:16px; flex-wrap:wrap; }
  .loc-checks label, .inline-check{ display:flex; align-items:center; gap:6px; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0; font-size:13px; }
  .link-row{ display:grid; grid-template-columns:1fr 1.6fr auto; gap:8px; margin-bottom:8px; }
  .flyer-current{ display:flex; gap:10px; align-items:center; font-size:12.5px; margin-top:6px; }
  .help{ font-size:12px; color:var(--muted); margin:4px 0 0; }
  .toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
  .toolbar select{ width:auto; }
  /* ── requests (requests.js) ───────────────────────────────────────── */
  .brief-tabs{ display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--line); }
  .brief-tabs button{ font:inherit; font-weight:700; font-size:15px; color:var(--muted); background:none; border:none; border-bottom:3px solid transparent; padding:10px 14px; cursor:pointer; }
  .brief-tabs button.active{ color:var(--navy); border-bottom-color:var(--navy); }
  .brief-tabs button span{ background:var(--brand-pink); color:#fff; border-radius:999px; padding:1px 8px; font-size:12px; margin-left:4px; }
  .brief-card.kind-answer{ border-left-color:var(--green); }
  .rq-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
  .rq-toolbar input[type=search]{ flex:1; min-width:180px; }
  .rq-toolbar select{ width:auto; }
  .rq-filters{ display:flex; gap:6px; flex-wrap:wrap; }
  .rq-filter{ font:inherit; font-size:13px; font-weight:600; background:var(--card); color:var(--navy); border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; }
  .rq-filter span{ color:var(--muted); font-weight:500; margin-left:2px; }
  .rq-filter.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
  .rq-filter.active span{ color:#cfd6e6; }
  .rq-list{ display:flex; flex-direction:column; gap:10px; }
  .rq-item{ background:var(--card); border:1px solid var(--line); border-left:5px solid var(--navy); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 16px; cursor:pointer; }
  .rq-item:hover{ border-color:var(--navy); }
  .rq-item.urgent{ border-left-color:var(--red); }
  .rq-item-top{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .rq-num{ font-size:11.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
  .rq-loc{ margin-left:auto; font-size:11.5px; color:var(--muted); }
  .rq-title{ font-weight:700; font-size:15px; color:var(--navy); margin:6px 0 4px; }
  .rq-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
  .rq-empty{ text-align:center; color:var(--muted); padding:36px; background:var(--card); border:1px dashed var(--line); border-radius:var(--radius); }
  .rq-detail-head{ display:flex; gap:8px; align-items:center; }
  .rq-facts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px 18px; font-size:13.5px; margin-bottom:12px; }
  .rq-facts span{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  .rq-details{ background:var(--bg); border-radius:8px; padding:12px 14px; font-size:14px; line-height:1.5; }
  .rq-answer{ margin-top:12px; border:1px solid var(--green); background:#eaf7df; border-radius:8px; padding:12px 14px; font-size:14px; }
  .rq-answer small{ color:var(--muted); }
  .rq-thread{ display:flex; flex-direction:column; gap:10px; }
  .rq-comment{ border-left:3px solid var(--line); padding:4px 0 4px 12px; font-size:14px; }
  .rq-comment small{ color:var(--muted); margin-left:4px; }
  .rq-reply{ display:flex; gap:8px; margin-top:12px; align-items:flex-end; }
  .rq-reply textarea{ flex:1; }
  .rq-assignees{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
  .rq-assignees a{ color:inherit; text-decoration:none; margin-left:2px; }
  .rq-member-results{ display:flex; flex-direction:column; margin-top:4px; }
  .rq-member-results button{ font:inherit; text-align:left; background:var(--card); border:1px solid var(--line); border-top:none; padding:8px 10px; cursor:pointer; display:flex; flex-direction:column; }
  .rq-member-results button:first-child{ border-top:1px solid var(--line); border-radius:8px 8px 0 0; }
  .rq-member-results button:last-child{ border-radius:0 0 8px 8px; }
  .rq-member-results button span{ font-size:12px; color:var(--muted); }
  .rq-member-results button:hover{ background:var(--bg); }
  .cat-table td{ vertical-align:top; }
  .cat-table .cat-name{ min-width:200px; }

  /* ── team: roster + onboarding (moved from Staff Hub) ─────────────── */
  table.roster th{ cursor:pointer; white-space:nowrap; user-select:none; }
  table.roster th.sorted::after{ content:" ▾"; color:var(--green-d); }
  table.roster th.sorted.asc::after{ content:" ▴"; }
  table.roster tbody tr{ cursor:pointer; }
  table.roster tbody tr:hover{ background:var(--bg); }
  .sub-cell{ font-size:11.5px; color:var(--muted); }
  .soon-chip{ font-size:11px; padding:2px 8px; border-radius:999px; background:#fff3d1; color:#8a6200; }
  .section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy-3); margin:20px 0 8px; padding-top:14px; border-top:1px solid var(--line); }
  .checklist-section{ margin-bottom:14px; }
  .checklist-section h4{ font-size:12.5px; font-weight:700; color:var(--ink); margin:0 0 6px; }
  .check-row{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); }
  .check-row input[type=checkbox]{ width:16px; height:16px; flex-shrink:0; }
  .check-row.info{ color:var(--muted); font-style:italic; }
  .check-row .completed-meta{ margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }
  .progress{ height:8px; background:var(--line); border-radius:999px; overflow:hidden; min-width:120px; }
  .progress > span{ display:block; height:100%; background:var(--green); }
  .pin-reveal{ font-size:40px; font-weight:700; letter-spacing:10px; color:var(--navy); text-align:center; margin:12px 0; font-variant-numeric:tabular-nums; }

/* ── post replies ────────────────────────────────────────────────────── */
.post-thread{ margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.post-thread .link-btn{ text-decoration:none; font-size:13px; }
.post-thread-body{ margin-top:8px; }
/* Text fields inside modals span the field width (toolbox.css sizes them
   by content otherwise). */
.modal .field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.modal .field select, .modal .field textarea{ width:100%; box-sizing:border-box; }

/* ── policies + signatures (policies.js) ─────────────────────────────── */
.brief-card.kind-policy{ border-left-color:var(--red); }
.sign-modal .policy-text{ max-height:45vh; overflow-y:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:14px 16px; font-size:14px; line-height:1.55; }
.sign-form{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.sign-form.disabled{ opacity:.45; pointer-events:none; }
.sign-form .inline-check{ align-items:flex-start; }
.sign-form .inline-check input{ margin-top:3px; flex-shrink:0; }
.sign-form .consent span{ font-size:12.5px; color:var(--muted); }
.sig-pad{ width:100%; max-width:600px; height:auto; aspect-ratio:600/180; border:2px dashed var(--line); border-radius:10px; background:#fff; touch-action:none; cursor:crosshair; display:block; }

/* ── Today tab ───────────────────────────────────────────────────────── */
.today-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
.today-panel{ margin:0; }
.today-list{ display:flex; flex-direction:column; }
.today-row{ display:grid; grid-template-columns:120px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); text-decoration:none; }
.today-row:last-child{ border-bottom:none; }
.today-time{ color:var(--muted); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
a.today-issue:hover{ background:var(--bg); }
.today-row .sub-cell{ display:block; }

/* ── Requests: easier to read (larger type, more room, big targets) ──── */
.rq-filter{ font-size:14.5px; padding:10px 16px; }
.rq-toolbar input[type=search], .rq-toolbar select{ font-size:15px; min-height:44px; }
.rq-list{ gap:18px; }
.rq-group{ display:flex; flex-direction:column; gap:10px; }
.rq-group-head{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; background:none; border:none; border-bottom:2px solid var(--line); padding:8px 2px; cursor:pointer; color:var(--navy); }
.rq-group-arrow{ width:16px; color:var(--muted); font-size:14px; }
.rq-group-name{ font-size:17px; font-weight:700; }
.rq-group-count{ background:var(--navy); color:#fff; border-radius:999px; font-size:12.5px; font-weight:700; padding:2px 10px; }
.rq-group-body{ display:flex; flex-direction:column; gap:10px; }
.rq-item{ padding:16px 20px; }
.rq-title{ font-size:17px; margin:8px 0 6px; line-height:1.35; }
.rq-meta{ font-size:13.5px; gap:16px; }
.rq-num{ font-size:13px; }

.rq-detail{ font-size:16px; line-height:1.5; }
.rq-detail-head{ gap:10px; }
.rq-detail-head .chip{ font-size:13px; padding:4px 12px; }
.rq-close{ margin-left:auto; font-size:13px; }
.rq-detail-title{ font-size:24px; line-height:1.3; color:var(--navy); margin:12px 0 18px; }
.rq-detail .rq-facts{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px 24px; font-size:16px; margin-bottom:20px; }
.rq-detail .rq-facts span{ font-size:12.5px; margin-bottom:2px; }
.rq-detail .rq-details{ font-size:16px; padding:16px 18px; line-height:1.55; }
.rq-detail .rq-answer{ font-size:16px; padding:16px 18px; }
.rq-block{ margin-top:22px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.rq-block-title{ margin:0 0 14px; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); }
.rq-detail .rq-thread{ gap:14px; }
.rq-detail .rq-comment{ font-size:16px; padding:6px 0 6px 14px; }
.rq-reply-stack{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.rq-reply-stack .btn{ align-self:flex-end; }
.rq-detail .field{ margin-bottom:18px; }
.rq-detail .field label{ font-size:13px; margin-bottom:6px; display:block; }
.rq-detail input[type=text], .rq-detail input[type=date], .rq-detail textarea{ font-size:16px; min-height:48px; padding:10px 14px; border-radius:10px; }
.rq-detail textarea{ min-height:96px; line-height:1.5; }
.rq-status-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.rq-status-btn{ font:inherit; font-size:15px; font-weight:600; min-height:48px; padding:0 20px; border-radius:10px; border:2px solid var(--line); background:var(--card); color:var(--navy); cursor:pointer; }
.rq-status-btn.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.rq-detail .rq-assignees .chip{ font-size:14.5px; padding:6px 12px; }
.rq-actions{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:8px; }
.rq-actions .btn, .rq-reply-stack .btn{ font-size:15px; padding:14px 26px; }
@media (max-width:640px){
  .rq-actions .btn{ flex:1; }
  .rq-detail-title{ font-size:21px; }
}

/* ── Shopping List (shopping.js) ─────────────────────────────────────── */
.shop-add{ margin-bottom:22px; }
.shop-add .panel-body{ font-size:16px; }
.shop-form{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; }
@media (max-width:760px){ .shop-form{ grid-template-columns:1fr; } }
.shop-add input[type=text], .shop-add select{ font-size:16px; min-height:48px; padding:10px 14px; border-radius:10px; width:100%; box-sizing:border-box; }
.shop-add .field label{ font-size:13px; display:block; margin-bottom:6px; }
.shop-add .btn{ font-size:15px; padding:14px 26px; }
.shop-item{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--brand-gold); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 20px; }
.shop-item.out{ border-left-color:var(--red); }
.shop-item.status-ordered{ border-left-color:var(--navy); }
.shop-item.status-received{ border-left-color:var(--green); opacity:.8; }
.shop-item.status-declined{ border-left-color:var(--line); opacity:.7; }
.shop-name{ font-size:17px; font-weight:700; color:var(--navy); }
.shop-qty{ font-size:14px; font-weight:600; color:var(--muted); margin-left:4px; }
.shop-tags{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.shop-meta{ font-size:13.5px; color:var(--muted); }
.shop-notes{ font-size:14.5px; margin-top:6px; }
.shop-status-note{ font-size:14.5px; margin-top:8px; background:var(--bg); border-radius:8px; padding:8px 12px; }
.shop-actions{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.shop-actions .btn{ font-size:13.5px; padding:10px 14px; }
@media (max-width:640px){ .shop-item{ flex-direction:column; } .shop-actions{ flex-direction:row; flex-wrap:wrap; } }

/* ── My Purchases (purchases.js) ─────────────────────────────────────── */
.shop-item.buy-ok, .shop-item.buy-fixed{ border-left-color:var(--green); }
.shop-item.buy-off{ border-left-color:var(--red); }
.buy-lines{ margin-top:8px; border-top:1px solid var(--line); }
.buy-line{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.buy-item{ font-weight:600; color:var(--ink); min-width:0; }
.buy-nums{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }
.buy-list{ color:var(--muted); font-size:13px; }
.buy-rule{ font-weight:400; color:var(--muted); font-size:13px; margin-top:2px; }
.buy-flag{ margin-top:12px; }
.buy-flag label{ font-size:13px; display:block; margin-bottom:6px; }
.buy-flag input{ font-size:16px; min-height:44px; padding:10px 14px; border-radius:10px; width:100%; box-sizing:border-box; }
.buy-flag-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
@media (max-width:640px){ .buy-line{ flex-direction:column; align-items:flex-start; } .buy-nums{ justify-content:flex-start; } }

/* ── Checklists (checklists.js) ──────────────────────────────────────── */
.cl-picker{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px; }
.cl-pick{ font:inherit; text-align:left; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:12px 16px; cursor:pointer; color:var(--navy); }
.cl-pick.active{ border-color:var(--navy); background:var(--navy); color:#fff; }
.cl-pick-name{ display:block; font-size:18px; font-weight:700; }
.cl-pick-sub{ display:block; font-size:13px; opacity:.85; margin-top:2px; }
.cl-progress{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:14px; color:var(--muted); font-weight:600; }
.cl-progress .progress{ flex:1; height:12px; }
.cl-question{ margin-bottom:16px; border-left:5px solid var(--brand-gold); }
.cl-question strong{ font-size:16px; color:var(--navy); }
.cl-section{ margin-bottom:22px; }
.cl-section-title{ font-size:16px; color:var(--navy); margin:0 0 8px; padding-bottom:6px; border-bottom:2px solid var(--line); display:flex; justify-content:space-between; }
.cl-section-title span{ color:var(--muted); font-size:14px; }
.cl-row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; border-bottom:1px solid var(--line); }
.cl-check{ display:flex; align-items:flex-start; gap:14px; font:inherit; text-align:left; background:none; border:none; padding:12px 4px; cursor:pointer; color:var(--ink); min-height:56px; }
.cl-box{ flex-shrink:0; width:32px; height:32px; border:2px solid var(--navy); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; }
.cl-row.done .cl-box{ background:var(--green); border-color:var(--green); }
.cl-label{ font-size:16px; line-height:1.4; padding-top:4px; }
.cl-row.done .cl-label{ color:var(--muted); }
.cl-who{ display:block; font-size:13px; color:var(--green-ink); font-weight:600; margin-top:3px; }
.cl-item-note{ display:block; font-size:14px; color:var(--ink); background:var(--bg); border-radius:6px; padding:4px 8px; margin-top:4px; }
.cl-note-btn{ font:inherit; font-size:13px; font-weight:600; color:var(--navy); background:none; border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; }
.cl-note-form{ grid-column:1 / -1; display:flex; gap:8px; padding:0 0 12px 46px; }
.cl-note-form input{ flex:1; font-size:15px; min-height:44px; }
.cl-notes{ margin-top:10px; }
.cl-complete{ margin:18px 0 8px; display:flex; justify-content:flex-end; }
.cl-complete .btn{ font-size:15px; padding:14px 28px; }
@media (max-width:640px){ .cl-picker{ grid-template-columns:1fr; } }
.cl-add{ margin-bottom:18px; }
.cl-add-grid{ display:grid; grid-template-columns:2fr 1fr; gap:14px; }
@media (max-width:760px){ .cl-add-grid{ grid-template-columns:1fr; } }
.cl-add input[type=text]{ width:100%; box-sizing:border-box; font-size:15px; min-height:44px; }
.cl-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.cl-chip{ font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--navy); cursor:pointer; }
.cl-chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.cl-chips.small .cl-chip{ font-size:12.5px; padding:4px 10px; }
.cl-edit-row{ display:flex; gap:12px; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.cl-edit-main{ flex:1; display:flex; flex-direction:column; gap:8px; }
.cl-edit-main .ce-label{ font-size:15px; font-weight:600; width:100%; box-sizing:border-box; }
.cl-edit-controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cl-edit-controls .ce-section{ font-size:13px; width:220px; }
.cl-edit-side{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.cl-missed{ margin:4px 0 0 18px; font-size:14px; color:var(--red); }
.cl-history summary{ gap:12px; }

/* ── codes (from Trouble Tester) ─────────────────────────────────────── */
.cl-row-btns{ display:flex; gap:6px; }
.cl-code-btn{ white-space:nowrap; }
.cl-code-reveal{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:0 0 12px 46px; padding:10px 14px; background:#fff3d1; border:1px solid var(--brand-gold); border-radius:10px; font-size:15px; }
.cl-code-reveal code, #todayCodes code{ font-size:16px; font-weight:700; background:#fff; padding:2px 8px; border-radius:6px; }
.ce-code{ font-size:13px; }

/* ── BEOs (beos.js) ──────────────────────────────────────────────────── */
.beo-today{ margin-bottom:16px; }
.beo-card summary{ gap:12px; }
.beo-facts{ color:var(--muted); font-size:14px; margin:0 0 10px; }
.beo-section{ margin:10px 0; }
.beo-section h4{ margin:0 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); }
.beo-section div{ font-size:15px; line-height:1.5; }
.beo-section.beo-bar{ background:#fff3d1; border-left:4px solid var(--brand-gold); border-radius:8px; padding:10px 14px; }
.beo-admin-card{ margin-bottom:16px; }
.beo-title{ font-size:20px; color:var(--navy); margin:8px 0 4px; }
.beo-setup{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.beo-setup input{ font-size:16px; min-height:44px; }

/* ── deleting requests ───────────────────────────────────────────────── */
.rq-select-box{ width:24px; height:24px; border:2px solid var(--navy); border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.rq-item.selected{ border-color:var(--red); background:#fff5f5; }
.rq-item.selected .rq-select-box{ background:var(--red); border-color:var(--red); }
.rq-delete-row{ display:flex; justify-content:flex-end; margin-top:18px; }

/* ── Request cards: location color, filer → assignee photos ─────────── */
.rq-loc-tabs{ margin:4px 0 16px; }
.loc-tab-count{ font-weight:700; opacity:.75; margin-left:4px; }
.rq-item{ display:flex; gap:16px; align-items:center; }
.rq-item-main{ flex:1; min-width:0; }
.rq-item.loc-north-shore{ border-left-color:var(--northshore); }
.rq-item.loc-lunken-landing{ border-left-color:var(--lunken); }
.rq-item.loc-factory-52{ border-left-color:var(--factory52); }
.rq-item.urgent{ background:#fff7f6; }
.rq-people{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.rq-arrow{ color:var(--muted); font-size:18px; font-weight:700; }
.avatar{ width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; overflow:hidden; flex-shrink:0; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-bc{ background:#e8ebf2; color:var(--navy); font-size:12px; }
.avatar-desk{ background:var(--green); color:#0c2a05; font-size:12px; }
.avatar-more{ background:#e8ebf2; color:var(--navy); font-size:12px; }
.avatar-stack{ display:inline-flex; }
.avatar-stack .avatar + .avatar{ margin-left:-12px; }
@media (max-width:560px){
  .rq-item{ flex-direction:column; align-items:stretch; gap:10px; }
  .rq-people{ align-self:flex-end; }
  .avatar{ width:34px; height:34px; font-size:12px; }
}

/* ── Insights (GMs & leadership) ─────────────────────────────────────── */
.ins-filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.ins-filters select{ min-height:40px; width:auto; min-width:170px; }
.ins-body{ transition:opacity .15s; }
.ins-body.ins-loading{ opacity:.55; }
.ins-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:14px; }
.ins-tile{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.ins-tile-label{ font-size:12.5px; color:var(--muted); font-weight:600; }
.ins-tile-value{ font-size:28px; font-weight:700; color:var(--navy); margin-top:4px; font-variant-numeric:tabular-nums; }
.ins-tile-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.ins-panel{ margin-bottom:16px; }
.ins-panel .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ins-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.ins-grid .ins-panel{ margin-bottom:0; }
.ins-grid + .ins-panel{ margin-top:16px; }
.ins-legend{ display:flex; gap:18px; font-size:13px; color:var(--ink); margin-bottom:6px; }
.ins-legend i{ display:inline-block; width:16px; height:2px; vertical-align:middle; margin-right:6px; border-radius:1px; }
.ins-chart{ position:relative; }
.ins-chart svg{ display:block; overflow:visible; }
.ins-grid-line{ stroke:var(--line); stroke-width:1; }
.ins-axis{ font-size:11px; fill:var(--muted); }
.ins-end-label{ font-size:12px; font-weight:600; fill:var(--ink); }
.ins-cross{ stroke:var(--muted); stroke-width:1; }
.ins-hit{ cursor:crosshair; outline:none; }
.ins-tip{ position:absolute; top:8px; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
  padding:8px 10px; font-size:12.5px; pointer-events:none; min-width:120px; }
.ins-tip-head{ color:var(--muted); margin-bottom:4px; }
.ins-tip-row{ display:flex; align-items:center; gap:8px; }
.ins-tip-row i{ width:12px; height:2px; display:inline-block; }
.ins-tip-row strong{ font-variant-numeric:tabular-nums; color:var(--ink); }
.ins-tip-row span{ color:var(--muted); }
.ins-table{ width:100%; border-collapse:collapse; font-size:14px; }
.ins-table th{ text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); }
.ins-table td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ins-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ins-person{ display:flex; align-items:center; gap:10px; }
.ins-person .avatar{ width:34px; height:34px; font-size:12px; }
.ins-person-text{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.ins-bar{ display:block; height:4px; background:#eef0f4; border-radius:2px; max-width:160px; }
.ins-bar i{ display:block; height:100%; background:#2a78d6; border-radius:2px; }

/* My Signed Policies (desk + phone) */
.my-signed{ margin-top:18px; }
.my-signed-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.my-signed-row:last-of-type{ border-bottom:none; }


/* ── Celebrations: birthdays + work anniversaries (Start My Shift, phone) ── */
.cel-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.cel-card{ background:linear-gradient(135deg, #fff8e8 0%, #fdf0ff 100%); border:1px solid #f1d9a8; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.cel-card.cel-anniversary{ background:linear-gradient(135deg, #eef8e6 0%, #e8f3fb 100%); border-color:#cfe5bd; }
.cel-card.is-me{ border-width:2px; border-color:#e8b64c; }
.cel-head{ display:flex; align-items:center; gap:14px; }
.cel-head h3{ margin:0; font-size:20px; color:var(--navy); }
.cel-avatar .avatar{ width:58px; height:58px; font-size:20px; box-shadow:0 0 0 3px #fff, 0 0 0 4px #e8b64c; }
.cel-anniversary .cel-avatar .avatar{ box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--green); }
.cel-wishes{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cel-wish{ display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.75); border-radius:10px; padding:8px 12px; font-size:14.5px; }
.cel-wish .avatar{ width:32px; height:32px; font-size:11px; }
.cel-form{ margin-top:14px; }
.cel-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cel-quick-btn{ min-height:42px; padding:0 16px; border-radius:999px; border:1.5px solid #e3c98e; background:#fff; font:inherit; font-size:14.5px; cursor:pointer; color:var(--ink); }
.cel-anniversary .cel-quick-btn{ border-color:#bcd9a6; }
.cel-quick-btn:hover{ background:#fff3d6; }
.cel-form .rq-reply input{ flex:1; font-size:15px; min-height:44px; }

/* ── Member Confetti: players to celebrate as they walk in (member-confetti.js) ── */
.mc{ margin-bottom:22px; overflow:hidden; border-top:6px solid transparent;
  border-image:linear-gradient(90deg, var(--northshore) 0 33.4%, var(--lunken) 33.4% 66.7%, var(--brand-gold) 66.7%) 1; }
.mc .panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mc-sub{ font-size:13px; color:var(--muted); font-weight:600; }
.mc-list{ display:flex; flex-direction:column; gap:8px; }
.mc-row{ display:grid; grid-template-columns:150px minmax(0, 1fr) minmax(0, 1.1fr); gap:6px 14px; align-items:center;
  padding:10px 14px; border-radius:10px; background:var(--bg, #f7f7fa); border-left:6px solid var(--mc, var(--navy)); }
.mc-label{ justify-self:start; padding:4px 10px; border-radius:999px; background:var(--mc, var(--navy)); color:var(--navy); font-size:12.5px; font-weight:700; white-space:nowrap; }
.mc-who{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.mc-who strong{ font-size:17px; color:var(--navy); }
.mc-detail, .mc-in{ font-size:13.5px; color:var(--muted); }
.mc-detail .tier{ margin-left:2px; }
.mc-quiet{ font-size:12px; font-weight:700; color:var(--navy); border:1.5px solid var(--navy); border-radius:999px; padding:1px 8px; }
.mc-say{ font-size:14px; color:var(--ink); }
.mc-first{ --mc:var(--lunken); }
.mc-birthday{ --mc:var(--brand-gold); }
.mc-next{ --mc:var(--northshore); }
.mc-milestone{ --mc:var(--brand-green); }
.mc-anniversary{ --mc:var(--brand-cream); }
@media (max-width:760px){
  .mc-row{ grid-template-columns:1fr; }
}

/* ── Staff Checkup (Team) ─────────────────────────────────────────────── */
.ck-gaps{ display:flex; flex-wrap:wrap; gap:8px; }
.ck-gap{ display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 14px 0 6px; border:1.5px solid var(--line); border-radius:999px;
  background:var(--card); font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
.ck-gap:hover{ border-color:var(--muted); }
.ck-gap-n{ min-width:30px; height:30px; border-radius:999px; background:#fdecea; color:#b3261e; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; font-variant-numeric:tabular-nums; }
.ck-gap.done .ck-gap-n{ background:#e7f5dc; color:var(--green-ink); }
.ck-gap.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
/* Shirt Sizes tally (0398): counts, not gaps — only Not Given stays red. */
.ck-sizes .ck-gap{ cursor:default; }
.ck-sizes .ck-gap:hover{ border-color:var(--line); }
.ck-sizes .ck-gap:not(.ck-not-given) .ck-gap-n{ background:var(--line); color:var(--navy); }
.ck-toolbar{ align-items:center; margin-top:4px; }
.ck-toolbar input[type=search]{ min-width:240px; min-height:40px; }
.ck-table{ width:100%; border-collapse:collapse; font-size:14px; }
.ck-table th{ text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.ck-table td{ padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ck-table .ck-c{ text-align:center; }
.ck-yes{ color:var(--green-ink); font-weight:700; font-size:16px; }
.ck-no{ display:inline-block; background:#fdecea; color:#b3261e; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.ck-pol{ font-size:12px; color:var(--muted); margin-top:4px; max-width:260px; }
.ck-empty{ text-align:center; color:var(--muted); padding:28px !important; }

/* ══ Type & controls system (Crew Calibrator) ═══════════════════════════
   One small set of styles everywhere, readable for every age:
     Page heading     24px bold navy      (.shift-head h2)
     Section heading  18px bold navy      (panel/modal titles, request groups,
                                           Handle This Request, Still Current…)
     Subheading       15px bold navy      (small group titles inside a section)
     Field label      14px semibold ink   (no all-caps)
     Body / inputs    15px
     Help & meta      13.5px muted
   Buttons keep the toolbox colors (green = do it, navy = other, yellow =
   cancel, red = delete) but read in normal case at one size: 15px, 44px
   tall (.sm: 13.5px, 36px). No all-caps anywhere in this tool except the
   sidebar section names, which match every other toolbox tool. */
body{ font-size:15px; }

/* Section headings */
.panel-head h3, .modal h3, .rq-group-name, .ref-section h3, .rq-block-title, .ins-panel .panel-head h3{
  font-size:18px; font-weight:700; color:var(--navy); text-transform:none; letter-spacing:0; }
/* Subheadings (were tiny all-caps labels) */
.name-group-label, .section-title, .beo-section h4{
  font-size:15px; font-weight:700; color:var(--navy); text-transform:none; letter-spacing:0; }

/* Field labels and checkbox labels */
label{ font-size:14px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:6px; }
.loc-checks label, .inline-check, .check-row{ font-size:14.5px; font-weight:500; }
.rq-facts span{ font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted); }

/* Inputs: one size, comfortable to tap */
input[type=text], input[type=email], input[type=search], input[type=time], input[type=url], input[type=date],
input[type=number], textarea, select{ font-size:15px; }
input[type=text], input[type=email], input[type=search], input[type=time], input[type=url], input[type=date],
input[type=number], select{ min-height:44px; padding:9px 12px; }
textarea{ padding:10px 12px; line-height:1.5; }

/* Help and meta text */
.help, .ins-tile-sub, .sub-cell{ font-size:13.5px; line-height:1.45; color:var(--muted); }

/* Buttons: normal case, one size */
.btn{ text-transform:none; letter-spacing:0; font-size:15px; font-weight:600; padding:10px 18px; min-height:44px; line-height:1.2; }
.btn.sm{ font-size:13.5px; padding:7px 13px; min-height:36px; }
.rq-status-btn{ min-height:44px; font-size:15px; font-weight:600; }

/* Tables and KPI labels: no all-caps */
th, .ins-table th, .ck-table th{ text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--muted); }
.kpi .label{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; }
.ins-tile-label{ font-size:13.5px; }

/* Shopping List layout: fields never push past the panel */
.shop-form{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width:760px){ .shop-form{ grid-template-columns:minmax(0, 1fr); } }
.rq-group-head .btn{ margin-left:auto; }

/* Meta text: one readable size (13.5px) instead of 11–12.5px variations */
.name-tile .when, .name-tile .needs, .brief-meta, .ref-section > p, .ref-item summary .muted, .flyer-current,
.rq-num, .rq-loc, .rq-member-results button span, .board .name-col .s, .board th.item-col .s, .check-row .completed-meta,
.sign-form .consent span, .today-time, .ck-pol, .ins-tip, .flyer .flyer-cap{ font-size:13.5px; }
.board th, .board td, .board th.item-col .t, .checklist-section h4, .cl-chips.small .cl-chip{ font-size:14px; }
.rq-meta{ font-size:14px; }
.checklist-section h4{ font-size:15px; color:var(--navy); }
.ins-axis{ font-size:12px; }
.ins-end-label{ font-size:13px; }
.ck-no{ font-size:13px; }

/* Start My Shift name cards: photo, full name, job title */
.name-grid{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.name-tile{ display:flex; align-items:center; gap:14px; text-align:left; }
.name-photo .avatar{ width:56px; height:56px; font-size:18px; }
.name-tile.scheduled .name-photo .avatar{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--green); }
.name-text{ display:flex; flex-direction:column; min-width:0; }
.name-tile .full{ font-size:17px; font-weight:700; color:var(--navy); line-height:1.25; }
.name-tile .title{ font-size:14px; color:var(--muted); margin-top:2px; }
.name-tile .when, .name-tile .needs{ margin-top:5px; }

/* Top bar: Lodge page title + upbeat line, and today's date */
.topbar .page-head{ flex:1; min-width:220px; }
.topbar .page-head h2{ font-size:22px; color:var(--navy); }
.topbar .page-head .sub{ font-size:14px; color:var(--muted); margin-top:3px; line-height:1.4; }
.today-date{ font-size:15px; font-weight:600; color:var(--navy); background:#eef6e6; border:1px solid #d3e8c0; border-radius:999px; padding:7px 14px; white-space:nowrap; }
@media (max-width:760px){ .today-date{ font-size:13.5px; padding:5px 11px; } .topbar .page-head h2{ font-size:19px; } }

/* ── Tables: centered numbers, nothing cut off ─────────────────────────
   Number/status columns are centered under centered headers; the name
   column takes the rest of the width. Two panels side by side only when
   there's room, and any table that's still too wide scrolls sideways
   instead of being clipped. */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ins-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.ins-table th.num, .ins-table td.num, .ck-table th.ck-c, .ck-table td.ck-c{ text-align:center; padding-left:10px; padding-right:10px; }
.ins-table th:first-child, .ins-table td:first-child{ width:38%; min-width:190px; }
.ins-table td.num{ white-space:nowrap; }
.ins-person-text > span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ins-table th{ white-space:nowrap; }
.ck-table td:first-child{ min-width:220px; }

/* ── Post editor: grouped sections, matching controls ───────────────── */
input[type=datetime-local]{ font:inherit; font-size:15px; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink); width:100%; box-sizing:border-box; }
.pf-section{ padding:18px 0; border-top:1px solid var(--line); }
.pf-section:first-of-type{ border-top:none; padding-top:4px; }
.pf-section h4{ margin:0 0 12px; font-size:15px; font-weight:700; color:var(--navy); }
.pf-kinds{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.pf-kind{ display:flex; flex-direction:column; gap:3px; text-align:left; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card); font:inherit; cursor:pointer; color:var(--ink); }
.pf-kind strong{ font-size:15px; color:var(--navy); }
.pf-kind span{ font-size:13px; color:var(--muted); line-height:1.35; }
.pf-kind:hover{ border-color:var(--muted); }
.pf-kind.active{ border-color:var(--navy); background:#eef1f8; box-shadow:inset 0 0 0 1px var(--navy); }
@media (max-width:640px){ .pf-kinds{ grid-template-columns:1fr; } }
.file-pick{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.file-btn{ position:relative; overflow:hidden; margin:0; cursor:pointer; display:inline-flex; align-items:center; }
.file-btn input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.flyer-current{ font-size:14px; }
.pf-link-adds{ display:flex; gap:8px; flex-wrap:wrap; }
.link-row .btn{ min-height:44px; }
.pf-ack{ margin-top:14px; font-size:15px; }

/* Checklist list/day chips match the pick-pills used everywhere else */
.cl-chips{ gap:8px; }
.cl-chip{ min-height:40px; padding:0 16px; border-width:1.5px; font-size:14px; font-weight:500; color:var(--ink); }
.cl-chip.active{ color:#fff; }
.cl-chips.small .cl-chip{ min-height:32px; padding:0 12px; font-size:13.5px; }



/* Who posted a bulletin, and the comment thread */
.brief-poster{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin:2px 0 8px; }
.brief-poster .avatar{ width:30px; height:30px; font-size:11px; }
.brief-poster strong{ color:var(--ink); }
.thread-btn{ margin-top:12px; }
.post-comment{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:#f8fafc; border-radius:10px; font-size:14.5px; }
.post-comment .avatar{ width:32px; height:32px; font-size:11px; }
.post-comment small{ color:var(--muted); }
.poster-cell{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.poster-cell .avatar{ width:28px; height:28px; font-size:10.5px; }

/* ── Lodge News (phone page) ────────────────────────────────────────── */
.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-card{ background:var(--card); border:1px solid var(--line); border-left:5px solid var(--navy); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
.news-card.is-new{ border-left-color:var(--brand-pink, #e5487a); }
.news-card h3{ margin:4px 0 6px; font-size:18px; color:var(--navy); }
.news-flyers{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
.news-flyer{ max-width:100%; max-height:320px; border-radius:10px; border:1px solid var(--line); display:block; }
.news-thread{ margin-top:10px; }

/* One text color on every selected location pill/tab: navy reads clearly on
   all three location colors (white doesn't). Selected = filled + bold. */

/* Shopping List: "Already on the list?" suggestions while typing */
.shop-dupes{ margin-top:8px; border:1px solid #f1d9a8; background:#fffaf0; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.shop-dupes-head{ font-size:14px; font-weight:700; color:var(--navy); }
.shop-dupe{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ── Tables: one alignment rule for the whole tool ─────────────────────
   The first column (the name or title) reads left; every other column —
   dates, statuses, counts, chips — is centered under a centered header.
   Action-button columns (.right) stay right; add .left to a cell/header to
   keep a long-text column left-aligned. */
.content table th:not(:first-child), .content table td:not(:first-child),
.modal table th:not(:first-child), .modal table td:not(:first-child){ text-align:center; }
.content table th.right, .content table td.right, .modal table th.right, .modal table td.right{ text-align:right; }
.content table th.left, .content table td.left, .modal table th.left, .modal table td.left{ text-align:left; }
.content table td:not(:first-child) .poster-cell{ justify-content:center; }

/* ── Shout Outs ──────────────────────────────────────────────────────── */
.chip.shout{ background:#ffe9f1; color:#b0245a; }
.pf-kinds{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:900px){ .pf-kinds{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.pf-people{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pf-people:empty{ display:none; }
.pf-person{ display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:#fff; border-radius:999px; padding:6px 8px 6px 14px; font-size:14px; font-weight:600; }
.pf-person button{ background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:12px; }
.pf-people-results{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.pf-person-hit{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font:inherit; font-size:14.5px; cursor:pointer; color:var(--ink); }
.pf-person-hit:hover{ border-color:var(--navy); }
.shout-card{ background:linear-gradient(135deg, #fff0f6 0%, #fff8e8 100%); border-color:#f6c6d9; }
.shout-card.is-me{ border-color:#e5487a; }
.shout-for-me{ font-weight:700; color:#b0245a; font-size:15px; margin-bottom:8px; }
.shout-head{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.shout-people{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:10px; }
.shout-person{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; min-width:90px; }
.shout-person .avatar{ width:64px; height:64px; font-size:20px; box-shadow:0 0 0 3px #fff, 0 0 0 5px #e5487a; }
.shout-person strong{ color:var(--navy); font-size:15px; }
.shout-person span{ font-size:13px; color:var(--muted); }
.shout-card h3{ margin:4px 0 6px; font-size:20px; color:var(--navy); }
.news-shout{ padding:0; border:none; box-shadow:none; background:none; }

/* ── Rented spaces + event wrap-ups ──────────────────────────────────── */
.space-panel{ margin-bottom:16px; }
.space-panel .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.space-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.space-row:last-of-type{ border-bottom:none; }
.space-row.over{ background:#fbfcfe; }
.wrap-event{ font-size:15px; margin:0 0 12px; }
.wrap-conditions{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
@media (max-width:640px){ .wrap-conditions{ grid-template-columns:1fr; } }
.wrap-cond[data-cond="cleaning_fee"].active{ border-color:var(--red); background:#fff5f5; box-shadow:inset 0 0 0 1px var(--red); }
.wrap-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.wrap-thumbs img{ width:110px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; }
.wrap-card{ border:1px solid var(--line); border-left:5px solid var(--green); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; background:var(--card); }
.wrap-card.needs_attention{ border-left-color:var(--amber); }
.wrap-card.cleaning_fee{ border-left-color:var(--red); }
.wrap-card h4{ margin:8px 0 6px; font-size:16px; color:var(--navy); }

/* ── Active Flyers ───────────────────────────────────────────────────── */
.flyer-card{ margin:0; border-left:5px solid var(--green); }
.flyer-card.soon{ border-left-color:var(--amber); }
.flyer-card.past{ border-left-color:var(--red); }
.flyer-card-grid{ display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 1fr); gap:20px; align-items:start; }
@media (max-width:720px){ .flyer-card-grid{ grid-template-columns:1fr; } }
.flyer-card h3{ margin:4px 0 6px; font-size:18px; color:var(--navy); }
.flyer-card .flyers img, .flyer-card .flyers canvas{ max-width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
.flyer-spots{ margin-top:12px; }
.flyer-spots ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14.5px; }
.flyer-spots li{ display:flex; flex-direction:column; }
.flyer-card-grid.no-files{ grid-template-columns:1fr; }

/* Sign-in: today's crew first; everyone else behind Show Everyone */
.name-tile.today{ border-color:#cfe5bd; }
.name-more{ margin-top:18px; }
.name-more .btn{ min-height:48px; }

/* ── Working With You · Look It Up · End My Shift (shift-tools.js) ───── */
.crew-on{ margin-bottom:22px; }
.crew-on-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; }
.crew-on-person{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.crew-on-person strong{ display:block; font-size:15px; color:var(--navy); }
.crew-on-person span{ font-size:13px; color:var(--muted); }
.crew-on-grid.later .crew-on-person{ background:transparent; border-style:dashed; }
.crew-on-grid.later .avatar{ opacity:.75; }
.search-box{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); padding:0 14px; margin-bottom:12px; color:var(--muted); }
.search-box:focus-within{ border-color:var(--navy); }
.search-box input{ border:none; outline:none; box-shadow:none; background:transparent; font-size:17px; padding:14px 0; flex:1; min-width:0; }
.search-suggest{ display:flex; flex-wrap:wrap; gap:8px; }
.search-suggest .chip{ cursor:pointer; border:1px solid var(--line); background:var(--card); font:inherit; font-size:14px; padding:6px 12px; }
.search-hits{ display:flex; flex-direction:column; gap:8px; }
.search-hit{ border:1px solid var(--line); border-radius:10px; background:var(--card); }
.search-hit summary{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; }
.search-hit summary::-webkit-details-marker{ display:none; }
.search-hit summary strong{ display:block; color:var(--navy); }
.search-icon{ width:34px; height:34px; border-radius:8px; background:#eef1f6; color:var(--navy); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.search-body{ padding:0 14px 14px 60px; }
.search-body p:first-child{ margin-top:0; }
.co-items{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; }
.co-item{ display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400; margin:0; }
.co-item input{ width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.co-item:has(input:checked){ border-color:var(--navy); background:#f3f5fa; }
.co-done{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; background:#eef8e6; color:#2f5c12; margin-bottom:14px; font-weight:600; }
.co-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.push-card .btn + .btn{ margin-left:8px; }
@media (max-width:600px){ .search-body{ padding-left:14px; } }
.brief-tabs{ overflow-x:auto; scrollbar-width:none; }
.brief-tabs button{ white-space:nowrap; flex-shrink:0; }
.co-item > span > .sub-cell, .search-hit summary .sub-cell{ display:block; margin-top:2px; }
.checkout .help + .field{ margin-top:16px; }

/* ── Paddle Pickups (pickups.js) ─────────────────────────────────────── */
.pickup-item{ border-left-color:var(--navy); }
.pickup-item.pickup-ready{ border-left-color:var(--green); }
.pickup-item.pickup-requested{ border-left-color:var(--brand-gold); }
.pickup-item.pickup-picked_up{ border-left-color:var(--line); opacity:.8; }
.pickup-paddle{ font-size:15px; font-weight:600; margin-top:2px; }
.pickup-item .shop-meta a{ color:inherit; }

/* Party Piston guest list on a BEO card */
.beo-guests{ margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
.beo-guest-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.beo-guest-list{ display:flex; flex-direction:column; gap:6px; }
.beo-guest-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; }

/* Member Requests (member-requests.js) and the Today tab's other desk tools */
.mr-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.mr-tools input[type="search"] { flex: 1 1 280px; min-width: 0; }
.mr-tools .loc-tabs { margin: 0; }
.mr-facts > div { margin-top: 2px; }
.mr-detail { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.desk-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.desk-tools-label { font-size: 14px; font-weight: 600; color: var(--muted); }

/* ── Training quizzes (quiz.js), the Paddle Picker staff training look ───── */
.brief-card.kind-quiz{ border-left-color:var(--brand-gold); }
.cq-done-list{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
body.cq-open{ overflow:hidden; }
.cq-screen{ position:fixed; inset:0; z-index:300; background:var(--bg); overflow-y:auto; }
.cq-wrap{ max-width:760px; margin:0 auto; padding:24px 18px 60px; }
.cq-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.cq-name{ font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.cq-muted{ color:var(--muted); font-size:13px; margin:8px 0 0; }
.cq-error{ color:var(--red); font-size:13px; font-weight:600; margin:8px 0 0; }
.cq-progress{ display:flex; gap:6px; margin-bottom:22px; }
.cq-progress span{ flex:1; height:6px; border-radius:999px; background:var(--line); }
.cq-progress span.done{ background:var(--green-ink); }
.cq-progress span.current{ background:var(--green); }
.cq-step{ font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.cq-question{ font-size:22px; line-height:1.35; color:var(--navy); margin:0 0 18px; }
.cq-options{ display:flex; flex-direction:column; gap:10px; }
.cq-option{ display:block; width:100%; text-align:left; font:inherit; font-size:15.5px; line-height:1.45; color:var(--ink);
  background:#fff; border:2px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; box-shadow:var(--shadow); }
.cq-option:hover:not([disabled]){ border-color:var(--navy); }
.cq-option[disabled]{ cursor:default; }
.cq-option.correct{ border-color:var(--green-ink); background:color-mix(in srgb, var(--green) 12%, #fff); }
.cq-option.correct::after{ content:"  ✓"; color:var(--green-ink); font-weight:800; }
.cq-option.incorrect{ border-color:var(--red); background:color-mix(in srgb, var(--red) 9%, #fff); }
.cq-option.incorrect::after{ content:"  ✗"; color:var(--red); font-weight:800; }
.cq-feedback{ margin-top:16px; border:2px solid var(--line); border-radius:12px; padding:12px 16px; background:#fff; }
.cq-feedback.is-correct{ border-color:var(--green-ink); background:color-mix(in srgb, var(--green) 12%, #fff); }
.cq-feedback.is-incorrect{ border-color:var(--red); background:color-mix(in srgb, var(--red) 9%, #fff); }
.cq-feedback-label{ font-weight:800; font-size:13px; margin-bottom:4px; }
.cq-feedback.is-correct .cq-feedback-label{ color:var(--green-ink); }
.cq-feedback.is-incorrect .cq-feedback-label{ color:var(--red); }
.cq-feedback p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink); }
.cq-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cq-result{ background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:22px; text-align:center; border-top:6px solid var(--red); }
.cq-result.is-pass{ border-top-color:var(--green); }
.cq-result-pill{ display:inline-block; padding:5px 14px; border-radius:999px; font-weight:800; font-size:13px; color:#fff; background:var(--red); }
.cq-result.is-pass .cq-result-pill{ background:var(--green-ink); }
.cq-score{ font-size:34px; font-weight:800; color:var(--navy); margin:10px 0 6px; }
.cq-result p{ margin:6px auto 0; max-width:520px; font-size:15px; }
.cq-review-head{ margin:30px 0 12px; font-size:18px; color:var(--navy); }
.cq-review{ display:flex; flex-direction:column; gap:10px; }
.cq-review-item{ background:#fff; border-radius:12px; padding:12px 16px; border-left:5px solid var(--green-ink); box-shadow:var(--shadow); }
.cq-review-item.is-incorrect{ border-left-color:var(--red); }
.cq-review-q{ font-weight:700; color:var(--navy); margin-bottom:6px; }
.cq-mark{ display:inline-block; width:20px; font-weight:800; }
.cq-review-item.is-correct .cq-mark{ color:var(--green-ink); }
.cq-review-item.is-incorrect .cq-mark{ color:var(--red); }
.cq-review-a{ font-size:14px; margin:2px 0; }
.cq-review-why{ font-size:13px; color:var(--muted); margin-top:6px; }
/* Branded quiz header: the shared public header plus who's taking it. */
.cq-screen .cq-head{ position:relative; padding-top:2.25rem; }
.cq-close{ position:absolute; top:14px; right:14px; background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5);
  border-radius:999px; padding:6px 14px; font:600 13px Montserrat, Inter, sans-serif; cursor:pointer; }
.cq-close:hover{ background:#fff; color:var(--navy); }
.cq-taker{ display:inline-flex; align-items:center; gap:12px; margin-top:1rem; background:rgba(255,255,255,.08);
  border-radius:999px; padding:8px 18px 8px 8px; text-align:left; }
.cq-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; border:2px solid rgba(255,255,255,.6); }
.cq-initials{ display:flex; align-items:center; justify-content:center; background:var(--brand-gold); color:var(--navy); font-weight:800; }
.cq-taker-name{ color:#fff; font-weight:700; font-size:15px; line-height:1.2; }
.cq-taker-meta{ color:#c9d3de; font-size:12.5px; line-height:1.35; }
.cq-screen .cq-wrap{ padding-top:28px; }
.cq-screen .tb-public-footer{ margin-top:2rem; }

/* ── Start My Shift sections in the left sidebar (Nov 9, 2026) ──────── */
.shift-subnav{ margin:2px 0 8px 14px; padding-left:10px; border-left:1px solid rgba(255,255,255,.12); }
.shift-subnav.hidden{ display:none; }
.shift-subnav-label{ font-size:10.5px; letter-spacing:.6px; color:#8fa3b8; padding:10px 10px 4px; font-weight:700; }
.shift-subnav .nav-sub{ font-size:13.5px; padding:7px 10px; justify-content:space-between; }
.shift-subnav .nav-badge{ background:var(--brand-pink); color:#fff; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:700; line-height:16px; }

/* ── Take A Tour (tour.js) ─────────────────────────────────────────────── */
.tour-card{ margin-bottom:22px; border-left:4px solid var(--brand-orange); }
.tour-card .panel-body{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.tour-card .panel-body > div{ flex:1; min-width:220px; }
.tour-card h3{ margin:0 0 4px; }
.tour-card .help{ margin:0; }
.tour-box{ position:fixed; z-index:1000; right:24px; bottom:80px; width:min(420px, calc(100vw - 32px));
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-top:4px solid var(--brand-orange);
  border-radius:var(--radius); box-shadow:0 12px 40px rgba(16,36,59,.28); padding:18px 20px 16px; }
.tour-box h3{ margin:6px 0 8px; color:var(--navy); }
.tour-box .tour-body{ font-size:15px; line-height:1.55; }
.tour-box .tour-body p{ margin:0 0 10px; }
.tour-step{ font-size:13px; font-weight:600; color:var(--muted); }
.tour-bar{ height:4px; background:var(--line); border-radius:4px; margin-top:6px; overflow:hidden; }
.tour-bar span{ display:block; height:100%; background:var(--brand-orange); transition:width .2s; }
.tour-actions{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.tour-spot{ outline:3px solid var(--brand-orange) !important; outline-offset:3px; border-radius:8px; }
@media (max-width: 640px){ .tour-box{ right:16px; left:16px; bottom:76px; width:auto; } }
@media print{ .tour-box{ display:none !important; } }