/* meet, the public page. A plain document: Georgia, blue links, one table row per day saying when I'm free in
   ranges, the way people write it. A range opens to its half hours. Nothing to load but this file. */
body { margin: 0; background: #ffffff; color: #111111; font: 17px/1.5 Georgia, "Times New Roman", serif; }
main { max-width: 680px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font: 400 26px/1.2 Georgia, serif; margin: 0 0 8px; }
p { margin: 0 0 16px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #1a0dab; outline-offset: 2px; }
.lnk { color: #1a0dab; text-decoration: underline; text-underline-offset: 2px; }
.lnk.on { color: #111111; text-decoration: none; font-weight: 700; }

table { border-collapse: collapse; margin: 4px 0 16px; }
td { padding: 4px 18px 4px 0; vertical-align: top; }
td.day { white-space: nowrap; padding-right: 24px; }
/* each week opens with its number */
tr.wk td, tr.wk th { padding: 18px 0 2px; color: #777777; font-size: 15px; font-weight: 400; text-align: left; }
tr.wk.first td { padding-top: 0; }
.ranges { font-variant-numeric: tabular-nums; }
.busy { color: #9a9a9a; }
/* the work page's two lines a day: a small grey am or pm, then that half's ranges */
.half + .half { margin-top: 2px; }
.lbl { display: inline-block; width: 2.2em; color: #9a9a9a; font-size: 15px; }
/* friends' links, wide screens: hours in fixed places of width --w with gaps --g. Each time is pinned to the start of
   its hour's place, so times line up across days whatever their length; the line runs under them between the two. */
.ln { --w: 2.6em; --g: .25em; font-size: 15px; display: grid; grid-template-columns: repeat(var(--n, 17), var(--w)); gap: 0 var(--g); align-items: center; font-variant-numeric: tabular-nums; }
.ln .run { position: relative; height: 1.6em; cursor: pointer; color: #1a0dab; }
.ln .num { position: absolute; top: 0; left: 0; line-height: 1.6em; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; background: #ffffff; padding-right: .2em; z-index: 1; }
.ln .num.to { left: calc(var(--gap) * (var(--w) + var(--g))); padding-left: .2em; padding-right: 0; }
.ln .bar { position: absolute; top: 50%; left: .3em; right: calc(var(--w) + var(--g) - .3em); border-top: 2px solid #1a0dab; }
.ln .run:not(:has(.from)) .bar { left: 0; }
.ln .run:hover .num, .ln .run.on .num { color: #111111; }
.ln .run:hover .bar, .ln .run.on .bar { border-color: #111111; }
/* friends' links, narrower screens: days as columns, hours as rows of height --r, a few hours marked on the left */
.vt { --r: 2.1em; display: grid; grid-template-columns: 1.6em repeat(var(--days, 5), minmax(0, 1fr)); gap: 0 6px; font-variant-numeric: tabular-nums; margin: 4px 0 16px; max-width: 32em; }
.vt .dh { text-align: center; font-size: 14px; color: #555555; padding-bottom: 6px; line-height: 1.2; }
.vt .dh b { display: block; font-size: 20px; font-weight: 400; color: #111111; }
.vt .axis, .vt .col { position: relative; height: calc(var(--rows, 18) * var(--r)); }
.vt .col { border-top: 1px solid #e2e2e2; }
.vt .axis span { position: absolute; left: 0; font-size: 12px; color: #a0a0a0; line-height: 1; transform: translateY(-50%); }
.vt .run { position: absolute; left: 0; right: 0; cursor: pointer; color: #1a0dab; }
.vt .num { position: absolute; left: 50%; transform: translateX(-50%); line-height: 1.4; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; background: #ffffff; padding: 0 2px; }
.vt .num.from { top: 0; }
.vt .num.to { bottom: 0; transform: translate(-50%, 100%); }
.vt .bar { position: absolute; left: 50%; top: .6em; bottom: 0; border-left: 2px solid #1a0dab; }
.vt .run:hover .num, .vt .run.on .num { color: #111111; }
.vt .run:hover .bar, .vt .run.on .bar { border-color: #111111; }
/* the UTC offset after the friends' title, small and grey */
h1 .off { font-size: .55em; color: #9a9a9a; margin-left: .45em; vertical-align: .15em; }

/* the red mark for now on today, and the friends' last line */
.ln { position: relative; }
.nowmark { position: absolute; z-index: 2; pointer-events: none; }
.ln .nowmark { top: -3px; bottom: -3px; border-left: 2px solid #b00020; }
.vt .nowmark { left: 0; right: 0; border-top: 2px solid #b00020; }
.stay { margin-top: 28px; color: #555555; }
.stay a { color: #1a0dab; }

/* which layout: the horizontal lines from 1100px, the columns below */
@media (max-width: 1099px) { table.friends { display: none; } }
@media (min-width: 1100px) { .vt { display: none !important; } main:has(table.friends) { max-width: 1080px; } }
.run-label { margin: 6px 0 0; color: #555555; font-size: 15px; }

/* the half hours of an open range, the length question, the end-time picker and the video box */
.times { display: grid; grid-template-columns: repeat(6, 3.1em); gap: 2px 8px; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
#lens { margin: 0; }
select { font: inherit; font-size: 16px; padding: 5px 6px; border: 1px solid #8a8a8a; background: #ffffff; color: #111111; border-radius: 2px; justify-self: start; }
label.tick { display: flex; gap: 8px; align-items: center; }

form { display: grid; gap: 10px; max-width: 380px; }
label { display: grid; gap: 3px; font-size: 15px; }
input, textarea { font: inherit; font-size: 16px; padding: 6px 7px; border: 1px solid #8a8a8a; background: #ffffff; color: #111111; border-radius: 2px; }
textarea { min-height: 72px; resize: vertical; }
.send { justify-self: start; padding: 5px 16px; border: 1px solid #767676; background: #f3f3f3; border-radius: 3px; }
.send:disabled { opacity: .5; cursor: default; }
.picked { font-weight: 700; margin: 0 0 2px; }
.msg.err { color: #b00020; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* phones: the day on its own line, its times on the full width below */
@media (max-width: 560px) {
  body { font-size: 16px; }
  table, tbody, tr, td { display: block; }
  td { padding: 0; }
  td.day { padding: 12px 0 3px; font-weight: 700; }
  .times { grid-template-columns: repeat(6, 3em); gap: 3px 4px; }
}