/* ===========================================================================
   fivemile-calendar.css

   The calendar page's own file. Load order is common, cards, shell, then this,
   the same as the news page.

   Nothing card shaped is defined in here. Every card on the calendar comes out
   of fivemile-cards.css: the event stub for a date, and the department panel
   that is the door to the archive room. What is left is the page's own
   furniture, which is now three things: the step control at the top of the
   month, the picker under it, and the form at the foot.

   The seven subject colors and the three stub additions, the word block, the
   source link, and the shift note, all moved into fivemile-cards.css when the
   archive room started drawing event stubs too. That file's header says to move
   a rule in the moment a second page needs it, and its own note on this stub
   said the same. See DECISIONS.md 50.

   THE MEASURE CHANGED. The calendar used to set its own 1100px wrap, and
   DECISIONS.md 40 lists that as deliberate, on the grounds that the page was a
   table that needed the room. It is not a table any more. It is a run of event
   stubs, and the card system is drawn to the 1000px measure the other twenty
   one pages use, so the page takes fivemile-shell.css explicitly and the
   bespoke measure goes. See DECISIONS.md 41.
   =========================================================================== */

/* The tokens the masthead and the buttons in fivemile-common.css read that
   neither cards.css nor shell.css declares. Same values every other page
   carries. This file loads last, so a duplicate here is a duplicate with the
   same value and nothing moves. */
:root{
  --red:#C8102E;--red-mid:#9a0c22;
  --paper:#F2E8D5;--paper2:#ede0c8;--card:#FAF6EE;
  --ink:#1C1208;--ink2:#4a3418;--ink3:#7a5838;
  --masthead:#3D2810;
  --border:rgba(80,44,8,0.13);--border2:rgba(80,44,8,0.24);--rule:rgba(80,44,8,0.15);
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"DM Mono",monospace;
  --r:8px;--r-lg:14px;--ease:220ms ease;
}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

.top{padding:28px 0 0}

/* ---------------------------------------------------------------------------
   THE STEP CONTROL

   There was a rail of nineteen month chips here, and under it nineteen month
   blocks in an accordion. It came out. What is left is three cells across the
   top of the month: back a month, the month itself, forward a month.

   Each step names the month it goes to and says how many dates are in it,
   which is decision 28 all over again. A control reading only September is a
   heading with an arrow beside it, and a reader has to spend a tap to find out
   whether September holds anything at all.

   At the two walls, January 2026 and the far end of next year, the step is an
   empty transparent cell rather than a dead button. The column keeps its
   width, so the month title does not slide sideways in January.
   --------------------------------------------------------------------------- */
#the-month-block{scroll-margin-top:160px}

.mo-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:10px;
  margin:0 0 6px}
.mo-step{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 13px;
  background:var(--card);border:1px solid var(--fm-rule);border-radius:var(--r-lg);
  text-decoration:none;color:inherit}
/* Sized to the words rather than to the column. Stretched, each step is a
   380px band on a wide screen, and the whole band navigates. That is the same
   mistake .k-more is written against: a 300px hit area on a 60px word, where
   half the taps that land on it were never meant for it. */
.mo-step.prev{justify-self:start}
.mo-step.next{justify-self:end;justify-content:flex-end;text-align:right}
.mo-step:hover{border-color:var(--masthead);text-decoration:none}
.mo-step b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.mo-step small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  color:var(--fm-muted)}
.mo-arrow{flex:none;font-size:22px;line-height:1;color:var(--fm-muted)}
.mo-step:hover .mo-arrow{color:var(--masthead)}
/* The wall. Holds the column and reports nothing, which is correct: there is
   nothing behind it. */
.mo-step.off{background:none;border-color:transparent;pointer-events:none}

.mo-now{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 8px}
.mo-now h2{margin:0;font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.mo-count{margin-top:3px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fm-muted)}

/* ---------------------------------------------------------------------------
   THE PICKER AND THE WAY BACK

   One row under the step control. On the left, every month the calendar holds,
   so next January is one tap rather than six. On the right, and only when the
   reader has gone somewhere, the way back to the month they are actually in.

   The select is left as a select. The native control is the wheel a reader
   already knows how to use with one thumb, it holds thirty six months without
   asking the page for room, and every browser draws its own caret on it.
   --------------------------------------------------------------------------- */
.mo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 14px}

.mo-pick{max-width:100%;min-height:44px;padding:9px 12px;
  background:var(--card);border:1px solid var(--fm-rule);border-radius:var(--r);
  color:var(--ink);font:inherit;font-size:16px;font-weight:600;line-height:1.2;
  outline:none;cursor:pointer;
  transition:border-color var(--ease),box-shadow var(--ease)}
.mo-pick:hover{border-color:var(--masthead)}
.mo-pick:focus-visible{border-color:rgba(200,16,46,.55);box-shadow:0 0 0 3px rgba(200,16,46,.08)}

/* Only on screen when the reader is not on this month, which is the only time
   it has anywhere to go. */
.mo-back{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);text-decoration:none}
.mo-back:hover{text-decoration:underline}

/* On a phone the three cells will not sit on one line without shrinking the
   month name to something a reader has to squint at. So the month takes the
   full width and the two steps go under it, half and half. Still the top of
   the month, still one tap, and nothing is 11px. */
@media(max-width:600px){
  .mo-nav{grid-template-columns:1fr 1fr;grid-template-areas:"now now" "prev next"}
  .mo-now{grid-area:now;align-items:flex-start;text-align:left;padding:0}
  .mo-now h2{font-size:23px}
  /* Half and half here, so the two of them fill the line rather than sitting
     in the middle of it with air on both sides. */
  .mo-step.prev{grid-area:prev;justify-self:stretch}
  .mo-step.next{grid-area:next;justify-self:stretch}
  /* The select takes the whole line rather than sizing itself to whichever
     month happens to be selected, so the tap target does not move about as
     the reader pages. */
  .mo-foot{align-items:stretch}
  .mo-pick{width:100%}
}

/* ---------------------------------------------------------------------------
   SEND A DATE IN

   Not a card in the card system sense, so it stays plain: card stock, hairline
   border, 14px radius. The same block the homepage and the news page finish
   on. The button treatment is in fivemile-common.css and reaches this form
   through .submit-form button.
   --------------------------------------------------------------------------- */
.send{margin-top:34px;background:var(--card);border:1px solid var(--fm-rule);border-radius:14px;padding:22px}
.send h2{margin:0 0 6px;font-size:20px;font-weight:800}
.send p{margin:0 0 16px;color:var(--fm-muted);font-size:16px;max-width:56ch}
.submit-form{display:grid;gap:10px}
.submit-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.submit-form input,.submit-form select,.submit-form textarea{width:100%;min-height:44px;
  padding:11px 13px;border-radius:var(--r);border:1px solid var(--border2);background:#fff;
  color:var(--ink);font:inherit;font-size:16px;outline:none;
  transition:border-color var(--ease),box-shadow var(--ease)}
.submit-form textarea{min-height:140px;resize:vertical}
.submit-form input:focus,.submit-form select:focus,.submit-form textarea:focus{
  border-color:rgba(200,16,46,.55);box-shadow:0 0 0 3px rgba(200,16,46,.08)}
.submit-status{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--fm-muted)}
.submit-done{padding:14px 0;font-size:16px;font-weight:700;color:var(--ink)}

@media(max-width:640px){
  .submit-row{grid-template-columns:1fr}
}