/* ══════════ the schedules ══════════
   The tab at /internal#/schedules. Everything here is drawn by
   schedules.js and themed off the console's own tokens, so it follows
   light, dark and fomo without knowing which one is on. */

/* ---------- what the board is, said once ---------- */
.sc-rule{display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 13px;
  border-radius:var(--r-m);border:1px solid var(--violet-soft);
  background:var(--violet-soft);color:var(--text);font-size:12.5px;line-height:1.45}
.sc-rule svg{width:15px;height:15px;flex:none;color:var(--violet-hi);margin-top:1px}
.sc-rule b{font-weight:600}

.sc-ctl{display:flex;align-items:center;gap:8px;margin-left:auto}
.sc-need{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted-2)}
.sc-need select{height:24px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);font:inherit;font-size:11.5px;padding:0 4px}
.sc-need select:disabled{opacity:.5}

.sc-none{padding:12px 2px;color:var(--muted);font-size:12.5px;line-height:1.5}
.sc-none b{color:var(--text);font-weight:600}
.linkish{color:var(--violet-hi);text-decoration:underline;font:inherit}

/* ---------- the windows worth putting to the group ---------- */
#sc-best{display:grid;gap:8px}
.sc-win{display:grid;gap:7px;padding:10px 12px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface)}
.sc-win.all{border-color:var(--violet);background:var(--violet-soft)}
.sc-win-when{display:flex;align-items:baseline;gap:9px}
.sc-win-when b{font-size:13.5px;font-weight:600}
.sc-win-when span{font-family:var(--mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sc-win-who{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px}
.sc-win-who .av{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;color:#0C0C0E;flex:none;margin-right:-6px}
.sc-win-who i{font-style:normal;font-size:12px;color:var(--muted)}
.sc-win-tail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px}
.sc-win-len{font-family:var(--mono);color:var(--muted-2)}
.sc-win-out{color:var(--muted-2)}
.sc-win-ok{color:var(--good)}

/* ---------- everybody's week, over each other ---------- */
.sc-gridwrap{overflow-x:auto}
.sc-grid{display:flex;gap:3px;min-width:340px;align-items:flex-start}
.sc-hcol{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sc-htimes{flex:none;width:52px}
.sc-hhead{height:18px;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.sc-htime{height:13px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;
  font-family:var(--mono);font-size:9.5px;color:var(--muted-2);white-space:nowrap}

/* The cell is the count, read as weight rather than as a number: --fill is
   the share of the people on record who are free in that half hour.

   The weight is squared rather than straight. Four people is five possible
   values, and spread evenly across them the hour three of them can make
   looks very nearly like the hour all four can — which is the one
   difference on this grid anybody is actually looking for. Squaring holds
   the darkest end back for the hours that are genuinely clear.

   And an hour short of what the box above asks for is dimmed further still,
   so "where can I get four of them" is answered by the shape of the grid
   rather than by counting cells. */
.sc-cell{height:13px;border-radius:2px;background:var(--violet);
  opacity:calc(.05 + (var(--fill) * var(--fill) * .95));transition:opacity .1s}
.sc-cell:not(.on){opacity:calc(.04 + (var(--fill) * .22))}
.sc-cell.all{border-radius:3px}

/* ---------- which week ----------
   Only ever on screen when somebody's week rotates; with nothing
   alternating, every week is the same week and this would be a control
   that changes nothing. */
.sc-weeks{display:flex;gap:6px;flex-wrap:wrap}
.sc-wk{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 11px;
  border-radius:var(--r-m);border:1px solid var(--line-2);color:var(--muted);
  transition:background .12s,color .12s,border-color .12s}
.sc-wk b{font-size:12.5px;font-weight:500}
.sc-wk i{font-style:normal;font-size:10.5px;color:var(--muted-2);font-family:var(--mono)}
.sc-wk:hover{color:var(--text);background:var(--raise)}
.sc-wk.on{color:var(--text);border-color:var(--violet);background:var(--violet-soft);font-weight:500}

/* A block that is on the timetable but not on this week: there, so the
   week still reads as the same week, but plainly not happening. */
.sc-wblock.off{opacity:.3}

/* ---------- my week ---------- */
.sc-whobar{display:flex;flex-wrap:wrap;gap:6px}
.sc-me{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 5px;
  border-radius:99px;border:1px solid var(--line-2);color:var(--muted);font-size:12.5px;
  transition:background .12s,color .12s,border-color .12s}
.sc-me .av{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;color:#0C0C0E;flex:none}
.sc-me:hover{color:var(--text);background:var(--raise)}
.sc-me.on{color:var(--text);border-color:var(--violet);background:var(--violet-soft);font-weight:500}
.sc-dot{width:5px;height:5px;border-radius:50%;background:var(--warn);flex:none}

.sc-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
.sc-form label{display:grid;gap:4px;font-size:11.5px;color:var(--muted-2)}
/* what it is and what kind sit on one line; the days get their own */
.sc-f-label{min-width:0}
.sc-form input,.sc-form select{height:30px;padding:0 9px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  font:inherit;font-size:13px}
.sc-form input:focus,.sc-form select:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px var(--violet-soft)}
.sc-days{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.sc-day{height:28px;min-width:42px;padding:0 9px;border-radius:7px;border:1px solid var(--line-2);
  color:var(--muted);font-size:12px;transition:background .12s,color .12s,border-color .12s}
.sc-day:hover{color:var(--text);background:var(--raise)}
.sc-day.on{color:var(--text);border-color:var(--violet);background:var(--violet-soft);font-weight:500}
.sc-day-set{margin-left:4px;color:var(--muted-2);border-style:dashed}
.sc-form-foot{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sc-form-foot .push{flex:1}
#sc-form-hint{color:var(--bad)}

/* ---------- a term, brought in at once ---------- */
.sc-import{display:grid;gap:9px;justify-items:start}
.sc-import-say{margin:0;line-height:1.5}
#sc-pick-l{cursor:pointer}
.sc-paste{width:100%;font-size:12.5px}
.sc-paste summary{cursor:pointer;color:var(--muted);padding:4px 0}
.sc-paste summary:hover{color:var(--text)}
.sc-paste textarea{width:100%;margin-top:7px;resize:vertical;min-height:62px;padding:9px 11px;
  border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--surface);
  color:var(--text);font-family:var(--mono);font-size:12px;line-height:1.6}
.sc-paste textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.sc-paste-foot{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.sc-paste-foot .push{flex:1}
#sc-paste-hint{line-height:1.45}

/* A file being dragged over the panel says so, or nobody lets go of it. */
#sc-mine.sc-dragging{outline:2px dashed var(--violet);outline-offset:-8px;border-radius:var(--r-l)}

/* ---------- the week, laid out ----------
   Each day is a column and each block is drawn where it falls in it, so a
   Tuesday of three classes back to back looks like one. The gaps between
   them are drawn too, faintly, because a two-hour hole on Wednesday is the
   most useful thing on the page and nothing else on it says so. */
.sc-weekwrap{overflow-x:auto}
.sc-week{display:flex;gap:4px;min-width:420px;align-items:stretch}
.sc-wcol{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.sc-wtimes{flex:none;width:44px}
.sc-whead{height:18px;display:flex;align-items:center;justify-content:center;font-size:10.5px;
  font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.sc-whead.off{opacity:.45}
.sc-wbody{position:relative;height:300px;border-radius:var(--r-m);background:var(--surface)}
.sc-wtimes .sc-wbody{background:none}
.sc-wtime{position:absolute;right:6px;transform:translateY(-50%);font-family:var(--mono);
  font-size:9.5px;color:var(--muted-2);white-space:nowrap}
.sc-wline{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.65}

.sc-wblock{position:absolute;left:2px;right:2px;border-radius:5px;padding:3px 5px;overflow:hidden;
  display:flex;flex-direction:column;gap:1px;color:#0C0C0E;min-height:13px}
.sc-wblock b{font-size:10px;font-weight:600;line-height:1.15;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sc-wblock i{font-style:normal;font-size:9px;opacity:.72;font-family:var(--mono)}
.sc-wblock.tight{padding:1px 5px}
.sc-wblock.tight i{display:none}

.sc-wgap{position:absolute;left:2px;right:2px;border-radius:5px;
  border:1px dashed var(--line-2);display:grid;place-items:center;overflow:hidden}
.sc-wgap i{font-style:normal;font-size:9px;color:var(--muted-2);font-family:var(--mono);
  white-space:nowrap}

/* ---------- breaks ---------- */
.sc-away{border-color:var(--t-amber-bd);background:var(--t-amber-bg);color:var(--text);display:block}
.sc-away b{font-weight:600}
.sc-row.now .sc-row-what b::after{content:'';display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--good);margin-left:6px;vertical-align:middle}

/* ---------- what is on record ---------- */
.sc-rows{display:grid;gap:1px}
.sc-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.sc-row:last-child{border-bottom:0}
.sc-swatch{width:3px;height:26px;border-radius:99px;flex:none}
.sc-row-what{display:grid;gap:2px;min-width:0;flex:1}
.sc-row-what b{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-row-sub{font-size:11px;color:var(--muted-2)}
.sc-row-when{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sc-x{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;
  color:var(--muted-2);opacity:0;transition:opacity .12s,background .12s,color .12s}
.sc-x svg{width:13px;height:13px}
.sc-row:hover .sc-x,.sc-x:focus-visible{opacity:1}
.sc-x:hover{background:var(--t-red-bg);color:var(--bad)}

/* ---------- everyone, a week each ---------- */
#sc-people{display:grid;gap:12px}
.sc-person .panel-h .av{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:600;color:#0C0C0E;flex:none}
.sc-pstrip{display:flex;gap:3px;overflow-x:auto}
.sc-pcol{display:flex;flex-direction:column;gap:2px;flex:1;min-width:24px}
.sc-phead{height:16px;display:flex;align-items:center;justify-content:center;font-size:10px;
  color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.sc-pcell{height:7px;border-radius:2px;background:var(--raise)}
.sc-pcell.busy{opacity:.85}
.sc-ptimes{flex:none;width:42px}
.sc-ptime{height:7px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;
  font-family:var(--mono);font-size:8.5px;color:var(--muted-2);white-space:nowrap;line-height:1}

@media (max-width:640px){
  .sc-form{grid-template-columns:1fr}
  .sc-htimes{width:44px}
}

/* ---------- availability explorer ---------- */
#sc-board .panel-h{flex-wrap:wrap;row-gap:7px}
#sc-best{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#sc-best>.sc-none{grid-column:1/-1}
.sc-win{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:14px;text-align:left;color:var(--text);font:inherit;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-m);transition:border-color .12s,background .12s}
.sc-win:hover,.sc-win.selected{border-color:var(--violet);background:var(--violet-soft)}
.sc-win-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sc-win-top>b{font-size:12px;font-weight:600;color:var(--muted)}
.sc-win-len{font-size:10px;padding:3px 6px;border-radius:5px;background:var(--raise);white-space:nowrap}
.sc-win-time{font-size:18px;line-height:1.3;letter-spacing:-.035em;font-weight:600;font-variant-numeric:tabular-nums}
.sc-win-count{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:10px;color:var(--muted-2)}
.sc-win-count>b{font-size:11px;color:var(--good);font-weight:600}
.sc-win-names{font-size:11.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.sc-win-more{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:9px;
  border-top:1px solid var(--line);font-size:10.5px;color:var(--violet-hi)}
.sc-explorer-controls{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.sc-explorer-top,.sc-explorer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sc-modes{display:flex;padding:3px;background:var(--raise);border:1px solid var(--line);border-radius:9px;gap:3px}
.sc-mode{padding:8px 12px;font:inherit;font-size:12px;font-weight:500;color:var(--muted);border-radius:6px;white-space:nowrap}
.sc-mode.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #00000012}
.sc-date-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sc-date-nav label{display:flex;align-items:center;gap:7px;color:var(--muted-2);font-size:11px}
.sc-date-nav input,.sc-person-pick select{height:32px;padding:0 7px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface);color:var(--text);font:inherit;font-size:12px;min-width:0;color-scheme:normal}
.sc-date-nav input{width:137px}
.sc-date-nav .mini{min-width:30px;min-height:32px}
.sc-person-pick{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);min-width:0;max-width:100%}
.sc-person-pick select{max-width:230px}
.sc-day-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;flex:1;max-width:560px;min-width:280px}
.sc-explore-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 7px;color:var(--muted);
  border:1px solid transparent;border-radius:7px;font:inherit}
.sc-explore-day>b{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.sc-explore-day>span{font-size:15px;font-variant-numeric:tabular-nums}
.sc-explore-day:hover{background:var(--raise)}
.sc-explore-day.on{border-color:var(--violet);background:var(--violet-soft);color:var(--text)}
.sc-explore-body{display:block;min-width:0;width:100%}
.sc-day-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sc-day-heading h3,.sc-detail-heading h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.02em}
.sc-day-heading>span{color:var(--muted-2);font-size:11px;line-height:1.5}
.sc-day-ranges{display:grid;gap:6px}
.sc-range-row{width:100%;display:grid;grid-template-columns:155px 112px minmax(0,1fr) 14px;align-items:center;gap:12px;
  padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);text-align:left;font:inherit}
.sc-range-row:hover,.sc-range-row.selected{border-color:var(--violet);background:var(--violet-soft)}
.sc-range-time{display:grid;gap:4px;font-size:12px;font-variant-numeric:tabular-nums;font-weight:500}
.sc-range-time small{font-size:10px;color:var(--muted-2);font-weight:400}
.sc-range-status{justify-self:start;font-size:11px;border-radius:5px;padding:5px 7px;background:var(--raise);white-space:nowrap}
.sc-range-status.free{background:var(--t-green-bg);color:var(--good)}
.sc-range-status.busy{color:var(--muted)}
.sc-range-status.missing{color:var(--warn)}
.sc-range-names{font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.sc-person-blocks{display:grid;gap:6px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.sc-person-blocks>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.sc-person-blocks b{font-weight:500;color:var(--text)}
.sc-person-blocks>div>span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.sc-slot-detail{margin-top:16px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);overflow:hidden;scroll-margin:16px}
.sc-detail-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line);background:var(--raise)}
.sc-eyebrow{display:block;font-size:10px;color:var(--muted-2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.055em}
.sc-detail-date{font-size:11px;color:var(--muted);white-space:nowrap}
.sc-detail-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sc-detail-columns>div{min-width:0;padding:14px;border-right:1px solid var(--line)}
.sc-detail-columns>div:last-child{border-right:0}
.sc-detail-columns h4{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;margin:0 0 12px;color:var(--muted)}
.sc-detail-columns h4>b{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}
.sc-status-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted-2)}
.sc-status-dot.free{background:var(--good)}
.sc-status-dot.busy{background:var(--violet)}
.sc-status-dot.missing{background:var(--warn)}
.sc-detail-person{width:100%;display:flex;align-items:flex-start;gap:8px;text-align:left;padding:8px 4px;border-radius:6px;font:inherit;color:var(--text)}
.sc-detail-person:hover{background:var(--raise)}
.sc-detail-person .av{width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:10px;color:#0C0C0E}
.sc-detail-person>span:nth-child(2){display:grid;gap:4px;min-width:0;flex:1}
.sc-detail-person b{font-size:12px;font-weight:500;overflow-wrap:anywhere}
.sc-detail-person small{font-size:10.5px;line-height:1.5;color:var(--muted-2);overflow-wrap:anywhere}
.sc-person-arrow{font-size:11px;color:var(--muted-2)}
.sc-detail-empty{font-size:11px;line-height:1.5;color:var(--muted-2);margin:0}
.sc-select-hint,.sc-heat-guide{font-size:11px;line-height:1.6;color:var(--muted-2);margin:12px 0 0}
.sc-heat-guide{margin:0 0 12px}
.sc-break-caveat{margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--warn)}
.sc-explore-body .sc-grid{min-width:480px;gap:5px}
.sc-explore-body .sc-hcol{gap:3px}
.sc-explore-body .sc-hhead{height:25px}
.sc-explore-body button.sc-hhead{border-radius:5px}
.sc-explore-body button.sc-hhead:hover{background:var(--raise);color:var(--text)}
.sc-explore-body .sc-htime{height:22px;font-size:9px}
.sc-explore-body .sc-cell{height:22px;min-height:22px;padding:0;border:1px solid var(--line);border-radius:4px;opacity:1;
  background:color-mix(in srgb,var(--violet) calc(5% + var(--fill) * 35%),var(--surface));
  color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1}
.sc-explore-body .sc-cell.on{border-color:color-mix(in srgb,var(--violet) 55%,var(--line));color:var(--text)}
.sc-explore-body .sc-cell:hover,.sc-explore-body .sc-cell.selected{outline:2px solid var(--violet-hi);outline-offset:0;color:var(--text)}
#sc-board button:focus-visible,#sc-board input:focus-visible,#sc-board select:focus-visible,.sc-slot-detail:focus-visible{
  outline:2px solid var(--violet-hi);outline-offset:3px}
@media(max-width:1100px){
  #sc-best{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-detail-columns{grid-template-columns:1fr}
  .sc-detail-columns>div{border-right:0;border-bottom:1px solid var(--line)}
  .sc-detail-columns>div:last-child{border-bottom:0}
}
@media(max-width:640px){
  #sc-best{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:12px;padding-bottom:14px}
  #sc-best-note:not(:empty)::after{content:' · Swipe to browse →';color:var(--violet-hi)}
  .sc-win{gap:7px;padding:12px;scroll-snap-align:start}
  .sc-win-time{font-size:18px}
  .sc-explorer-controls{padding:10px;gap:10px}
  .sc-explorer-top,.sc-explorer-bottom{gap:10px}
  .sc-modes{width:100%;justify-content:space-between}
  .sc-mode{flex:1;padding:8px 7px;font-size:11px;min-height:40px}
  .sc-date-nav{gap:4px}
  .sc-date-nav label{gap:4px;font-size:10px}
  .sc-date-nav input{width:155px;font-size:16px;min-height:40px}
  .sc-date-nav .mini{padding-inline:8px;font-size:11px;min-width:40px;min-height:40px}
  .sc-day-nav{min-width:0;max-width:none;width:100%;flex-basis:100%;gap:2px}
  .sc-explore-day{padding:7px 3px}
  .sc-person-pick{width:100%}
  .sc-person-pick select{flex:1;max-width:none;font-size:16px;min-height:40px}
  .sc-range-row{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:10px}
  .sc-range-status{justify-self:end}
  .sc-range-names{grid-column:1/-1}
  .sc-range-row>span:last-child{display:none}
  .sc-detail-heading{align-items:flex-start;padding:12px}
  .sc-detail-heading h3{font-size:13px;line-height:1.5}
  .sc-ctl{flex-wrap:wrap;margin-left:0;width:100%;justify-content:space-between}
  .sc-person-blocks>div>span:last-child{margin-left:14px;width:100%}
}