/* ============================================================================
   Care Roster: the free on-call schedule maker (one page only).
   Loaded AFTER landing.css and built from its tokens and components: the form
   card is the signup card's surface, the privacy note is .phi-banner, the
   pattern cards are .lp-value. The only colours that are not landing.css
   tokens are the six person colours, which are the app's own on-call calendar
   palette (web/app/js/oncall.js, .oc-cal-c0 to .oc-cal-c5), so a printout
   looks like the calendar inside Care Roster. Same slot order: person N gets
   slot N mod 6.
   Print: one month per landscape letter page, colours kept.
   ============================================================================ */

.ot-c0 { --ot-bg: #DBEAFE; --ot-ink: #1E40AF; }
.ot-c1 { --ot-bg: #D1FAE5; --ot-ink: #065F46; }
.ot-c2 { --ot-bg: #FEF3C7; --ot-ink: #92400E; }
.ot-c3 { --ot-bg: #FCE7F3; --ot-ink: #9D174D; }
.ot-c4 { --ot-bg: #EDE9FE; --ot-ink: #5B21B6; }
.ot-c5 { --ot-bg: #E5E7EB; --ot-ink: #374151; }

.ot-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The hero is short here: the tool right below is the point of the page. */
.ot-hero.hero--lp { padding-bottom: 2.4rem; }
.ot-hero .hero-sub { margin-bottom: 0; }
.ot-section { padding-top: 2.6rem; }

.ot-tool {
  display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: 1.6rem; align-items: start;
}

/* ---- the form ------------------------------------------------------------- */
.ot-form {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border); border-top: 4px solid var(--vc-primary);
  border-radius: 18px; box-shadow: var(--vc-shadow);
  padding: 1.3rem 1.3rem 1.05rem;
  min-width: 0;
}
.ot-form-title { font-size: 1.32rem; margin: 0 0 1rem; }
.ot-field { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.ot-field > label:not(.ot-mode), .ot-label, .ot-field > legend {
  display: block; padding: 0; margin-bottom: .35rem;
  font-weight: 600; font-size: .92rem; color: var(--vc-text);
}
.ot-opt { font-weight: 500; color: var(--vc-text-soft); }
.ot-hint { margin: .3rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--vc-text-soft); }
.ot-hint.is-warn { color: var(--vc-danger); font-weight: 600; }

.ot-form input[type="text"], .ot-form input[type="date"], .ot-form input[type="number"],
.ot-form select, .ot-form textarea {
  display: block; width: 100%; min-height: 2.75rem;
  font: inherit; font-size: 1rem; color: var(--vc-text);
  background-color: #fff;
  border: 1.5px solid var(--vc-border); border-radius: var(--vc-radius-sm);
  padding: .5rem .7rem;
  transition: border-color .12s, box-shadow .12s;
}
.ot-form textarea { min-height: 9.2rem; resize: vertical; line-height: 1.5; }
.ot-form select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B5870' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px 14px;
}
.ot-form input:focus, .ot-form select:focus, .ot-form textarea:focus {
  outline: 3px solid rgba(87, 74, 181, .30); outline-offset: 1px;
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 5px rgba(87, 74, 181, .08);
}
.ot-form ::placeholder { color: #8C8AA0; opacity: 1; }

.ot-inline { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--vc-text-soft); font-weight: 600; font-size: .92rem; }
.ot-inline[hidden] { display: none; }
.ot-form .ot-inline input[type="number"] { width: 5.4rem; flex: none; }
.ot-inline--times, .ot-inline--month { margin-top: 0; }
.ot-form .ot-inline--times select { flex: 1 1 0; min-width: 0; }
.ot-form .ot-inline--month select:first-child { flex: 1 1 auto; min-width: 0; }
.ot-form .ot-inline--month select:last-child { flex: 0 0 auto; width: 7.6rem; }

/* coverage choice: two option cards, like the rotation editor in the app */
.ot-modes { display: grid; gap: .5rem; }
.ot-mode {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .62rem .75rem;
  background: #fff; border: 1.5px solid var(--vc-border); border-radius: 12px;
  cursor: pointer; transition: border-color .12s, background-color .12s;
}
.ot-mode input { flex: none; width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; accent-color: var(--vc-primary); }
.ot-mode strong { display: block; font-size: .95rem; line-height: 1.3; }
.ot-mode small { display: block; font-size: .82rem; color: var(--vc-text-soft); line-height: 1.35; }
.ot-mode:hover { border-color: rgba(87, 74, 181, .45); }
.ot-mode:has(input:checked) { border-color: var(--vc-primary); background: var(--vc-primary-soft); }
.ot-mode:focus-within { outline: 3px solid rgba(87, 74, 181, .30); outline-offset: 1px; }

.ot-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.ot-dows button {
  min-height: 2.4rem; padding: 0;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--vc-text-soft);
  background: #fff; border: 1.5px solid var(--vc-border); border-radius: 9px; cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}
.ot-dows button:hover { border-color: rgba(87, 74, 181, .45); }
.ot-dows button[aria-pressed="true"] { background: var(--vc-primary-soft); border-color: var(--vc-primary); color: var(--vc-primary-dark); }

.ot-more { margin: .2rem 0 .9rem; padding-top: .8rem; border-top: 1px solid var(--vc-border); }
.ot-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  list-style: none; cursor: pointer;
  font-weight: 600; font-size: .92rem; color: var(--vc-primary-dark);
  padding: .2rem 0;
}
.ot-more summary::-webkit-details-marker { display: none; }
.ot-more .ot-chev { flex: none; color: var(--vc-text-soft); transition: transform .18s ease; }
.ot-more[open] .ot-chev { transform: rotate(180deg); }
.ot-more-body { padding-top: .8rem; }
.ot-more-body .ot-field:last-child { margin-bottom: 0; }

.ot-form-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--vc-border);
}
.ot-btn-sm { min-height: 2.5rem; padding: .45rem 1rem; font-size: .95rem; border-radius: 11px; }
.ot-linkbtn {
  padding: .35rem .15rem;
  font: inherit; font-weight: 600; color: var(--vc-text-soft);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ot-linkbtn:hover { color: var(--vc-primary-dark); }
.ot-status { margin: .55rem 0 0; font-size: .86rem; color: var(--vc-text-soft); }
.ot-status:empty { display: none; }
.ot-status .ot-linkbtn { padding: 0 .1rem; color: var(--vc-primary-dark); }

/* ---- the output ------------------------------------------------------------- */
.ot-out { min-width: 0; }
.ot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.ot-seg { display: inline-flex; padding: 3px; background: var(--vc-surface-muted); border: 1px solid var(--vc-border); border-radius: 12px; }
.ot-seg button {
  min-height: 2.3rem; padding: .35rem 1.05rem;
  font: inherit; font-weight: 600; font-size: .95rem; color: var(--vc-text-soft);
  background: none; border: 0; border-radius: 9px; cursor: pointer;
}
.ot-seg button[aria-pressed="true"] { background: #fff; color: var(--vc-primary-dark); box-shadow: 0 1px 2px rgba(28, 26, 46, .08), 0 2px 8px rgba(28, 26, 46, .06); }
.ot-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ot-actions [hidden] { display: none; }
.ot-empty {
  margin: 0 0 1rem; padding: .7rem 1rem;
  font-size: .95rem; color: var(--vc-text);
  background: var(--vc-primary-soft); border: 1px solid rgba(87, 74, 181, .22); border-radius: 12px;
}
.ot-empty .ot-linkbtn { padding: 0; color: var(--vc-primary-dark); }

.ot-sheets { display: grid; gap: 1.4rem; }
.ot-sheets[hidden] { display: none; }
.ot-sheet {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--vc-border); border-radius: 14px; box-shadow: var(--vc-shadow);
  padding: 1.2rem 1.25rem 1rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ot-sheet-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1.2rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--vc-text);
}
.ot-sheet-org { margin: 0 0 .1rem; font-size: .86rem; font-weight: 700; color: var(--vc-text-soft); overflow-wrap: anywhere; }
.ot-sheet-title, .ot-sheet-month {
  margin: 0; font-family: var(--vc-display); font-weight: 700;
  font-size: 1.32rem; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.ot-sheet-month { color: var(--vc-primary-dark); white-space: nowrap; }
.ot-sheet-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1.2rem; margin: .5rem 0 .45rem; font-size: .88rem; color: var(--vc-text-soft); }
.ot-sheet-meta p { margin: 0; }
.ot-sheet-phone { font-weight: 700; color: var(--vc-text); overflow-wrap: anywhere; }
.ot-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .65rem; padding: 0; }
/* each person once, in on-call order, as the same chip the calendar uses */
.ot-legend .ot-chip { display: inline-block; max-width: 100%; font-size: .8rem; padding: .14rem .5rem; }
.ot-legend .ot-chip + .ot-chip { margin-top: 0; }
/* the list's colour key: a dot in the person's ink */
.ot-sw { flex: none; width: .62rem; height: .62rem; border-radius: 50%; background: var(--ot-ink); }
.ot-sheet-foot { margin: .55rem 0 0; font-size: .75rem; color: var(--vc-text-soft); text-align: right; }

