/* The public Investor Day Calendar, /investor-days/calendar (the design Roy approved on Oct 11; design chat CC-7, CC-8):
   loaded by that page only, from a link in its own view (calendar.ejs), so no shared stylesheet is touched. Every rule is
   under .cal-pub; every colour and face is the site's own variable (app.css). The rows and what each audience sees are
   decided in server code (src/lib/calendar/public-page.ts), not here. Desktop: each event a four-column row under its
   month; 700 px and less: each event a short card, and at most five placeholder rows. */

.cal-pub.page { max-width: 1120px; padding-bottom: 72px; }

.cal-pub :focus-visible { outline: 2px solid var(--sellier); outline-offset: 3px; }

/* ---- header ---- */
.cal-pub__head { margin: 0 0 40px; }
.cal-pub__head .eyebrow { margin: 0 0 14px; }
.cal-pub__head .display { margin: 0; font-size: 52px; }
.cal-pub__intro { max-width: 700px; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.cal-pub__summary { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cal-pub__summary-name { font-weight: 600; color: var(--ink); }
.cal-pub__summary-days { color: var(--sellier); font-weight: 600; }
.cal-pub__added-week { color: var(--ink-2); }

/* ---- tabs ---- */
.cal-pub__tabs { display: flex; gap: 44px; margin: 0 0 8px; border-bottom: 1px solid var(--rule); }
.cal-pub__tab { display: inline-flex; align-items: baseline; gap: 12px; padding: 0 0 10px; margin-bottom: -1px; color: var(--ink-4); text-decoration: none; border-bottom: 2px solid transparent; }
.cal-pub__tab:hover { color: var(--ink-2); }
.cal-pub__tab[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); }
.cal-pub__tab-count { font-family: var(--font-display); font-size: 56px; font-weight: 400; line-height: 1; font-variant-numeric: lining-nums; }
.cal-pub__tab-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- groups and part headings ---- */
.cal-pub__section { margin: 0; }
.cal-pub__group { margin: 44px 0 0; }
.cal-pub__group-head, .cal-pub__part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.cal-pub__month, .cal-pub__part { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.cal-pub__group-count, .cal-pub__part-count { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cal-pub__part-head { margin: 44px 0 0; }
.cal-pub__part-head + .cal-pub__group { margin-top: 20px; }
.cal-pub__part-head + .cal-pub__group .cal-pub__group-head { border-bottom-color: var(--rule); }
.cal-pub__part-head + .cal-pub__group .cal-pub__month { font-size: 22px; }
.cal-pub__note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

.cal-pub__empty { margin: 24px 0 0; padding: 18px 0; font-size: 15px; color: var(--ink-3); }

/* ---- a row ---- */
.cal-pub__rows { margin: 0; padding: 0; list-style: none; }
.cal-pub__row { display: grid; grid-template-columns: 168px 1.25fr 1.2fr 0.7fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--rule-light); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.cal-pub__row > div { min-width: 0; overflow-wrap: anywhere; }

.cal-pub__day { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-pub__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.cal-pub__until { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sellier); }

.cal-pub__name { display: block; font-weight: 600; }
.cal-pub__new { display: inline-block; margin-top: 8px; padding: 2px 7px; border: 1px solid var(--sellier); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sellier); }

.cal-pub__title { display: block; }

.cal-pub__links ul { margin: 0; padding: 0; list-style: none; }
.cal-pub__links li + li { margin-top: 4px; }
.cal-pub__links a { color: var(--sellier); text-decoration: underline; text-underline-offset: 2px; }
.cal-pub__links a:hover { color: var(--sellier-deep); }
.cal-pub__recap-item { margin-bottom: 6px; }
.cal-pub__links a.cal-pub__recap { display: inline-block; padding: 6px 11px; background: var(--sellier); color: var(--paper); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cal-pub__links a.cal-pub__recap:hover { background: var(--sellier-deep); color: var(--paper); }
/* an event's Investor Day Announcement (CC-2 item 7): a plain rust link, first among the links after "Read the recap" */
.cal-pub__links a.cal-pub__announcement { color: var(--sellier); font-weight: 500; }
.cal-pub__src-tag { margin-right: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cal-pub__src-text { color: var(--ink-2); }
.cal-pub__added { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-4); }

/* ---- Add to calendar (DCAL-8): a small label, then three symbols in a row, each a plain link; the mockup's .addcal rules
   with the site's colours (its --mute, --accent and --card are --ink-4, --sellier and --surface here). The group is pulled
   back 6 px so the first symbol lines up with the links above. The official icons are shown unaltered at 20 px ---- */
.addcal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 4px 0 0 -6px; }
.addcal__label { flex-basis: 100%; padding: 0 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
/* 6 px between the last link (Webcast, Investor page) and the label (DCAL-9); a row with no link above has none */
.cal-pub__links ul:has(li) + .addcal .addcal__label { margin-top: 6px; }
.cal-pub__links .addcal a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--sellier); text-decoration: none; border-radius: 2px; }
.cal-pub__links .addcal a:hover { background: var(--surface); color: var(--ink); }
.cal-pub__links .addcal a:focus-visible { outline: 2px solid var(--sellier); outline-offset: 0; }
.addcal img { display: block; width: 20px; height: 20px; }
.addcal__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* stand-in for an official icon not yet supplied */
.addcal__ph { display: block; width: 20px; height: 20px; border: 1px dashed var(--ink-4); border-radius: 3px; }

/* ---- withheld: placeholder rows, blurred and faded, with the panel over their upper part ---- */
.cal-pub__locked { position: relative; display: grid; margin: 0; }
.cal-pub__locked > * { grid-area: 1 / 1; }
.cal-pub__ph { filter: blur(5px); opacity: 0.6; user-select: none; pointer-events: none; }
.cal-pub__ph-link { color: var(--sellier); }
.cal-pub__locked::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }

