:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0f2a43; color: #10222f;
}
.shell { width: min(54rem, 100%); margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.brand { color: #fff; margin: 0 0 1rem; }
.brand h1 { margin: 0; color: #fff; }
h1 { margin: 0 0 .25rem; color: #0f2a43; }
.tagline { margin: 0; color: #7fd1d9; font-weight: 600; }
.panel {
  background: #ffffff; border-radius: 14px; padding: 1.25rem 1.5rem;
  margin: 0 0 1rem; box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.panel h2 { margin: .2rem 0 .6rem; color: #0f2a43; }
.panel h3 { margin: 1.1rem 0 .4rem; color: #0f2a43; }
.panel h4 { margin: 1rem 0 .3rem; }
label { display: block; margin: .55rem 0; font-weight: 600; font-size: .92rem; }
input, select {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  border: 1px solid #b9c6cf; border-radius: 8px; font: inherit; font-weight: 400;
}
.btn {
  background: #0e7c86; color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; margin: .35rem .3rem .35rem 0;
}
.btn:hover { background: #0a6670; }
.btn.ghost { background: transparent; color: #0e7c86; border: 1px solid #0e7c86; }
.btn.small { padding: .3rem .6rem; font-size: .88rem; }
.btn.danger { color: #b3261e; border-color: #b3261e; }
a.btn { text-decoration: none; display: inline-block; }
.error { color: #b3261e; font-weight: 600; }
.muted { color: #5a6d7a; font-size: .92rem; }
.note { color: #4a5a66; font-size: .9rem; line-height: 1.45; }
.list { list-style: none; padding: 0; margin: .3rem 0; }
.list li { padding: .45rem 0; border-bottom: 1px solid #eef2f4; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.list a { color: #0e7c86; font-weight: 700; text-decoration: none; }
.rowline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.codebox {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: #f2f7f8; border: 1px dashed #0e7c86; border-radius: 10px; padding: .8rem 1rem; margin: .8rem 0;
}
.bigcode { font-size: 1.35rem; letter-spacing: .12em; font-weight: 700; color: #0f2a43; }
.roster { list-style: none; padding: 0; margin: .4rem 0; }
.roster li { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #eef2f4; flex-wrap: wrap; }
.roster .pos {
  background: #0f2a43; color: #fff; border-radius: 50%; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; font-weight: 700; flex: none;
}
.roster .who { flex: 1 1 12rem; }
.roster .actions { display: flex; gap: .15rem; flex-wrap: wrap; }
.chip { font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; vertical-align: middle; }
.chip.joined { background: #e2f4e5; color: #1d6b2f; }
.chip.invited { background: #fdf3d8; color: #7a5b00; }
.chip.not_invited { background: #eceff1; color: #546e7a; }
.checkline { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.checkline input { width: auto; margin: 0; }
.wchip { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; font-size: .85rem;
  border: 1px solid #b0bec5; border-radius: 999px; padding: .15rem .6rem; cursor: pointer; }
.wchip input { width: auto; margin: 0; }
.wchip:has(input:checked) { background: #e3f2fd; border-color: #5b8def; }

/* Calendar read view (Phase 2) */
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-top: .5rem; }
.calhead { font-weight: 700; font-size: .8rem; color: #5a6d7a; text-align: center; }
.calcell {
  border: 1px solid #e3ebef; border-radius: 8px; padding: .35rem; min-height: 5.2rem;
  background: #fbfdfd; overflow: hidden;
}
.calcell.empty { border: 0; background: transparent; }
.calday { font-weight: 700; font-size: .85rem; color: #0f2a43; }
.slot { font-size: .72rem; line-height: 1.3; margin-top: .25rem; padding: .2rem .3rem; border-radius: 6px; background: #e8f6f3; color: #0b5345; }
.slot span { display: block; }
.slot em { display: block; font-style: normal; font-weight: 700; }
.slot.blocked { background: #fdeceb; color: #8f1d17; }
.slot.none { background: transparent; color: #90a4ae; }

/* Schedule settings (Phase 2) */
.presetrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.btn.preset { text-align: left; max-width: 16rem; font-weight: 400; }
.btn.preset span { color: #5a6d7a; font-size: .85rem; }
.dayrow, .shiftrow {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid #eef2f4;
}
.dayname { width: 2.6rem; }
.dayrow select, .shiftrow input, .times input, .times select { width: auto; display: inline-block; margin: 0; }
.shiftrow input[data-sfield="name"] { width: 10rem; }
.times { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.weekblock { border-top: 2px solid #e3ebef; margin-top: .8rem; padding-top: .4rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0; }
.chipd { background: #fdeceb; color: #8f1d17; border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; font-weight: 600; }
.chipd button { border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }

/* Schedule editor + calendar extras + Pro (UX simplification pass) */
.q1row {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid #eef2f4;
}
.q1row input[data-q1="name"] { width: 10rem; }
.q1row input, .q1row select { width: auto; display: inline-block; margin: 0; }
.nextday {
  background: #e8f6f3; color: #0b5345; border-radius: 999px;
  padding: .1rem .55rem; font-size: .78rem; font-weight: 700;
}
.daychips { display: flex; gap: .35rem; flex-wrap: wrap; margin: .45rem 0; }
.daychip {
  border: 1px solid #0e7c86; background: #0e7c86; color: #fff; border-radius: 999px;
  padding: .35rem .8rem; font: inherit; font-weight: 700; cursor: pointer;
}
.daychip.off { background: transparent; color: #5a6d7a; border-color: #b9c6cf; }
.daychip.custom { background: #fdf3d8; color: #7a5b00; border-color: #e3cf8a; }
.daychip.sel { outline: 3px solid #0f2a43; outline-offset: 1px; }
#q2DayEditor { border-top: 1px solid #eef2f4; padding-top: .3rem; margin-bottom: .4rem; }
.openshift { border-top: 2px solid #e3ebef; margin-top: 1rem; padding-top: .8rem; }

/* Picking + manager (Phase 3) */
.slot.taken { background: #e8eef6; color: #0f2a43; }
.slot .holder { font-weight: 700; }
/* Calendar chips are one plain line (time · name): the line itself
 * is a block via .slot span, but the spans inside it stay inline. */
.slot .line span { display: inline; }
.slot .xflag { font-weight: 700; }
.turnline { font-size: 1.02rem; margin: .3rem 0; }
.audit { margin: .3rem 0; padding-left: 1.2rem; }
.audit li { padding: .3rem 0; border-bottom: 1px solid #eef2f4; font-size: .9rem; line-height: 1.4; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn[data-armed] { background: #b3261e; color: #fff; border-color: #b3261e; }

/* Notifications + topbar (Phase 5) */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 1rem; margin: 0 0 1rem;
}
.badge {
  background: #b3261e; color: #fff; border-radius: 999px;
  padding: .05rem .5rem; font-size: .8rem; font-weight: 700; vertical-align: middle;
}
.ntflist { list-style: none; padding: 0; margin: .4rem 0; }
.ntf { border-bottom: 1px solid #eef2f4; }
.ntfmain {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  font: inherit; padding: .6rem .2rem; cursor: pointer;
}
.ntfmain:hover { background: #f5f9fa; }
.ntfhead { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.ntfbody { display: block; color: #4a5a66; font-size: .9rem; line-height: 1.45; margin: .25rem 0; white-space: pre-wrap; }
.ntf.unread .ntfhead strong { color: #0f2a43; }
.ntf.superseded { opacity: .55; }

/* Board panel (Phase 4) */
.slot .gw { font-weight: 700; color: #7a5b00; }
.slot.extra { background: #fdf3d8; color: #7a5b00; }
/* My Call commitment chips (Ann, 2026-10-25): the member's own
 * commitments are not calls — muted gray, dashed edge, quiet. */
.slot.commit { background: #f4f6f8; color: #607080; border: 1px dashed #c3ced4; }
/* Approved time off on the owner's calendar (migration 0015):
 * quiet blue-gray — present, but clearly not a call. */
.slot.off { background: #e8eef3; color: #47617a; }
.panel details { margin: .5rem 0; }
.mgrsec { border-top: 2px solid #e3ebef; margin-top: 1rem; padding-top: .55rem; }
.mgrsec > summary { font-size: 1.06rem; font-weight: 700; color: #0f2a43; padding: .3rem 0; list-style: none; }
.mgrsec > summary::-webkit-details-marker { display: none; }
.mgrsec > summary::after { content: "▾"; float: right; color: #5b7a86; font-weight: 400; }
.mgrsec:not([open]) > summary::after { content: "▸"; }
.panel summary { cursor: pointer; font-weight: 600; }
.panel textarea {
  font: inherit; font-weight: 400; padding: .5rem .6rem;
  border: 1px solid #b9c6cf; border-radius: 8px;
}
.list .actions { display: inline-flex; gap: .15rem; flex-wrap: wrap; }
.monthactions { display: flex; gap: .35rem; flex-wrap: wrap; margin: .15rem 0 .85rem; }

/* Tabs + first-run guide + outputs + offline (Phase 6) */
.tabs {
  display: flex; gap: .35rem; margin: 0 0 1rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabbtn {
  background: rgba(255,255,255,.14); color: #dcebf2; border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex: none;
}
.tabbtn:hover { background: rgba(255,255,255,.25); }
.tabbtn.active { background: #fff; color: #0f2a43; border-color: #fff; }

.guide {
  background: #ffffff; border: 2px solid #0e7c86; border-radius: 14px;
  padding: 1.1rem 1.4rem; margin: 0 0 1rem; box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.guide h2 { margin: .1rem 0 .3rem; color: #0f2a43; font-size: 1.15rem; }
.guide ol { list-style: none; margin: .7rem 0 0; padding: 0; }
.guide li { display: flex; gap: .65rem; align-items: flex-start; padding: .35rem 0; }
.guide .tick {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: .1rem;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  border: 2px solid #b9c6cf; color: transparent;
}
.guide li.done .tick { background: #0e7c86; border-color: #0e7c86; color: #fff; }
.guide li.done .glabel { color: #5a6d7a; text-decoration: line-through; }
.guide .glabel { font-weight: 700; color: #10222f; display: block; }
.guide .ghint { color: #4a5a66; font-size: .9rem; display: block; }

.outputs { border-top: 2px solid #e3ebef; margin-top: 1rem; padding-top: .8rem; }
.outputs .btn { margin-top: .3rem; }
.queuebar {
  background: #fdf3d8; border: 1px solid #e3cf8a; color: #5f4b00; border-radius: 10px;
  padding: .6rem .9rem; margin: .8rem 0 0; font-size: .92rem; line-height: 1.45;
}
.queuebar .qnote { display: block; margin-top: .3rem; }
.offlinebar {
  background: #fdeceb; border: 1px solid #e5a49e; color: #8f1d17; border-radius: 10px;
  padding: .6rem .9rem; margin: 0 0 1rem; font-size: .92rem; line-height: 1.45;
}
.slot.regular { background: #f1f4f6; color: #5a6d7a; font-style: italic; }

/* Merged Calendar (Ann, 2026-10-25 — "make the pick in a
 * calendar view, easy to see", then the Pick tab merged in):
 * the ONE month grid is a grid of tappable days; the tapped day
 * (or its whole week, on week boards) is outlined, the viewer's
 * own holdings are tinted a deeper green than a merely-open
 * slot, and the tapped day's full detail sits in the strip
 * under the grid. While a round is live, the turn bar sits
 * directly above the grid. Later the same night: whole slots
 * the viewer can pick right now carry a compact Pick button in
 * the cell itself (in place of the word OPEN), and open extras
 * offered to the viewer carry a compact Claim button — same
 * actions as the strip / Board tab, one size smaller. */
.calcell.pickday { cursor: pointer; }
.calcell.sel { border-color: #0f2a43; box-shadow: inset 0 0 0 2px #0f2a43; }
.calcell .slot .cellpick, .calcell .slot .calclaim {
  padding: .05rem .55rem; font-size: .7rem; line-height: 1.3; margin-left: .1rem;
}
.slot.mine { background: #cfe5d6; color: #0b5345; }
.turnbar { border-top: 2px solid #e3ebef; margin-top: 1rem; padding-top: .8rem; }
.turnbar .turnhead { font-weight: 700; color: #0f2a43; margin: 0 0 .4rem; }
.turnbar .turnline { margin: 0 0 .4rem; }
.pickstrip { border-top: 2px solid #e3ebef; margin-top: 1rem; padding-top: .8rem; }
.pickstrip h4 { margin: 0 0 .5rem; color: #0f2a43; }
.pickstrip .slot { font-size: .85rem; }
.pickstrip .slot .btn { margin-top: .35rem; }
.pickstrip .slot .chip { margin-top: .3rem; }

/* Print outputs (Phase 6): only #printRoot exists on paper. The
 * browser's print dialog is also the PDF path ("Save as PDF"). */
#printRoot { display: none; }
@media print {
  /* Landscape by default (Ann, 2026-10-26 — the month grid was
   * squeezed in portrait). A default only: the print dialog still
   * lets the user flip to portrait. */
  @page { size: landscape; margin: 12mm; }
  body { background: #fff; }
  .shell { display: none !important; }
  #printRoot {
    display: block; color: #000; font-size: 11.5px; line-height: 1.35;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    max-width: 100%;
  }
  #printRoot h1 { font-size: 17px; margin: 0 0 2px; color: #000; overflow-wrap: break-word; }
  #printRoot .psub { color: #444; margin: 0 0 10px; overflow-wrap: break-word; }
  #printRoot .pweek {
    font-weight: 700; margin: 10px 0 3px; padding-bottom: 2px;
    border-bottom: 1px solid #999;
  }
  #printRoot .pdayline { margin: 2.5px 0; overflow-wrap: break-word; }
  #printRoot .pdayline .pdate { font-weight: 700; }
  #printRoot .pdayline.blocked {
    background: #e8e8e8; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #printRoot .pgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  #printRoot .phead { font-weight: 700; text-align: center; font-size: 10.5px; color: #333; }
  #printRoot .pcell { border: 1px solid #bbb; border-radius: 4px; padding: 3px 4px; min-height: 58px; }
  #printRoot .pcell.empty { border: 0; }
  #printRoot .pday { font-weight: 700; font-size: 11px; }
  #printRoot .pline { margin-top: 2px; }
  #printRoot .pline .who { font-weight: 700; }
  #printRoot .pline.blocked {
    background: #e8e8e8; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #printRoot .pline.regular { color: #666; font-style: italic; }
  #printRoot .pline.extra { font-weight: 600; }
  #printRoot .pline.off { color: #555; font-style: italic; }
  #printRoot table.plist { border-collapse: collapse; width: 100%; }
  #printRoot table.plist td, #printRoot table.plist th {
    border-bottom: 1px solid #ccc; padding: 3px 5px; text-align: left; vertical-align: top;
  }
  #printRoot tr.blocked td {
    background: #e8e8e8; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #printRoot tr.regular td { color: #666; font-style: italic; }
}

/* Phone widths (Phase 6 responsive pass) */
@media (max-width: 640px) {
  .shell { padding: .8rem .55rem 2rem; }
  .panel { padding: 1rem .85rem; }
  .calcell { min-height: 3.9rem; padding: .25rem; }
  .slot { font-size: .64rem; padding: .14rem .22rem; }
  .calday { font-size: .78rem; }
  .tabbtn { padding: .45rem .85rem; }
  .roster .who { flex-basis: 9rem; }
}

/* Member profiles (2026-10-26): a teammate's name is the way
   into their profile card — a button that reads as the name
   itself, underlined so it reads as tappable. On the card, the
   phone number is itself the sms: link — no separate button. */
.namelink { background: none; border: 0; padding: 0; font: inherit;
  color: inherit; font-weight: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; }
.memberphone { font-size: 1.05rem; margin: .2rem 0; }

/* Profile (2026-10-25) */
.profhead { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: #0b3d3a; color: #fff; font-weight: 700; font-size: 1.15rem; }
img.avatar { object-fit: cover; }
.photorow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: -.2rem 0 .8rem; }