.ot-cal-wrap { flex: 1 1 auto; min-height: 0; }
.ot-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ot-cal th {
  padding: .3rem .4rem; text-align: left;
  font-size: .78rem; font-weight: 700; color: var(--vc-text-soft);
  background: var(--vc-surface-muted); border: 1px solid var(--vc-border);
}
.ot-cal abbr { text-decoration: none; }
.ot-cal td { height: 6.3rem; padding: .3rem .32rem .35rem; vertical-align: top; border: 1px solid var(--vc-border); }
.ot-cal td.is-out { background: var(--vc-bg); }
.ot-dnum { display: block; margin-bottom: .2rem; font-size: .8rem; font-weight: 700; line-height: 1.2; color: var(--vc-text-soft); }
.ot-chip {
  display: block; padding: .16rem .36rem; border-radius: 6px;
  font-size: .76rem; font-weight: 700; line-height: 1.28; overflow-wrap: anywhere;
  color: var(--ot-ink); background: var(--ot-bg);
}
.ot-chip + .ot-chip { margin-top: .22rem; }
.ot-t { font-weight: 600; white-space: nowrap; }
.ot-n-short, .ot-hand { display: none; }

.ot-list { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ot-list th { padding: .45rem .6rem; text-align: left; font-size: .8rem; font-weight: 700; color: var(--vc-text-soft); border-bottom: 2px solid var(--vc-border); }
.ot-list td { padding: .55rem .6rem; vertical-align: top; border-bottom: 1px solid var(--vc-border); }
.ot-list tr:last-child td { border-bottom: 0; }
.ot-list .ot-who { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; overflow-wrap: anywhere; }
.ot-list .ot-dates { white-space: nowrap; }
.ot-list .ot-off { color: var(--vc-text-soft); }
.ot-list-none { margin: .4rem 0 0; color: var(--vc-text-soft); }

/* the privacy note reuses .phi-banner */
.ot-privacy { max-width: 760px; margin: 1.8rem auto 0; font-size: .97rem; }
.ot-privacy p { margin: 0; color: var(--vc-text-soft); }

.ot-tip { margin: 1.8rem auto 0; text-align: center; max-width: 70ch; }
#patterns .lp-siblings { margin-top: 2rem; }

/* Big screens: the tool alone widens (the rest of the page keeps the 1160
   measure), the same move the hero makes, so the calendar cells have room
   for a full name. */
@media (min-width: 1280px) {
  .ot-section > .wrap { max-width: 1320px; }
  .ot-tool { grid-template-columns: 340px minmax(0, 1fr); gap: 1.8rem; }
}

/* ---- narrower screens ------------------------------------------------------- */
/* Stacked below 1180: side by side, the calendar column gets too narrow for a
   name. On a tablet the form then runs in two columns so the calendar is not
   pushed a whole screen down. */
@media (max-width: 1180px) {
  .ot-tool { grid-template-columns: 1fr; }
}
@media (min-width: 700px) and (max-width: 1180px) {
  .ot-form { columns: 2; column-gap: 2rem; }
  .ot-form > * { break-inside: avoid; }
  .ot-form-title, .ot-form-foot, .ot-status { column-span: all; }
  .ot-form-foot { margin-top: .2rem; }
}
@media (max-width: 699px) {
  .ot-form { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media screen and (max-width: 640px) {
  .ot-section { padding-top: 1.8rem; }
  .ot-form { padding: 1.1rem 1rem .95rem; }
  .ot-bar { gap: .6rem; }
  .ot-actions { flex: 1 1 auto; justify-content: flex-end; }
  .ot-sheet { padding: .9rem .6rem .75rem; border-radius: 12px; }
  .ot-sheet-title, .ot-sheet-month { font-size: 1.1rem; }
  .ot-sheet-meta { font-size: .82rem; }
  .ot-legend .ot-chip { font-size: .74rem; }
  .ot-cal th { padding: .25rem 0; text-align: center; font-size: .7rem; }
  .ot-cal td { height: 4.1rem; padding: .2rem .12rem; }
  .ot-dnum { text-align: center; font-size: .72rem; margin-bottom: .15rem; }
  .ot-chip { padding: .12rem .05rem; text-align: center; font-size: .7rem; border-radius: 5px; overflow-wrap: normal; }
  .ot-chip + .ot-chip { margin-top: .15rem; }
  /* The full name and time stay for screen readers; the cell shows initials
     and one small handoff time, and the legend above spells the names out. */
  .ot-n-full, .ot-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .ot-n-short { display: block; }
  .ot-hand { display: block; margin-top: .14rem; font-size: .62rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--vc-text-soft); white-space: nowrap; }
  .ot-sheet-foot { text-align: left; }
  /* the list stacks: dates over the person over the handoff */
  .ot-list thead { display: none; }
  .ot-list tr { display: grid; gap: .1rem; padding: .6rem .2rem; border-bottom: 1px solid var(--vc-border); }
  .ot-list tr:last-child { border-bottom: 0; }
  .ot-list td { display: block; padding: 0; border: 0; }
  .ot-list .ot-dates { white-space: normal; font-size: .86rem; color: var(--vc-text-soft); }
  .ot-list .ot-off { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-mode, .ot-dows button, .ot-more .ot-chev, .ot-form input, .ot-form select, .ot-form textarea { transition: none; }
}

/* ---- print: the sheets only, one month per landscape letter page ------------
   Every size on the sheet is multiplied by --ot-pf, a per-sheet print scale
   (1 = as designed). js/oncall-template-ui.js lays each month out with THIS
   block in a hidden iframe the width of the printable page, and sets --ot-pf
   to the largest value (0.5 to 1.25) at which the month fits one page:
   six-week months with long names shrink, roomy months print larger. It copies the rules from here at run time, so this block is the
   only copy: change the paper layout here and the fit follows. */
@media print {
  @page { size: letter landscape; margin: .4in; }
  html, body { background: #fff !important; }
  body { overflow: visible; }
  .skip-link, .site-head, .site-foot, main > :not(#maker),
  .ot-form, .ot-bar, .ot-empty, .ot-privacy, #maker noscript, .ot-fit-frame { display: none !important; }
  #maker { padding: 0; }
  #maker > .wrap { max-width: none; padding: 0; }
  .ot-tool, .ot-out, .ot-sheets { display: block; }
  .ot-sheet {
    border: 0; border-radius: 0; box-shadow: none; padding: 0;
    height: 7.6in; overflow: hidden;
    break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid;
  }
  .ot-sheet:last-child { break-after: auto; page-break-after: auto; }
  .ot-sheet-head { padding-bottom: calc(5pt * var(--ot-pf, 1)); }
  .ot-sheet-title, .ot-sheet-month { font-size: calc(17pt * var(--ot-pf, 1)); }
  .ot-sheet-org { font-size: calc(10pt * var(--ot-pf, 1)); }
  .ot-sheet-meta { font-size: calc(9.5pt * var(--ot-pf, 1)); margin: calc(5pt * var(--ot-pf, 1)) 0 calc(4pt * var(--ot-pf, 1)); }
  .ot-legend { gap: calc(3pt * var(--ot-pf, 1)); margin-bottom: calc(6pt * var(--ot-pf, 1)); }
  .ot-legend .ot-chip { font-size: calc(8.5pt * var(--ot-pf, 1)); padding: calc(1pt * var(--ot-pf, 1)) calc(4pt * var(--ot-pf, 1)); }
  .ot-sheet-foot { font-size: calc(7.5pt * var(--ot-pf, 1)); margin-top: calc(4pt * var(--ot-pf, 1)); }
  .ot-cal { height: 100%; }
  .ot-cal th { font-size: calc(8.5pt * var(--ot-pf, 1)); padding: calc(2pt * var(--ot-pf, 1)) calc(4pt * var(--ot-pf, 1)); }
  .ot-cal td { height: auto; padding: calc(2.5pt * var(--ot-pf, 1)) calc(3pt * var(--ot-pf, 1)); }
  .ot-cal .ot-dnum { font-size: calc(8.5pt * var(--ot-pf, 1)); margin-bottom: calc(1.5pt * var(--ot-pf, 1)); }
  .ot-cal .ot-chip { font-size: calc(8pt * var(--ot-pf, 1)); line-height: 1.2; padding: calc(1.2pt * var(--ot-pf, 1)) calc(3pt * var(--ot-pf, 1)); border-radius: 3pt; }
  .ot-cal .ot-chip + .ot-chip { margin-top: calc(2pt * var(--ot-pf, 1)); }
  /* the list may run longer than a page, so it is allowed to break */
  .ot-sheet--list { height: auto; overflow: visible; break-inside: auto; page-break-inside: auto; }
  .ot-list { font-size: 10pt; }
  .ot-list tr { break-inside: avoid; page-break-inside: avoid; }
}