/* The availability page.

   Deliberately a copy of the dailies book's own cells and palette, not the
   return page's sage and cream: this page is the book seen from the other side
   -- the same month, the same cells, the same violet -- so a day-rate person
   looking at it and Matt looking at his screen are looking at the same thing.
   Matt, 23 Sep 2026: "it should jsut look the same as my dailies calender."

   The tokens are GLOBAL's, from buildbundle.py --ink/--mute/--rule/--bg/
   --panel and the dailies violet --dl/--dl-b/--dl-w. The root is 17px because
   the bundle's is (newlook.css), so a 3.6rem cell is the same height here as
   there. The font is the book's own YAH DM Sans, staged in by build.py.

   Nothing here counts anything: see the note at the top of
   dailies-avail-state.js. The only numbers on the page are dates and the
   shoot's own day numbers. */

:root{color-scheme:dark;
  --ink:#e8e6e3;--mute:#9aa0a8;--rule:#33383f;--bg:#16181b;--panel:#1c1f23;--chip:#23262b;
  --accent:#d3ab6a;
  --dl:#c3aef5;--dl-b:#7a5ccc;--dl-w:rgba(122,92,204,.16)}
html{font-size:17px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 'YAH DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
main{max-width:34rem;margin:auto;padding:1.4rem 1.1rem 4rem}

/* ---------- the head, as the book's ---------- */
.dl-head{margin:0 0 1rem}
h1{margin:0;font-size:1.35rem;letter-spacing:-.01em;font-weight:600}
.dl-sub{margin:.15rem 0 0;color:var(--mute);font-size:.82rem}
.brand{letter-spacing:.14em;font-size:.62rem;color:var(--mute);margin:0 0 .9rem;text-transform:uppercase}

.dl-card{border:1px solid var(--rule);border-radius:12px;background:var(--panel);
  padding:1rem 1.1rem;margin:0 0 .9rem}
.dl-lede{margin:0;font-size:.95rem;line-height:1.5}
.dl-note{white-space:pre-wrap;margin:.7rem 0 0;padding-left:.8rem;
  border-left:3px solid var(--dl-b);color:var(--ink);font-size:.88rem;line-height:1.5}

/* ---------- the month, as the book draws it ---------- */
.dl-ghead{margin:0 0 .5rem;font-size:.95rem;font-weight:600}
.dl-dow,.dl-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.dl-dow{margin-bottom:.3rem}
.dl-dow span{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);text-align:center}
.dl-wk{margin-bottom:.3rem}
.dl-c{position:relative;min-height:3.6rem;border:1px solid var(--rule);border-radius:9px;
  background:var(--panel);padding:.3rem .35rem;text-align:left;font:inherit;color:var(--mute);
  display:flex;flex-direction:column;gap:.15rem}
.dl-c.empty{background:none;border-color:transparent}
/* An offered day is a dailies day, in the book's own two rules for one. */
.dl-c.day{border-color:var(--dl-b);background:var(--dl-w);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.dl-c.day:active{outline:2px solid var(--dl-b);outline-offset:1px}
/* And tapped is the book's selected state, exactly: the bright ring. */
.dl-c.sel{outline:2px solid var(--dl);outline-offset:1px}
.dl-c.sel .dl-d{color:var(--dl)}
.dl-d{font-size:.82rem;font-weight:600}
.dl-no{font-size:.62rem;color:var(--mute);letter-spacing:.04em}
.dl-c.sel .dl-no{color:var(--dl)}

/* ---------- the note back, and send ---------- */
.dl-f{display:flex;flex-direction:column;gap:.15rem;margin:0 0 .8rem}
.dl-f span{font-size:.7rem;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
textarea{font:inherit;font-size:.9rem;min-height:4.5rem;padding:.6rem .7rem;
  border-radius:9px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);
  box-sizing:border-box;width:100%;resize:vertical}
button{font:inherit;font-size:.9rem;font-weight:600;min-height:44px;padding:.7rem 1.1rem;
  border-radius:9px;border:1px solid var(--dl-b);background:var(--dl-w);color:var(--dl);cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
.dl-said{margin:.7rem 0 0}
[hidden]{display:none!important}

/* iOS will not have a field under 16px take focus without zooming the page in
   and leaving it there. The bundle's rule; the same one applies to a phone in
   a field. */
@media (max-width:760px){
  textarea{font-size:16px}
}