/* Scheduling › Time off: calendar plus people (approved Oct 25, 2026, "A + C · Your pick"; design/time-off-mobile-brief.md) (CEO, Oct 25, 2026).
   Markup: js/timeoff-office.js. Tokens from the office visual system (office.css body.skin); the amber card is the Dashboard "Needs you" card. */
body.skin .tq { --tq-warn: #8A5A00; --tq-warn-soft: #FFF4E0; --tq-ok-soft: #E6F4EE; --tq-well: #F1F0EC; min-width: 0; }
body.skin .tq button { font: inherit; color: inherit; cursor: pointer; }
body.skin .tq-bad { color: var(--coral); font-weight: 700; } body.skin .tq-warn { color: var(--tq-warn); font-weight: 700; } body.skin .tq-ok { color: var(--ok); font-weight: 600; }
/* the Time off tab's count */
body.skin .tabs .tq-tb { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; box-sizing: border-box; border-radius: 999px; background: var(--coral); color: #fff; font: 700 12px/1 var(--f-ui); font-variant-numeric: tabular-nums; }

/* 1. the one card: what is waiting for you */
body.skin .tq-need { background: #FFF7E6; border-radius: 14px; box-shadow: inset 4px 0 0 #D9A23A; padding: 14px 14px 6px 18px; margin: 0 0 24px; }
body.skin .tq-need h2 { font: 700 16px/1.3 var(--f-ui); margin: 0 0 4px; color: var(--tq-warn); }
body.skin .tq-nr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(138, 90, 0, .15); cursor: pointer; }
body.skin .tq-need h2 + .tq-nr { border-top: 0; }
body.skin .tq-nr strong { display: block; font-size: 15px; font-weight: 700; }
body.skin .tq-ln { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
body.skin .tq-nr:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
body.skin .tq-pill { height: 34px; border-radius: 999px; border: 0; background: var(--surface); color: var(--teal) !important; font-weight: 700 !important; font-size: 14px !important; padding: 0 16px; white-space: nowrap; }
body.skin .tq-pill.solid { background: var(--teal); color: #fff !important; }
body.skin .tq-list .tq-pill { background: var(--tq-well); }
body.skin .tq-calm { display: flex; gap: 10px; align-items: center; margin: 0 0 20px; color: var(--ink-2); font-size: 14px; }
body.skin .tq-ck { width: 22px; height: 22px; border-radius: 50%; background: var(--tq-ok-soft); color: var(--ok); display: grid; place-items: center; flex: none; }
body.skin .tq-ck .i { width: 12px; height: 12px; }

/* section heads */
body.skin .tq-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; min-height: 34px; }
body.skin .tq-sh h2 { font: 700 20px/1.25 var(--f-ui); margin: 0; }
body.skin .tq-nav { display: flex; gap: 4px; }
body.skin .tq-nav button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--tq-well); color: var(--ink-2); display: grid; place-items: center; }
body.skin .tq-nav button[disabled] { opacity: .4; cursor: default; }
body.skin .tq-nav .i { width: 14px; height: 14px; }

/* 2. the calendar */
body.skin .tq-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
body.skin .tq-dh { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 4px 0; }
body.skin .tq-dh b { font-weight: 700; } body.skin .tq-dh i { display: none; font-style: normal; }
body.skin .tq-d { min-height: 58px; min-width: 0; border-radius: 10px; padding: 5px 3px 9px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; position: relative; }
body.skin .tq-d > b { font-size: 14px; font-weight: 600; min-width: 26px; padding: 0 4px; white-space: nowrap; height: 26px; border-radius: 13px; display: grid; place-items: center; }
body.skin .tq-d.past > b { color: var(--ink-3); }
body.skin .tq-d.today > b { background: var(--ink); color: #fff; }
body.skin .tq-d.sel { background: var(--teal-soft); }
body.skin .tq-d:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
body.skin .tq-dots { display: flex; gap: 2px; }
body.skin .tq-dots i { width: 8px; height: 8px; border-radius: 50%; }
body.skin .tq-dots i.w { background: none; box-shadow: inset 0 0 0 1.5px var(--tq-warn); }
body.skin .tq-nm, body.skin .tq-more { display: none; }
body.skin .tq-d em { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; border-radius: 2px; background: var(--coral); font-style: normal; }
body.skin .tq-d em span { display: none; }
body.skin .tq-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
body.skin .tq-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
body.skin .tq-key i.w { box-shadow: inset 0 0 0 1.5px var(--tq-warn); }
body.skin .tq-key i.bar { background: var(--coral); border-radius: 2px; height: 3px; width: 14px; vertical-align: 2px; }
body.skin .tq-key i.now { background: var(--ink); }

/* 3. people with time off coming up */
body.skin .tq-list { margin: 24px 0 0; min-width: 0; }
body.skin .tq-ppl { list-style: none; margin: 0; padding: 0; }
body.skin .tq-ppl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
body.skin .tq-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; flex: none; }
body.skin .tq-pm { min-width: 0; }
body.skin .tq-pm strong { display: block; margin: 2px 0 6px; }
body.skin .tq-name { border: 0; background: none; padding: 0; font-size: 16px !important; font-weight: 700 !important; text-align: left; }
body.skin .tq-name:hover { text-decoration: underline; }
body.skin .tq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.skin .tq-chip { height: 30px; border-radius: 999px; border: 0; background: var(--tq-ok-soft); color: var(--ok) !important; font-weight: 700 !important; font-size: 13px !important; padding: 0 12px; white-space: nowrap; }
body.skin .tq-chip.w { background: var(--tq-warn-soft); color: var(--tq-warn) !important; }
body.skin .tq-chip.open { background: var(--coral-soft); color: var(--coral) !important; }
body.skin .tq-chip.on { box-shadow: inset 0 0 0 2px currentColor; }
body.skin .tq-len { font-size: 13px; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
body.skin .tq-foot { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }

/* 5. past requests */
body.skin .tq-pastl { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 14px 0; margin-top: 20px; font-size: 15px !important; font-weight: 600 !important; color: var(--teal) !important; }
body.skin .tq-pastl span { color: var(--ink-3); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
body.skin .tq-pastl .i { width: 12px; height: 12px; }
body.skin .tq-past { margin: 0 0 16px; }

/* the detail sheet: a bottom sheet on a phone, a 420px panel at the right on a computer */
body.skin .layer.tq-layer .layer-panel { padding-top: 22px; }
body.skin .tq-sheet h2 { font: 500 26px/1.2 var(--f-display); margin: 0 40px 2px 0; }
body.skin .tq-sub { color: var(--ink-3); margin: 0 0 16px; }
body.skin .tq-kv { list-style: none; margin: 0 0 16px; padding: 0; }
body.skin .tq-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
body.skin .tq-kv li span:first-child { color: var(--ink-3); flex: none; }
body.skin .tq-kv li span:last-child { text-align: right; min-width: 0; }
body.skin .tq-vis { margin: 0 0 16px; }
body.skin .tq-vis p { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
body.skin .tq-vis div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
body.skin .tq-vis div span:last-child { text-align: right; }
body.skin .tq-say { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
body.skin .tq-ai { background: var(--tint); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
body.skin .tq-fld { display: block; margin: 0 0 14px; }
body.skin .tq-fld span { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
body.skin .tq-fld input { width: 100%; box-sizing: border-box; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; background: var(--surface); color: var(--ink); }
body.skin .tq-btns { display: flex; flex-direction: column; gap: 10px; }
body.skin .tq-btns .btn { width: 100%; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; justify-content: center; }
body.skin .tq-btns .btn.ghost { min-height: 36px; color: var(--ink-3); }
body.skin .tq-btns .btn.tq-danger { color: var(--coral); }
body.skin .tq-fine { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }

/* computer: day names, names in the cells, list beside the calendar, panel at the right */
@media (min-width: 720px) {
  body.skin .tq-dh b { display: none; } body.skin .tq-dh i { display: inline; }
  body.skin .tq-d { min-height: 96px; align-items: stretch; padding: 6px; }
  body.skin .tq-d > b { width: 26px; height: 26px; font-size: 13px; padding: 0; }
  body.skin .tq-d:not(.today) > b { width: auto; justify-content: start; }
  body.skin .tq-d.sel { background: none; box-shadow: inset 0 0 0 2px var(--teal); }
  body.skin .tq-d:hover:not(.sel) { background: var(--tint); }
  body.skin .tq-dots { display: none; }
  body.skin .tq-nm { display: block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 6px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.skin .tq-nm.w { background: var(--tq-warn-soft); color: var(--tq-warn); }
  body.skin .tq-more { display: block; font-size: 11px; color: var(--ink-3); text-align: left; padding: 0 6px; }
  body.skin .tq-d em { position: static; transform: none; width: auto; height: auto; background: none; color: var(--coral); font-size: 11px; font-weight: 700; text-align: left; padding: 0 2px; }
  body.skin .tq-d em span { display: inline; }
  body.skin .layer.tq-layer { align-items: stretch; justify-content: flex-end; padding: 0; }
  body.skin .layer.tq-layer .layer-panel { max-width: 420px; height: 100%; max-height: none; border-radius: 0; padding: 28px; transform: translateX(24px); }
  body.skin .layer.tq-layer.on .layer-panel { transform: none; }
}
@media (min-width: 1100px) {
  body.skin .tq-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  body.skin .tq-list { margin: 0; }
}
/* phone: the sheet sits above the tab bar's safe area and the page keeps clear of it */
@media (max-width: 719px) {
  body.skin .tq-sh h2 { font-size: 18px; }
  body.skin .layer.tq-layer .layer-panel { max-height: 88%; border-radius: 20px 20px 0 0; }
}

/* ================= Time off refresh (approved by the CEO Oct 29, 2026; design/time-off-refresh-brief.md) =================
   The waiting block is the one deep block, in deep amber (never the live-visit teal). Calendar days have no boxes, names sit on the days.
   Coming up is plain rows. A phone shows Who's out for the next 2 weeks in place of the calendar. */
body.skin .tq2 .tq-deep { position: relative; overflow: hidden; background: #4A2F0E; color: #fff; border-radius: 18px; box-shadow: none; padding: 18px 18px 4px; margin: 0 0 28px; }
body.skin .tq2 .tq-deep::after { content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(242, 196, 109, .08); pointer-events: none; }
body.skin .tq2 .tq-deep > * { position: relative; z-index: 1; }
body.skin .tq2 .tq-wl { margin: 0; font: 700 12px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #F2C46D; }
body.skin .tq2 .tq-deep h2 { font: 500 24px/1.15 var(--f-display, 'Newsreader', Georgia, serif); color: #fff; margin: 4px 0 12px; letter-spacing: -.01em; }
body.skin .tq2 .tq-deep .tq-nr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12); background: none; cursor: pointer; }
body.skin .tq2 .tq-deep h2 + .tq-nr { border-top: 1px solid rgba(255, 255, 255, .12); }
body.skin .tq2 .tq-deep .tq-nr .av { background: rgba(255, 255, 255, .14); color: #fff; }
body.skin .tq2 .tq-nt { flex: 1; min-width: 0; }
body.skin .tq2 .tq-nt strong { display: block; font-size: 17px; font-weight: 700; color: #fff; }
body.skin .tq2 .tq-deep .tq-ln { display: block; font-size: 14px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
body.skin .tq2 .tq-ln em { font-style: normal; font-weight: 700; color: #F2C46D; }
body.skin .tq2 .tq-ln em.bad { color: #FFB3A3; }
body.skin .tq2 .tq-wbs { display: flex; gap: 8px; width: 100%; }
body.skin .tq2 .tq-wb { flex: 1; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; font: 700 14px/1 var(--f-ui); white-space: nowrap; cursor: pointer; }
body.skin .tq2 .tq-wb.pri { background: #F2C46D; border-color: #F2C46D; color: #3A2405; }
body.skin .tq2 .tq-wb:focus-visible, body.skin .tq2 .tq-nr:focus-visible { outline: 2px solid #F2C46D; outline-offset: 2px; }
body.skin .tq2 .tq-done { margin: 0 0 4px; } body.skin .tq2 .tq-deep .tq-done, body.skin .tq2 .tq-deep .tq-done * { color: rgba(255, 255, 255, .72); }
body.skin .tq2 .tq-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
body.skin .tq2 .tq-sh h2 { font: 700 20px/1.25 var(--f-ui); margin: 0; color: var(--ink); }
body.skin .tq2 .tq-sh > span:not(.tq-nav) { font-size: 14px; color: var(--ink-3); }
body.skin .tq2 .tq-nav { display: flex; gap: 6px; }
body.skin .tq2 .tq-nav button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--well, #F2F1ED); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
body.skin .tq2 .tq-nav button:disabled { opacity: .4; cursor: default; }
/* the calendar: no boxes, a hairline under each week, today a deep teal circle, names as small tags that wrap */
body.skin .tq2 .tq-cal2 { gap: 0; }
body.skin .tq2 .tq-cal2 .tq-dh { font: 700 11px/1 var(--f-ui); letter-spacing: .09em; color: var(--ink-3); padding: 0 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
body.skin .tq2 .tq-cal2 .tq-d { min-height: 92px; border-radius: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; padding: 8px 6px; align-items: stretch; justify-content: flex-start; gap: 4px; text-align: left; }
body.skin .tq2 .tq-cal2 .tq-d > b { width: auto; min-width: 0; height: auto; padding: 0; justify-content: start; display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); background: none; }
body.skin .tq2 .tq-cal2 .tq-d.past > b { color: #B3B9B7; }
body.skin .tq2 .tq-cal2 .tq-d.today > b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0F3A36; color: #fff; margin: -4px 0 0 -4px; }
body.skin .tq2 .tq-cal2 .tq-d.sel { background: var(--faint, #F8F7F4); }
body.skin .tq2 .tq-cal2 .tq-d:hover { background: var(--faint, #F8F7F4); }
body.skin .tq2 .tq-tag { display: block; font: 700 12px/1.25 var(--f-ui); border-radius: 6px; padding: 3px 7px; background: #E8F0EE; color: #0F3A36; overflow-wrap: anywhere; white-space: normal; }
body.skin .tq2 .tq-tag.w { background: transparent; border: 1.5px dashed #D9A23A; color: #8A5A00; padding: 2px 6px; }
body.skin .tq2 .tq-tag.open { background: #FDECE9; color: var(--coral); }
body.skin .tq2 .tq-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-top: 12px; }
body.skin .tq2 .tq-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: #E8F0EE; }
body.skin .tq2 .tq-key i.w { background: none; border: 1.5px dashed #D9A23A; } body.skin .tq2 .tq-key i.open { background: #FDECE9; }
/* plain rows: Who's out and Coming up */
body.skin .tq2 .tq-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
body.skin .tq2 .tq-rows > li { border-bottom: 1px solid var(--line); }
body.skin .tq2 .tq-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
body.skin .tq2 button.tq-row { cursor: pointer; }
body.skin .tq2 .tq-rt { flex: 1; min-width: 0; }
body.skin .tq2 .tq-rt b { display: block; font-size: 15px; font-weight: 700; }
body.skin .tq2 .tq-rt small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
body.skin .tq2 .tq-rt .w, body.skin .tq2 .tq-dt.w { color: #8A5A00; font-weight: 700; }
body.skin .tq2 .tq-rt .o { color: var(--coral); font-weight: 700; }
body.skin .tq2 .tq-dt { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
body.skin .tq2 .tq-dt:hover, body.skin .tq2 .tq-name:hover { text-decoration: underline; }
body.skin .tq2 .tq-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
body.skin .tq2 .tq-len { font-size: 13px; color: var(--ink-3); flex: none; }
body.skin .tq2 .tq-lnk { display: inline-block; margin-top: 12px; border: 0; background: none; padding: 0; font: 700 14px/1.4 var(--f-ui); color: #0F3A36; cursor: pointer; }
body.skin .tq2 .tq-foot { color: var(--ink-3); font-size: 14px; }
body.skin .tq2 .tq-split > section { margin: 0 0 28px; min-width: 0; }
/* phone: Who's out instead of the calendar (See calendar opens it) */
body.skin .tq2 .tq-calw { display: none; }
body.skin .tq2.showcal .tq-calw { display: block; }
body.skin .tq2 .tq-cal2 .tq-d { min-height: 64px; padding: 6px 2px; }
body.skin .tq2 .tq-cal2 .tq-tag { font-size: 10px; padding: 2px 3px; }
@media (min-width: 720px) {
  body.skin .tq2 .tq-deep { padding: 24px 32px 8px; }
  body.skin .tq2 .tq-deep h2 { font-size: 30px; }
  body.skin .tq2 .tq-deep .tq-nr { flex-wrap: nowrap; gap: 16px; }
  body.skin .tq2 .tq-wbs { width: auto; flex: none; }
  body.skin .tq2 .tq-wb { flex: none; height: 40px; }
  body.skin .tq2 .tq-calw { display: block; }
  body.skin .tq2 .tq-who { display: none; }
  body.skin .tq2 .tq-cal2 .tq-d { min-height: 92px; padding: 8px 6px; }
  body.skin .tq2 .tq-cal2 .tq-tag { font-size: 12px; padding: 3px 7px; }
  body.skin .tq2 .tq-cal2 .tq-tag.w { padding: 2px 6px; }
  body.skin .tq2 .tq-sh h2 { font-size: 22px; }
}
@media (min-width: 1100px) { body.skin .tq2 .tq-split { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; margin-top: 12px; } }
body.skin .tq2 .tq-wb { text-align: center; justify-content: center; }