/* cal-marks.css (v1.23.0) — the cat marks and the faded stay bars of the month grids (/calendar and the booking day picker). Behaviour: static/js/calendar-marks.js.
   Cats: 1 → one cat + ① (amber) · 2 → two stacked cat cards + ② (green) · 3 → three + ③ (berry) · more → three + "+" + ⓝ for the rest (cocoa). The circled number is set in the
   display serif, the date number in the body sans, so the two never read as one number. Tokens only, except the berry #7A3E65 (white on it 7.8:1). */
@layer sections {
  .cm { --s: var(--cm-size, 18px); --cm-c: var(--amber); display: inline-flex; flex-wrap: nowrap; align-items: center; gap: calc(var(--s) * .2); color: var(--cm-c); line-height: 1; }
  .cm--2 { --cm-c: var(--sage-deep); } .cm--3 { --cm-c: #7A3E65; } .cm--4 { --cm-c: var(--ink); }
  .cm__stack { position: relative; display: inline-block; flex: none; height: var(--s); width: calc(var(--s) + (var(--n) - 1) * var(--s) * .42); }
  .cm__cat { position: absolute; top: 0; left: calc(var(--i) * var(--s) * .42); width: var(--s); height: var(--s); stroke: var(--cm-ring, var(--paper-3)); stroke-width: 1.8; paint-order: stroke;
    stroke-linejoin: round; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 9deg)); filter: drop-shadow(0 1px 0 rgb(58 42 34 / .25)); }
  .cm__plus { flex: none; font-family: var(--font-display); font-weight: 900; font-size: max(calc(var(--s) * .8), 11px); line-height: 1; margin-inline: calc(var(--s) * -.04); }
  .cm__n { display: inline-grid; place-items: center; flex: none; min-width: max(calc(var(--s) * .9), 13px); height: max(calc(var(--s) * .9), 13px); padding-inline: 1px; border-radius: 999px;
    background: var(--cm-c); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: max(calc(var(--s) * .58), 9px); line-height: 1; font-variant-numeric: lining-nums; }

  @media (max-width: 380px) { .cm--4 { --s: calc(var(--cm-size, 18px) * .82); } .cm__n { min-width: 12px; height: 12px; } .cm__plus { font-size: 10px; } }

  /* ---- stay bars:  |-- name --|  — the line is faded, the caps are drawn only on the stay's real first and last day ---- */
  .cm-bars { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(20px, auto); row-gap: 2px; pointer-events: none; }
  .cm-bar--wrap { height: auto; min-height: 20px; }                                  /* 1.28.0: a one-cell name on two lines */
  .cm-bar--wrap .cm-bar__name { white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.05; padding: 1px 2px; text-overflow: clip; border-radius: 8px; }
  /* a one-cell stay: tight padding; a single long word is shown whole over the line (never cut, never split mid-word) */
  .cm-bar--one .cm-bar__name { --cm-gl: 3px; --cm-gr: 3px; padding: 0 2px; letter-spacing: -.01em; }
  .cm-bar--spill { z-index: 2; }
  .cm-bar--spill .cm-bar__name { max-width: none; overflow: visible; text-overflow: clip; background: var(--paper-3); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cm-line) 30%, transparent); }
  .cm-bar--empty { visibility: hidden; }
  /* the name sits in the MIDDLE of its stay (1.25.0): the faded line runs out to both caps, so a 4-day stay reads |—— Mishti ——| across all four days */
  .cm-bar { --cm-line: var(--sage-deep); position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: 20px; }
  .cm-bar--paid { --cm-line: #2E8B57; } .cm-bar--failed { --cm-line: var(--err); } .cm-bar--pending { --cm-line: var(--amber); } .cm-bar--blocked, .cm-bar--note { --cm-line: var(--ink-3); }
  .cm-bar__line { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid var(--cm-line); opacity: .42; transform: translateY(-1px); }
  .cm-bar--cl .cm-bar__line { left: 6px; } .cm-bar--cr .cm-bar__line { right: 6px; }
  .cm-bar:not(.cm-bar--cl) .cm-bar__line { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px); mask-image: linear-gradient(90deg, transparent, #000 16px); }
  .cm-bar:not(.cm-bar--cr) .cm-bar__line { -webkit-mask-image: linear-gradient(270deg, transparent, #000 16px); mask-image: linear-gradient(270deg, transparent, #000 16px); }
  .cm-bar:not(.cm-bar--cl):not(.cm-bar--cr) .cm-bar__line { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .cm-bar__cap { position: absolute; top: 50%; width: 2px; height: 12px; margin-top: -6px; border-radius: 1px; background: var(--cm-line); opacity: .7; }
  .cm-bar__cap--l { left: 5px; } .cm-bar__cap--r { right: 5px; }
  .cm-bar__name { --cm-gl: 4px; --cm-gr: 4px; position: relative; z-index: 1; min-width: 0; max-width: calc(100% - var(--cm-gl) - var(--cm-gr)); margin: 0 var(--cm-gr) 0 var(--cm-gl); padding: 0 .45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--paper-3) 92%, transparent); color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .01em; line-height: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cm-bar--cl .cm-bar__name { --cm-gl: 12px; } .cm-bar--cr .cm-bar__name { --cm-gr: 12px; }
  /* a long stay gets a little more air around the name, never stretched letters */
  .cm-bar[data-span="3"] .cm-bar__name, .cm-bar[data-span="4"] .cm-bar__name { padding: 0 .6rem; }
  .cm-bar[data-span="5"] .cm-bar__name, .cm-bar[data-span="6"] .cm-bar__name, .cm-bar[data-span="7"] .cm-bar__name { padding: 0 .8rem; letter-spacing: .03em; }
  .cm-bar--solo .cm-bar__line, .cm-bar--solo .cm-bar__cap { display: none; }
  .cm-bar--solo .cm-bar__name { --cm-gl: 2px; --cm-gr: 2px; padding: 0 .32rem; background: color-mix(in srgb, var(--cm-line) 14%, var(--paper-3)); }

  /* ---- 1.33.0 (owner: "the rows of dates alternate, the colour includes the lines"): every other WEEK row is a touch darker — the day cells AND
     the stay lines in that row share it, so a bar never seems to belong to the row above or below. "+n more" sits under a busy day. ---- */
  .cal-days > .cal-week:nth-child(odd), .bkc__days > .bkc__week:nth-child(odd) { background: color-mix(in srgb, var(--ink) 2.5%, var(--paper-3)); }
  .cal-days > .cal-week:nth-child(even), .bkc__days > .bkc__week:nth-child(even) { background: color-mix(in srgb, var(--ink) 7%, var(--paper-3)); }
  .bkc__days > .bkc__week { border-radius: 12px; }
  .cm-bar { z-index: 1; }
  .cm-more { position: relative; z-index: 1; align-self: center; justify-self: center; max-width: 100%; padding: 0 .4rem; border-radius: 999px; background: var(--ink); color: var(--paper-3);
    font-size: .7rem; font-weight: 850; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  @media (max-width: 520px) { .cm-more { padding: 0 .25rem; font-size: .66rem; } .cm-more__w { display: none; } }

  /* ---- 1.30.0: today — whiskers either side of the date and a small TODAY (was a dot / a filled circle) ---- */
  .bbt { display: inline-flex; align-items: center; gap: 1px; color: var(--amber); }
  .bbt__w { width: 12px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .bbt__w--r { transform: scaleX(-1); }
  .bbt > :not(svg) { color: var(--ink); font-weight: 900; }
  .bbt__t { display: block; margin: 0; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--amber); }
  @media (max-width: 440px) { .bbt__w { width: 8px; height: 8px; } .bbt__t { font-size: .52rem; letter-spacing: .04em; } }

  /* ---- legend samples ---- */
  .cm-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; max-width: 100%; --cm-size: 17px; --cm-ring: var(--paper-3); }
  .cm-key .cm-bar { width: 84px; flex: none; }
}