.cal-pub__panel { position: relative; z-index: 1; align-self: start; justify-self: center; width: min(520px, 100%); margin: 150px 0 48px; padding: 32px 36px 28px; background: var(--surface); border: 1px solid var(--ink); box-shadow: 0 18px 48px rgba(31, 27, 22, 0.12); text-align: center; }
.cal-pub__panel p { margin: 0; }
.cal-pub__panel-count { font-family: var(--font-display); font-size: 64px; line-height: 1; font-variant-numeric: lining-nums; color: var(--sellier); }
.cal-pub__panel-line { margin-top: 6px !important; font-family: var(--font-display); font-size: 26px; line-height: 1.25; color: var(--ink); }
.cal-pub__panel-price { margin-top: 16px !important; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sellier); }
.cal-pub__points { max-width: 42ch; margin: 20px auto 0; padding: 0; list-style: none; text-align: left; }
.cal-pub__points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cal-pub__points li + li { margin-top: 12px; }
.cal-pub__points strong { color: var(--ink); font-weight: 600; }
.cal-pub__point-n { font-family: var(--font-display); font-size: 22px; line-height: 1; font-variant-numeric: lining-nums; color: var(--sellier); }
.cal-pub__panel-link { display: inline-block; margin-top: 24px; padding: 11px 26px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; text-decoration: none; }
.cal-pub__panel-link:hover { background: var(--ink-2); color: var(--paper); }
.cal-pub__panel-plans { margin-top: 12px !important; font-size: 12.5px; color: var(--ink-3); }

/* ---- search and paging ---- */
.cal-pub__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 28px 0 0; }
.cal-pub__search-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cal-pub__search-input { flex: 0 1 300px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.cal-pub__search-input:focus-visible { border-color: var(--ink); }
.cal-pub__search-button { min-height: 38px; padding: 6px 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; cursor: pointer; }

.cal-pub__paging { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 32px 0 0; font-size: 14px; color: var(--ink-3); }
.cal-pub__page-link { color: var(--sellier); }

.cal-pub__foot { margin: 48px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ---- phone ---- */
@media (max-width: 700px) {
  .cal-pub.page { padding-top: 40px; padding-left: 16px; padding-right: 16px; }
  .cal-pub__head { margin-bottom: 28px; }
  .cal-pub__head .display { font-size: 38px; }
  .cal-pub__intro { font-size: 15px; }

  .cal-pub__tabs { gap: 32px; }
  .cal-pub__tab { gap: 8px; }
  .cal-pub__tab-count { font-size: 40px; }

  .cal-pub__group, .cal-pub__part-head { margin-top: 36px; }
  .cal-pub__month, .cal-pub__part { font-size: 23px; }

  .cal-pub__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 18px 0; }
  .cal-pub__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .cal-pub__when .cal-pub__sub { margin-top: 0; }
  .cal-pub__date-words { flex-basis: 100%; order: 3; }
  .cal-pub__until { margin: 0 0 0 auto; }
  .cal-pub__who { margin-top: 6px; }
  .cal-pub__name { font-size: 16px; }
  .cal-pub__new { margin-top: 6px; }
  .cal-pub__what { margin-top: 6px; }
  .cal-pub__links { margin-top: 8px; }
  .cal-pub__links ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
  .cal-pub__links li + li { margin-top: 0; }
  .cal-pub__recap-item { margin-bottom: 0; }
  .cal-pub__added { margin-top: 8px; }
  /* Add to calendar on its own line in the links group: the label to the left of the symbols */
  .addcal { flex-wrap: nowrap; margin-top: 0; }
  .addcal__label { flex-basis: auto; }
  .cal-pub__links ul:has(li) + .addcal .addcal__label { margin-top: 0; }

  .cal-pub__ph > li:nth-child(n + 6) { display: none; }
  .cal-pub__panel { margin-top: 120px; padding: 26px 20px 22px; }
  .cal-pub__panel-count { font-size: 52px; }
  .cal-pub__panel-line { font-size: 23px; }

  .cal-pub__search-input { flex: 1 1 100%; }
}