/* The selection planner's own styles, on top of the hub's (cricket_core.webcharts.CSS). */
.sp .top-in, .sp .band-in, .sp .wrap { max-width: 1360px }
.card.flush { padding: 0; overflow: hidden }
.tw table.grid td, .tw table.grid th { text-align: center }
.tw table.grid td:first-child, .tw table.grid th:first-child,
.tw table.grid td:nth-last-child(-n+2), .tw table.grid th:nth-last-child(-n+2) { text-align: left }
th small, td small { display: block; font-family: var(--font-b); font-size: 11.5px; font-weight: 500;
                     letter-spacing: 0; text-transform: none; color: var(--muted) }
.tick { color: var(--accent); font-weight: 700 }
h3 { font-family: var(--font-d); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 4px }
.places p { margin: 0 0 6px; font-size: 13.5px }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px }
dl.facts dt { color: var(--muted); font-weight: 600 }
dl.facts dd { margin: 0 }
.stats { display: flex; flex-wrap: wrap; gap: 14px 34px }
.players th { white-space: normal; vertical-align: bottom; line-height: 1.2 }
fieldset { border: 0; padding: 0; margin: 0 }
fieldset[disabled] { opacity: .6 }

/* colours: level for matches and series; kind for camps and unavailability */
.lv-national { --c: #0d5b3b }
.lv-a { --c: #2f7fb8 }
.lv-domestic, .lv-league { --c: #9a7208 }
.k-camp { --c: #7a4f9a }
.k-unavailable { --c: #b5452f }
.k-away { --c: #7b8f84 }

/* chips */
.chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
        border-radius: 3px; padding: 1px 7px; background: var(--accent-soft); color: var(--band); white-space: nowrap }
.chip.k-overlap, .chip.k-unavailable, .chip.k-travel, .chip.k-leadin { background: #fef3f2; color: var(--danger) }
.chip.st-reserve { background: #eef4fa; color: #2f6a99 }
.chip.st-possible { background: transparent; border: 1px dashed var(--muted); color: var(--muted) }
.chip.free { background: #e8f3ec; color: var(--accent) }
.chip.busy { background: #fef3f2; color: var(--danger) }
.chip.ok { background: #fbf3dc; color: #7a5a06 }
.fc { display: inline-block; min-width: 18px; text-align: center; background: var(--danger); color: #fff;
      font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 17px }
.fc.t { background: transparent; color: var(--danger); border: 1px dashed var(--danger); line-height: 15px }

/* flags */
.flag { border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: 4px; padding: 10px 14px;
        margin: 0 0 10px; scroll-margin-top: 16px }
.flag.noted { border-left-color: #98a2b3; background: #fafbfa }
.flag.tentative { border-left-style: dashed }
.flag:target { box-shadow: 0 0 0 3px rgba(233,179,17,.55) }
.flag .fh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600 }
.flag .fh .fig { margin-left: auto; font-family: var(--font-d); font-size: 16px; letter-spacing: .02em; color: var(--danger) }
.flag.noted .fh .fig { color: var(--muted) }
.flag p { margin: 6px 0; font-size: 14px }
.flag .noted-by { color: var(--muted); font-style: italic }
.flag .links { font-size: 13px }

/* the matrix */
.mx-tools { padding: 14px 18px; border-bottom: 1px solid var(--line) }
.mx-tools .summary { margin-left: auto; align-self: center; font-size: 14px }
.mx-tools .summary a { text-decoration: none; color: var(--ink) }
.mx-tools .summary b { color: var(--danger) }
.mx-wrap { overflow: auto; max-height: calc(100vh - 230px); position: relative }
.mx { position: relative; min-width: max-content }
.mx[style*="--w"] { width: calc(var(--w) + var(--name, 200px)) }
.mx-row, .mx-head, .mx-group { display: flex }
.mx-name { position: sticky; left: 0; z-index: 6; width: var(--name, 200px); flex: none; background: var(--card);
           border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); padding: 3px 10px;
           display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.2 }
.mx-name > div { flex: 1; min-width: 0 }
.mx-name a { color: var(--ink); text-decoration: none; font-weight: 600 }
.mx-name a:hover { color: var(--accent); text-decoration: underline }
.mx-name small { display: block; color: var(--muted); font-size: 11.5px }
.mx-track { position: relative; flex: none; border-bottom: 1px solid var(--line);
            background-image: repeating-linear-gradient(90deg, rgba(13,59,42,.07) 0 1px, transparent 1px calc(var(--day) * 7));
            background-position-x: var(--monday) }
.mx-head { position: sticky; top: 0; z-index: 8; background: var(--card) }
.mx-head .mx-name { z-index: 9; font-family: var(--font-d); font-weight: 700; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line-strong) }
.mx-head .mx-track { height: 40px; background: var(--card); border-bottom: 1px solid var(--line-strong) }
.mx-head .mo { position: absolute; top: 3px; padding-left: 4px; font-family: var(--font-d); font-weight: 700;
               font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--band); white-space: nowrap }
.mx-head .wk { position: absolute; top: 22px; padding-left: 2px; font-size: 10.5px; color: var(--muted) }
.mx-head .dy { position: absolute; top: 20px; font-size: 10px; color: var(--muted); text-align: center; line-height: 1 }
.mx-head .dy b { display: block; color: var(--ink); font-weight: 600; font-size: 11px }
.mx-group { background: var(--page) }
.mx-group span { position: sticky; left: 0; padding: 6px 10px 4px; font-family: var(--font-d); font-weight: 700;
                 font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--band) }
.mx-row:target .mx-name { background: #fbf3dc }
.mx-row:target .mx-track { background-color: rgba(233,179,17,.10) }
.mx-grid { position: absolute; left: var(--name, 200px); top: 0; bottom: 0; pointer-events: none; z-index: 1 }

/* workload beside each name (build step 5): matches, then days away with a bar against the most */
.mx-name .ld { display: flex; flex: none; align-self: stretch; align-items: center; margin-right: -4px }
.mx-name .ld > * { width: 40px; text-align: right; font-variant-numeric: tabular-nums; position: relative }
.mx-name .ld > * + * { width: 46px }
.mx-name .ld b { font-weight: 600; cursor: help }
.mx-name .ld i { position: absolute; right: 0; bottom: -3px; height: 3px; max-width: 34px; background: var(--accent);
                 opacity: .55; border-radius: 1px }
.mx-head .mx-name .ld a { font-size: 11px; line-height: 1.05; letter-spacing: .04em; white-space: normal;
                          color: var(--muted); font-weight: 700 }
.mx-head .mx-name .ld a:hover { color: var(--accent); text-decoration: none }
.mx-head .mx-name .ld a.on { color: var(--band) }
.mx-head .mx-name .ld a.on::after { content: " ↓" }
.mx-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted) }
.mx-grid .ml { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(13,59,42,.22) }
.mx-grid .today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); pointer-events: auto }

.bar { position: absolute; height: 18px; border-radius: 3px; background: var(--c); color: #fff; font-size: 11.5px;
       line-height: 17px; padding: 0 5px; overflow: hidden; white-space: nowrap; text-decoration: none; z-index: 2;
       box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) }
.bar span { position: relative; z-index: 1 }
.bar i { position: absolute; bottom: 0; height: 4px; background: rgba(255,255,255,.7) }
.bar:hover { filter: brightness(1.12); z-index: 5 }
.bar.reserve { opacity: .72 }
.bar.possible { background: rgba(255,255,255,.85); color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c);
                border: 1px dashed var(--c); line-height: 15px }
.bar.possible i { background: var(--c); opacity: .5 }
.bar.k-unavailable, .bar.k-away { background: repeating-linear-gradient(135deg, var(--c) 0 5px,
                                  color-mix(in srgb, var(--c) 78%, white) 5px 10px) }
.bg { position: absolute; top: 0; bottom: 0; z-index: 0;
      background: repeating-linear-gradient(135deg, rgba(154,114,8,.11) 0 2px, transparent 2px 5px) }
.fz { position: absolute; top: 1px; z-index: 4; border: 2px solid var(--danger); border-radius: 3px;
      background: rgba(180,35,24,.10) }
.fz:hover { background: rgba(180,35,24,.22) }
.fz.noted { border-color: #98a2b3; background: rgba(152,162,179,.10) }
.fz.tentative { border-style: dashed }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-top: 1px solid var(--line);
          font-size: 12.5px; color: var(--muted) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.sw { display: inline-block; width: 22px; height: 11px; border-radius: 2px; background: var(--c) }
.sw.possible { background: #fff; border: 1px dashed var(--muted) }
.sw.k-unavailable, .sw.k-away { background: repeating-linear-gradient(135deg, var(--c) 0 3px,
                                color-mix(in srgb, var(--c) 78%, white) 3px 6px) }
.sw.bgsw { background: repeating-linear-gradient(135deg, rgba(154,114,8,.35) 0 2px, transparent 2px 5px);
           border: 1px solid var(--line) }
.sw.fzsw { background: rgba(180,35,24,.10); border: 2px solid var(--danger) }
.sw.fzsw.noted { border-color: #98a2b3; background: rgba(152,162,179,.10) }
.sw.fzsw.tentative { border-style: dashed }
.sw.md { background: #0d5b3b; box-shadow: inset 0 -4px 0 rgba(255,255,255,.7) }

/* edit forms (build step 3) */
details.card > summary { cursor: pointer; list-style: none }
details.card > summary::-webkit-details-marker { display: none }
details.card > summary h2 { display: inline-block; margin: 0 }
details.card > summary h2::before { content: "+ "; color: var(--accent) }
details.card[open] > summary h2::before { content: "− " }
details.card[open] > summary { margin-bottom: 12px }
form.edit [hidden] { display: none !important }        /* .fld's flex would otherwise show a hidden field */
form.edit .fields { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; margin: 0 0 12px }
form.edit .fld { display: flex; flex-direction: column; min-width: 120px }
form.edit .fld label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px }
form.edit .fld input[name=title] { min-width: 260px }
form.edit .hint { color: var(--muted); font-size: 11.5px; max-width: 220px; margin-top: 3px; line-height: 1.3 }
form.edit .actions { display: flex; align-items: center; gap: 12px }
form.edit .msg { font-size: 13.5px; color: var(--muted) }
form.edit .msg.error { color: var(--danger) }
form.edit.danger { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
form.edit.danger button { background: transparent; color: var(--danger); border: 1px solid var(--danger) }
form.edit.danger button:hover { background: #fef3f2 }
form.edit.inline { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0 }
form.edit.inline .actions { gap: 8px }
form.edit.inline button, .edit-grid button { font-size: 13.5px; padding: 4px 10px }
form.edit.inline input { padding: 5px 8px; font-size: 13.5px }
.edit-grid td { vertical-align: middle }
.edit-grid select, .edit-grid input[type=date], .edit-grid input:not([type]) { padding: 4px 6px; font-size: 13px }
.edit-grid input[type=date] { width: 128px }
.edit-grid td, .edit-grid th { padding-left: 6px; padding-right: 6px }
.edit-grid input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent) }
.fields.add select[multiple] { min-width: 280px }
button:disabled { opacity: .55; cursor: default }

/* the calendar (build step 6): a month of weeks, each a grid of seven days with the bars laid over */
.cal-tools { align-items: center; gap: 12px 22px }
.cal-nav { display: flex; align-items: center; gap: 8px }
.cal-nav h2 { margin: 0; min-width: 190px; text-align: center }
.cal-nav a { text-decoration: none; font-weight: 600 }
.cal-nav .step { font-size: 22px; line-height: 1; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 4px }
.cal-nav .step:hover { background: var(--accent-soft) }
.cal-nav .now { font-size: 13.5px; margin-left: 6px; white-space: nowrap }
.cal-tools .checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13.5px }
.cal-tools .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted) }
.filters label.chk { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13.5px; font-weight: 500;
                     color: var(--ink); cursor: pointer }
.chk input { width: 15px; height: 15px; accent-color: var(--accent); padding: 0 }
.add-btn { margin-left: auto; font-size: 14px; padding: 6px 14px }
.cal-months { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 10px; font-size: 13px }
.cal-months a { padding: 2px 8px; border-radius: 3px; text-decoration: none; color: var(--muted); font-weight: 600 }
.cal-months a:hover { color: var(--ink); background: var(--accent-soft) }
.cal-months a.on { background: var(--band); color: #fff }
.cal { border-top: 1px solid var(--line) }
.cal-dow, .cal-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) }
.cal-dow span { padding: 6px 8px; font-family: var(--font-d); font-weight: 700; font-size: 13px; letter-spacing: .05em;
                text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-strong) }
