/* The december list signup: the form, its "you're on the list" panel, the
   copy inside a card (blog posts, the homepage sheet) and the homepage sheet.
   The markup sits in each page (homepage, /december, blog posts, /links);
   /december, /links and the homepage section size their own headings. The
   behavior is /js/december-list.js. Uses the page tokens --card, --line-2,
   --ink, --muted, --dim, --blue and --font. */
.dl { text-transform:none; text-align:left; }
.dl-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.dl-eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px 2px rgba(20,20,232,.45); }
.dl-title { margin:10px 0 0; font-weight:600; font-size:26px; line-height:1.1; letter-spacing:-0.035em; text-transform:lowercase; color:#fff; }
.dl .hl { color:#fff; background:var(--blue); padding:0 .14em; border-radius:.14em; display:inline-block; line-height:1.02; white-space:nowrap; }
.dl-body { margin:10px 0 18px; font-size:14.5px; line-height:1.55; color:#D4D4D8; }
.dl-inline { margin-top:30px; }
.dl-card { background:var(--card); border:1px solid var(--line-2); border-radius:28px; padding:24px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9); }
.dl-label { display:block; font-size:13.5px; font-weight:600; color:#e4e4e7; margin-bottom:8px; }
.dl-row { display:flex; gap:6px; padding:6px; background:#0A0A0B; border:1px solid var(--line-2); border-radius:999px;
  transition:border-color .12s, box-shadow .12s; }
.dl-row:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,20,232,.35); }
.dl-input { flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:16px;
  padding:10px 8px 10px 14px; outline:none; color-scheme:dark; }
.dl-input::placeholder { color:var(--dim); }
.dl-go { flex:none; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px;
  background:#fff; color:#0A0A0B; font:inherit; font-size:15.5px; font-weight:600; padding:12px 20px; cursor:pointer;
  white-space:nowrap; text-decoration:none; transition:background .15s, transform .15s; }
.dl-go:hover { background:#e9e9ee; }
.dl-go:active { transform:scale(.98); }
.dl-go[disabled] { opacity:.6; cursor:wait; }
.dl-go:focus-visible, .dl-chip:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (max-width:480px){
  .dl-card { padding:20px 18px; }
  .dl-row { flex-direction:column; border-radius:22px; }
  .dl-input { padding:12px 10px; }
  .dl-go { padding:14px; }
}
.dl-err { margin-top:10px; color:#fca5a5; font-size:14px; }
.dl-err:empty { display:none; }
.dl-chips { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.dl-chips-l { width:100%; font-size:13.5px; color:var(--muted); }
.dl-chip { border:1px solid var(--line-2); background:transparent; color:#e4e4e7; font:inherit; font-size:14px;
  padding:7px 14px; border-radius:999px; cursor:pointer; transition:border-color .12s, background .12s; }
.dl-chip:hover { border-color:#fff; }
.dl-chip[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }
/* Birthday month: one optional row the script adds, shown while "birthday" is picked. */
.dl-months { margin-top:14px; }
.dl-months[hidden] { display:none; }
.dl-months .dl-chips-l { display:block; }
.dl-month-row { margin-top:8px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.dl-month-row::-webkit-scrollbar { display:none; }
.dl-month-row .dl-chip { flex:none; font-size:13.5px; padding:6px 12px; }
.dl-small { margin-top:16px; font-size:13px; color:var(--dim); }
.dl-now { margin-top:6px; font-size:14.5px; color:var(--muted); }
.dl-now a { color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:var(--blue);
  text-decoration-thickness:2px; text-underline-offset:3px; }
.dl-done:focus { outline:none; }
.dl-done-h { margin:0; font-size:28px; font-weight:600; letter-spacing:-0.03em; line-height:1.1; color:#fff; }
.dl-done .dl-go { margin-top:16px; }
.dl-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* The homepage's "not ready yet?" sheet: a bottom sheet on phones, a centered box on desktop. */
.dl-sheet { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; }
.dl-sheet[hidden] { display:none; }
.dl-sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.dl-sheet-panel { position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
  background:#111113; border:1px solid var(--line-2); border-bottom:0; border-radius:28px 28px 0 0;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom)); animation:dl-sheet-in .32s cubic-bezier(.16,1,.3,1); }
.dl-sheet-panel:focus { outline:none; }
@keyframes dl-sheet-in { from { transform:translateY(100%); } }
@media (min-width:761px){
  .dl-sheet { align-items:center; padding:16px; }
  .dl-sheet-panel { border-radius:28px; border-bottom:1px solid var(--line-2); padding:30px; animation:none; }
}
.dl-sheet-x { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2);
  background:transparent; color:#fff; font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.dl-sheet-x:focus-visible { outline:2px solid #fff; outline-offset:2px; }