.cal-wk { min-height: 104px; border-bottom: 1px solid var(--line) }
.cd { grid-row: 1 / -1; border-right: 1px solid var(--line); padding: 4px 8px; font-size: 13px; user-select: none }
.cd:last-child, .cd[style*="grid-column:7"] { border-right: 0 }
.cd b { font-weight: 600 }
.cd.out { background: #f7f8f6 }
.cd.out b { color: var(--muted); font-weight: 500 }
.cd.today b { display: inline-block; background: var(--gold); color: var(--band); border-radius: 3px; padding: 0 5px }
.cd.sel { background: rgba(233,179,17,.20) }
.cal[data-edit] .cd { cursor: cell }
.cb { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; margin: 1px 4px; height: 20px;
      padding: 0 6px; border-radius: 3px; background: var(--c); color: #fff; font-size: 12px; line-height: 20px;
      text-decoration: none; overflow: hidden; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) }
.cb span { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0 }
.cb .fc { flex: none; background: #fff; color: var(--danger); line-height: 15px; font-size: 10.5px }
.cb:hover { filter: brightness(1.12) }
.cb.mt { background: color-mix(in srgb, var(--c) 70%, white); color: var(--ink) }
.cb.k-unavailable, .cb.k-away { background: repeating-linear-gradient(135deg, var(--c) 0 5px,
                                color-mix(in srgb, var(--c) 78%, white) 5px 10px) }
.cb.cl { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0 }
.cb.cr { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
.cal.dragging .cb { pointer-events: none }

/* adding from the calendar and the matrix (build step 6): the selection, the menu and the dialog */
.mx-track .sel { position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
                 background: rgba(233,179,17,.25); box-shadow: inset 0 0 0 1px var(--gold) }
.mx[data-lo] .mx-track { cursor: cell }
.mx[data-lo] .mx-track a { cursor: pointer }
.ctx { position: absolute; z-index: 60; min-width: 230px; padding: 4px 0; background: var(--card);
       border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(13,59,42,.22) }
.ctx a, .ctx button { display: block; width: 100%; padding: 7px 14px; border: 0; border-radius: 0; background: none;
                      color: var(--ink); font: 500 13.5px/1.35 var(--font-b); letter-spacing: 0; text-transform: none;
                      text-align: left; text-decoration: none; cursor: pointer }
.ctx a:hover, .ctx button:hover, .ctx a:focus, .ctx button:focus { background: var(--accent-soft); outline: none }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0 }
dialog.add-dialog { width: 760px; max-width: calc(100vw - 32px); border: 0; border-radius: 8px; padding: 18px 22px;
                    box-shadow: 0 16px 48px rgba(13,30,22,.35); color: var(--ink) }
dialog.add-dialog::backdrop { background: rgba(13,30,22,.35) }
.add-dialog .dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px }
.add-dialog .dh h2 { margin: 0 }
.add-dialog .x { background: none; color: var(--muted); font: 400 26px/1 var(--font-b); padding: 0 6px }
.add-dialog .x:hover { background: none; color: var(--ink) }

@media (max-width: 640px) {
  .mx { --name: 130px !important }
  .mx-name small, .mx-name .ld { display: none }
  .cal-nav h2 { min-width: 0; font-size: 17px }
  .cal-wk { min-height: 72px }
  .cd { padding: 2px 4px; font-size: 12px }
  .cb { margin: 1px; padding: 0 3px; font-size: 11px }
  .add-btn { margin-left: 0 }
}

/* the list of players to add (Players page) */
.pool input[type=search] { width: 100%; max-width: 460px; font-size: 15px }
.pool-results { margin-top: 10px; max-width: 760px }
.pool-row { display: flex; align-items: center; gap: 14px; padding: 8px 4px; border-bottom: 1px solid var(--line) }
.pool-row .who { flex: 1; min-width: 0 }
.pool-row small { display: block; color: var(--muted); font-size: 12.5px }
.pool-row button { font-size: 13.5px; padding: 4px 14px }
.pool-row a { font-size: 13.5px; white-space: nowrap }
details.by-hand { margin-top: 16px }
details.by-hand > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 8px }

/* offline (build step 7b): the strip on every page, and the list of changes made offline */
.offline-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: -8px 0 12px;
                 font-size: 12.5px; color: #e6efe9; position: relative; z-index: 1 }
.offline-strip.off .state { background: var(--danger); color: #fff; padding: 2px 8px; border-radius: 3px; font-weight: 600 }
.offline-strip a { color: #fff }
button.linkish { background: none; border: 0; padding: 0 2px; font: inherit; font-size: inherit; letter-spacing: 0;
                 text-transform: none; color: inherit; text-decoration: underline; cursor: pointer }
button.linkish:hover { background: none }
.offline-strip .waiting { font-weight: 700; color: var(--gold); text-decoration: none }
.offline-strip .waiting.refused { color: #fff; background: var(--danger); padding: 2px 8px; border-radius: 3px }
form.edit .msg.waiting { color: #7a5a06; font-weight: 600 }
dialog.waiting-dialog { width: 640px; max-width: calc(100vw - 32px); border: 0; border-radius: 8px; padding: 18px 22px;
                        box-shadow: 0 16px 48px rgba(13,30,22,.35) }
dialog.waiting-dialog::backdrop { background: rgba(13,30,22,.35) }
.waiting-dialog .dh { display: flex; justify-content: space-between; align-items: center }
.waiting-dialog .x { background: none; color: var(--muted); font: 400 26px/1 var(--font-b); padding: 0 6px }
.waiting-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.waiting-row .what { flex: 1; min-width: 0 }
.waiting-row small { display: block; color: var(--muted) }
.waiting-row.refused small { color: var(--danger) }
.waiting-row .linkish { color: var(--danger) }

/* the calendar's three-month view (Tom, 09-10-2026) */
.cal-views { display: inline-flex; margin-left: 14px; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden }
.cal-views a { padding: 3px 10px; font-size: 13px; color: var(--muted); text-decoration: none }
.cal-views a.on { background: var(--band); color: #fff }
.cal.wide .cal-wk { min-height: 74px }
.cal.wide .cd { padding: 2px 6px; font-size: 12px }