/* =============================================================================
 * kitchen-idp.css — Home kitchen, Edit cards and the IDP (js/home-kitchen.js, js/education-editor.js, js/idp.js)
 * =============================================================================
 * Built from the site's tokens (css/styles.css, section 2): paper and ink, white cards with hairlines, the serif
 * for headings, the theme colour as a quiet accent. Phone first; logical properties, so Arabic mirrors.
 *
 *   1. Shared pieces ("hub-"): notes, callouts, cards, tiles, segmented buttons, tabs, fields, icon buttons, toast
 *   2. Home kitchen: the jump menu, the planner's Save / I cooked it, My meals, Cooking skills
 *   3. Edit cards: the switch, the tools on the cards, the card editor dialog
 *   4. The IDP: the team, a player's plan (goals, talks, diet, body)
 *   5. Areas and statuses: fixed colours, the same whatever the theme
 *   6. Responsive, touch, motion, print
 *   7. The IDP's squad: the staff's views, the Squad dashboard, the Meal review (traffic lights), a player's Health
 *      and Meal photos, the note about new feedback, the count on the IDP's link (with its own responsive rules)
 * ========================================================================== */

/* ---------------------------------------------------------- 1. SHARED PIECES */
.hub-note { margin: 0; padding: var(--s4) 0; color: var(--grey-700); }
.hub-warn { margin: 0 0 var(--s4); padding: .75rem 1rem; font-size: .9375rem; color: #4d3b00; background: #fff6d6; border: 1px solid #e8c24a; border-radius: var(--radius-ctl); }
.hub-empty { margin: 0; padding: var(--s3) 0; font-size: .9375rem; color: var(--grey-700); }
.hub-empty-box {
  display: grid; justify-items: center; gap: var(--s2); padding: var(--s6) var(--s4); text-align: center;
  background: var(--white); border: 1.5px dashed var(--grey-300); border-radius: var(--radius-card);
}
.hub-empty-box .hub-callout-icon { color: var(--grey-500); }
.hub-callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.hub-callout-icon { display: grid; flex: none; color: var(--brand-ink); }
.hub-callout-icon svg { width: 1.75rem; height: 1.75rem; }
.hub-callout-text { flex: 1 1 16rem; margin: 0; font-size: var(--step-0); }
.hub-card { padding: var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.hub-h { margin: 0 0 var(--s3); font-size: var(--step-1); font-weight: 500; }
.hub-card .hub-h:not(:first-child) { margin-top: var(--s5); }

.hub-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.hub-tile { display: grid; align-content: start; gap: .15rem; min-width: 0; padding: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.hub-tile-label { font-size: .8125rem; font-weight: 600; color: var(--grey-700); }
.hub-tile-value { font: 500 clamp(1.5rem, 1.3rem + .8vw, 2rem)/1.15 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hub-tile-sub { font-size: .8125rem; color: var(--grey-700); }
.hub-tile.is-alert { background: var(--brand-soft); border-color: transparent; }
.hub-tile.is-alert .hub-tile-value { color: var(--brand-ink); }

.hub-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--mist); border-radius: 12px; }
.hub-seg-btn {
  position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: .3rem .8rem; cursor: pointer;
  font: 600 .8125rem/1.15 var(--font-body); color: var(--grey-700); background: transparent; border: 0; border-radius: 9px;
}
.hub-seg-btn:hover { color: var(--ink); }
.hub-seg-btn[aria-pressed="true"], .hub-seg-btn[aria-checked="true"] { color: var(--ink); background: var(--white); box-shadow: 0 1px 2px rgb(20 20 19 / .12); }

.hub-tabs { display: flex; gap: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab {
  position: relative; flex: none; min-height: 46px; padding: .5rem 0 .65rem; cursor: pointer;
  font: 600 .9375rem/1.2 var(--font-body); color: var(--grey-700); background: none; border: 0; white-space: nowrap;
}
.hub-tab::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.hub-tab:hover { color: var(--ink); }
.hub-tab[aria-selected="true"] { color: var(--ink); }
.hub-tab[aria-selected="true"]::after { background: var(--ink); }

.hub-field { display: grid; gap: .35rem; min-width: 0; }
.hub-field > label, .hub-label, .idp-new-goals legend, .idp-diet-set legend { font-size: .875rem; font-weight: 600; }
.hub-hint { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--grey-700); }
:where(.hk, .idp, .ed-dialog) :where(input[type="url"], input[type="date"], input[type="search"], select, textarea) {
  width: 100%; min-height: 44px; padding: .55rem .8rem; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-ctl); transition: border-color .15s;
}
:where(.hk, .idp, .ed-dialog) textarea { min-height: 5rem; resize: vertical; line-height: 1.45; }
:where(.hk, .idp, .ed-dialog) select { padding-inline-end: 2rem; cursor: pointer; }
:is(.hk, .idp, .ed-dialog) :is(input, select, textarea):focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(29 29 29 / .08); }
:where(.hk, .idp, .ed-dialog) input[type="file"]:not(.sr-only) { width: 100%; min-height: 44px; padding: .45rem 0; font: inherit; font-size: .875rem; }
.hub-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
.hub-small { min-height: 38px; padding: .3rem .85rem; font-size: .8125rem; }
.hub-icon-btn {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--grey-700); background: transparent; border: 0; border-radius: 50%; transition: background-color .15s, color .15s;
}
.hub-icon-btn:hover:not(:disabled) { color: var(--ink); background: var(--mist); }
.hub-icon-btn:disabled { opacity: .35; cursor: default; }
.hub-icon-btn svg { width: 1.05rem; height: 1.05rem; }
.hub-icon-btn.is-danger:hover:not(:disabled) { color: #b00020; background: #fbe9ec; }
:is(.btn-primary, .btn-ghost):disabled { opacity: .5; cursor: not-allowed; }
:is(.hk, .idp, .ed-dialog) .field-error:empty { display: none; }

/* A short message at the bottom of the screen ("Saved.", an error) */
.hub-toast {
  position: fixed; inset-inline: 0; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
  width: fit-content; max-width: calc(100% - 2rem); margin: 0 auto; padding: .7rem 1.1rem;
  font-size: .9375rem; font-weight: 600; color: var(--paper); background: var(--ink); border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgb(20 20 19 / .5);
  opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.hub-toast.is-on { opacity: 1; transform: none; }
.hub-toast.is-error { background: #b00020; }
.hub-toast:empty { display: none; }

/* --------------------------------------------------------- 2. HOME KITCHEN */
.hk { width: min(100%, var(--container)); margin-inline: auto; }
.hk-jump { position: sticky; top: 4.1rem; z-index: 6; display: flex; gap: var(--s2); margin: 0 0 var(--s5); padding: var(--s2) 0; background: rgb(250 249 245 / .94); overflow-x: auto; scrollbar-width: none; }
.hk-jump::-webkit-scrollbar { display: none; }
.hk-jump-link {
  flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: .3rem .95rem;
  font-size: .875rem; font-weight: 600; color: var(--grey-700); text-decoration: none; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s, color .15s;
}
.hk-jump-link:hover { color: var(--ink); border-color: var(--grey-300); }
.hk-part { scroll-margin-top: 8rem; }
.hk-part + .hk-part { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.hk-part-head { max-width: 52rem; margin-bottom: var(--s5); }
.hk-part-title { margin: 0 0 var(--s2); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 400; letter-spacing: -.02em; }
.hk-part-sub { margin: 0; font-size: var(--step-0); color: var(--grey-700); }
.hk .planner { width: 100%; scroll-margin-top: 8rem; }   /* below the header and the sticky jump menu */

/* Save and I cooked it, on the planner's meal cards and on the favourites */
.hk-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.hk-act {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .8rem; cursor: pointer;
  font: 600 .8125rem/1.2 var(--font-body); color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 999px; transition: border-color .15s, background-color .15s, color .15s;
}
.hk-act:hover:not(:disabled) { border-color: var(--ink); }
.hk-act:disabled { cursor: default; }
.hk-act-icon { display: grid; }
.hk-act-icon svg { width: 1rem; height: 1rem; }
.hk-act.is-on { color: var(--tone, var(--ink)); background: var(--tone-soft, var(--mist)); border-color: transparent; }
.hk-act.is-save.is-on { color: var(--brand-ink); background: var(--brand-soft); }
.hk-act.is-save.is-on svg { fill: currentColor; }

/* My meals */
.hk-meals > .hub-h { margin-top: var(--s6); }
.hk-split-bar { display: flex; gap: 2px; height: .65rem; margin: .45rem 0 .35rem; overflow: hidden; border-radius: 999px; }
.hk-split-seg { flex: var(--share, 1) 1 0; background: var(--tone); }
.hk-split-legend { display: grid; gap: .1rem; font-size: .8125rem; color: var(--grey-700); }
.hk-split-legend li { display: flex; align-items: center; gap: .4rem; }
.hk-split-n { margin-inline-start: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hk-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tone, var(--grey-500)); }

.hk-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s3); }
.hk-fav { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.hk-fav-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--tone); background: var(--tone-soft); }
.hk-fav-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk-fav-art svg { width: 2.5rem; height: 2.5rem; }
.hk-fav-body { display: grid; gap: .45rem; padding: var(--s3) var(--s4) var(--s4); }
.hk-fav-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; color: var(--grey-700); }
.hk-fav-title { margin: 0; font: 600 1rem/1.3 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.hk-fav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.hk-chip {
  display: inline-flex; align-items: center; min-height: 22px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600;
  color: var(--tone, var(--ink)); background: var(--tone-soft, var(--mist)); border-radius: 999px;
}
.hk-chip.is-level { color: var(--grey-700); background: var(--mist); }
.hk-link { font-size: .8125rem; font-weight: 600; color: var(--ink); }

.hk-history { display: grid; gap: var(--s4); }
.hk-month-title { margin: 0 0 var(--s2); font: 600 .8125rem/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); }
.hk-log { background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.hk-log-row { display: grid; grid-template-columns: auto 7.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .75rem; min-height: 48px; padding: .35rem .5rem .35rem var(--s4); }
.hk-log-row + .hk-log-row { border-top: 1px solid var(--line); }
.hk-log-day { font-size: .875rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.hk-log-title { min-width: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.hk-log-type { font-size: .8125rem; font-weight: 600; color: var(--tone); }
.hk-log-row > :last-child:not(.hub-icon-btn) { grid-column: span 2; }

/* Cooking skills */
.hk-skills-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.hk-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--s4); }
.hk-skill { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; transition: border-color .2s, box-shadow .25s; }
.hk-skill:hover { border-color: var(--grey-300); box-shadow: 0 14px 36px -18px rgb(20 20 19 / .22); }
.hk-skill-open { display: grid; gap: var(--s3); padding: 0 0 var(--s2); text-align: start; color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; }
.hk-skill-open:focus-visible { outline-offset: -3px; border-radius: 18px; }
.hk-skill-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; color: var(--grey-500); background: var(--mist); }
.hk-skill-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk-skill-media.is-poster img { object-fit: contain; background: var(--mist); }
.hk-skill-media .play-badge { position: relative; z-index: 1; }
.hk-skill-icon { display: grid; }
.hk-skill-icon svg { width: 2.25rem; height: 2.25rem; }
.hk-skill-media:not(.is-plain) .hk-skill-icon { display: none; }
.hk-skill-title { padding-inline: var(--s4); font: 600 1.0625rem/1.3 var(--font-body); overflow-wrap: anywhere; }
.hk-skill-ext { position: absolute; top: .6rem; inset-inline-end: .6rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--ink); background: rgb(250 249 245 / .95); border-radius: 50%; }
.hk-skill-ext svg { width: 1rem; height: 1rem; }
.hk-skill-open { position: relative; }
.hk-skill-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0 var(--s4); }
.hk-skill-text { margin: var(--s2) 0 0; padding: 0 var(--s4); font-size: .875rem; line-height: 1.5; color: var(--grey-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hk-skill-tools { display: flex; gap: .15rem; margin-top: auto; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-top: 1px solid var(--line); }
.hk-skill > :nth-last-child(1):not(.hk-skill-tools) { margin-bottom: var(--s4); }
.hk-form { display: grid; gap: var(--s3); max-width: 44rem; margin-bottom: var(--s5); }

/* ----------------------------------------------------------- 3. EDIT CARDS */
.ed-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  width: min(100%, var(--container)); margin: 0 auto var(--s4); padding: var(--s3) var(--s4);
  background: var(--white); border: 1px dashed var(--grey-300); border-radius: 16px;
}
.ed-bar-text { flex: 1 1 18rem; margin: 0; font-size: .875rem; color: var(--grey-700); }
.card-grid.is-editing .card { outline: 2px dashed var(--grey-300); outline-offset: 3px; }
.ed-tools {
  position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 2; display: flex; gap: 2px; padding: 3px;
  background: rgb(255 255 255 / .96); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px -8px rgb(20 20 19 / .35);
}
.ed-tool {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--ink); background: transparent; border: 0; border-radius: 9px;
}
.ed-tool:hover:not(:disabled) { background: var(--mist); }
.ed-tool:disabled { opacity: .3; cursor: default; }
.ed-tool svg { width: 1.05rem; height: 1.05rem; }
.ed-tool.is-danger:hover:not(:disabled) { color: #b00020; background: #fbe9ec; }
[dir="rtl"] .is-dir svg { transform: scaleX(-1); }   /* earlier / later follow the reading direction */
.ed-add {
  display: grid; place-items: center; align-content: center; gap: var(--s2); min-height: 14rem; padding: var(--s5); cursor: pointer;
  font: 600 1rem/1.2 var(--font-body); color: var(--grey-700); background: transparent;
  border: 2px dashed var(--grey-300); border-radius: var(--radius-card); transition: color .15s, border-color .15s, background-color .15s;
}
.ed-add:hover { color: var(--ink); border-color: var(--ink); background: var(--white); }
.ed-add-icon svg { width: 2rem; height: 2rem; }

/* The card editor */
.ed-dialog {
  width: min(100vw - 2rem, 48rem); max-width: none; max-height: min(100dvh - 2rem, 54rem); padding: 0;
  color: var(--ink); background: var(--paper); border: 0; border-radius: var(--radius-card); box-shadow: 0 30px 80px -30px rgb(20 20 19 / .6);
}
.ed-dialog[open] { display: flex; flex-direction: column; }
.ed-dialog::backdrop { background: rgb(20 20 19 / .45); }
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5) 0; }
.ed-title { margin: 0; font-size: var(--step-2); font-weight: 400; }
.ed-dialog .hub-tabs { flex: none; margin: var(--s2) var(--s5) 0; }
.ed-body { flex: 1; min-height: 12rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--s5); }
.ed-error { margin: 0 var(--s5); }
.ed-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--line); }
.ed-foot .hub-actions { margin: 0; }
.ed-texts { display: grid; gap: var(--s3); }
.ed-langs .hub-seg-btn { min-width: 3rem; justify-content: center; letter-spacing: .03em; }
.ed-filled { position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-ink); }
.ed-media { display: grid; gap: var(--s4); }
.ed-rows { display: grid; gap: var(--s2); }
.ed-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s3);
  padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: 14px;
}
.ed-row-main { display: grid; gap: .4rem; min-width: 0; }
.ed-row-label { margin: 0; font-size: .875rem; font-weight: 600; }
.ed-row-tools { display: flex; flex-direction: column; gap: 2px; }
.ed-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 16rem; }
.ed-thumb { position: relative; margin: 0; width: 4.5rem; }
.ed-thumb img { width: 4.5rem; height: 4.5rem; object-fit: cover; background: var(--mist); border-radius: 10px; }
.ed-thumb figcaption { margin-top: .15rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-align: center; color: var(--grey-700); }
.ed-thumb figcaption:empty { display: none; }
.ed-thumb-x {
  position: absolute; top: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; cursor: pointer;
  color: var(--paper); background: var(--ink); border: 2px solid var(--paper); border-radius: 50%;
}
.ed-thumb-x svg { width: .7rem; height: .7rem; }
.ed-add-box { display: grid; gap: var(--s3); padding: var(--s4); background: var(--mist); border-radius: 16px; }
.ed-add-box > .btn-primary, .ed-add-box > .ed-upload { justify-self: start; }
.ed-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ed-upload .ed-select { width: auto; }
.ed-inline-row { display: flex; gap: var(--s2); }
.ed-inline-row input { flex: 1; min-width: 0; }
.ed-kind { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--grey-700); background: var(--mist); border-radius: 12px; }
.ed-kind svg { width: 1.3rem; height: 1.3rem; }
.ed-kind.is-youtube { color: #c4302b; background: #fbe4e3; }
.ed-kind.is-pdf { color: #8a5a00; background: #fff0c7; }
.ed-url { font-size: .75rem; color: var(--grey-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- 4. THE IDP */
.idp { width: min(100%, var(--container)); margin-inline: auto; }
.idp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.idp-search-box { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.idp-search-icon { position: absolute; top: 50%; inset-inline-start: .8rem; display: grid; color: var(--grey-500); transform: translateY(-50%); pointer-events: none; }
.idp-search-icon svg { width: 1.05rem; height: 1.05rem; }
.idp .idp-search { padding-inline-start: 2.4rem; }
.idp-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--grey-700); }
.idp .idp-sort select { width: auto; min-height: 38px; padding-block: .3rem; font-size: .875rem; }
.idp-former { background: var(--mist); }
.idp-count { margin: 0 0 var(--s3); font-size: .875rem; color: var(--grey-700); }
.idp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--s4); }
.idp-card {
  display: grid; align-content: start; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); color: inherit; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.idp-card:hover { border-color: var(--grey-300); box-shadow: 0 14px 36px -18px rgb(20 20 19 / .25); }
.idp-card.is-former { opacity: .7; }
.idp-card-head { display: flex; align-items: center; gap: var(--s3); }
.idp-card-name { flex: 1; min-width: 0; }
.idp-avatar {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  font: 600 .9375rem/1 var(--font-body); color: var(--paper); background: var(--ink); border-radius: 50%;
}
.idp-avatar.is-big { width: 3.75rem; height: 3.75rem; font-size: 1.25rem; }
.idp-name { margin: 0; font: 600 1.0625rem/1.25 var(--font-body); overflow-wrap: anywhere; }
.idp-sub { margin: 0; font-size: .8125rem; color: var(--grey-700); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.idp-badge { flex: none; padding: .15rem .55rem; font-size: .75rem; font-weight: 700; color: var(--grey-700); background: var(--mist); border-radius: 999px; }
.idp-badge.is-due { color: var(--brand-ink); background: var(--brand-soft); }
.idp-muted { margin: 0; font-size: .875rem; color: var(--grey-500); }
.idp-diet-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.idp-diet-chip { padding: .15rem .6rem; font-size: .75rem; font-weight: 600; color: var(--ink); background: var(--mist); border-radius: 999px; }
.idp-diet-chip.is-allergy { color: #8a1c1c; background: #fbe4e1; }
.idp-diet-chip.is-more { color: var(--grey-700); }
.idp-card-goals { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.idp-card-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; font-size: .875rem; }
.idp-card-icon { display: grid; color: var(--grey-500); }
.idp-card-icon svg { width: 1.05rem; height: 1.05rem; }
.idp-card-talk { padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--grey-700); }
.idp-next { margin-inline-start: auto; font-weight: 600; color: var(--ink); }
.idp-areas { display: flex; gap: .25rem; }
.idp-area { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--area); background: var(--area-soft); border-radius: 50%; }
.idp-area svg { width: .95rem; height: .95rem; }

/* A player's plan */
.idp-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; margin-bottom: var(--s3); font-weight: 600; color: var(--ink); text-decoration: none; }
.idp-back:hover { text-decoration: underline; }
[dir="rtl"] .idp-back .btn-icon svg { transform: scaleX(-1); }
.idp-head { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.idp-head-id { display: flex; align-items: center; gap: var(--s4); }
.idp-head-name { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 400; }
.idp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--s3); margin: 0; }
.idp-fact { padding: var(--s3); background: var(--paper); border-radius: 12px; }
.idp-fact dt { font-size: .75rem; font-weight: 600; color: var(--grey-700); }
.idp-fact dd { margin: .1rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.idp-fact.is-due { background: var(--brand-soft); }
.idp-fact.is-due dd { color: var(--brand-ink); }
.idp-agreed { padding: var(--s3) var(--s4); background: #eef4ea; border-inline-start: 3px solid #4a7a2f; border-radius: 0 12px 12px 0; }
[dir="rtl"] .idp-agreed { border-radius: 12px 0 0 12px; }
.idp-agreed-title { margin: 0 0 .2rem; font-size: .8125rem; font-weight: 700; color: #33541f; }
.idp-agreed-text, .idp-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.idp-panel:focus { outline: none; }
.idp-group + .idp-group { margin-top: var(--s6); }
.idp-goals > .btn-primary, .idp-talks > .btn-primary, .idp-diet > .btn-ghost { margin-bottom: var(--s5); }
.idp-goals > .idp-form, .idp-talks > .idp-form { margin-bottom: var(--s5); }
.idp-goal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s3); }
.idp-goal {
  position: relative; display: grid; align-content: start; gap: .45rem; padding: var(--s4) var(--s4) var(--s3);
  background: var(--white); border: 1px solid var(--line); border-inline-start: 4px solid var(--area); border-radius: 16px;
}
.idp-goal.is-stopped { opacity: .75; }
.idp-goal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.idp-area-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem .15rem .4rem; font-size: .75rem; font-weight: 700; color: var(--area); background: var(--area-soft); border-radius: 999px; }
.idp-area-icon { display: grid; color: var(--area); }
.idp-area-icon svg { width: .95rem; height: .95rem; }
.idp-goal-title { margin: 0; font: 600 1.0625rem/1.35 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.idp-goal-measure { margin: 0; font-size: .875rem; color: var(--grey-700); overflow-wrap: anywhere; }
.idp-label { margin: 0; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--grey-700); }
.idp-goal-measure .idp-label { display: inline; }
.idp-goal-meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0; font-size: .8125rem; color: var(--grey-700); }
.idp-goal-meta .is-overdue { font-weight: 700; color: #b00020; }
.idp-item-tools { display: flex; justify-content: flex-end; gap: 2px; }
.idp .idp-status-select { width: auto; min-height: 34px; padding: .2rem 1.8rem .2rem .6rem; font-size: .8125rem; font-weight: 600; border-radius: 999px; }
.idp-status { padding: .15rem .6rem; font-size: .75rem; font-weight: 700; border-radius: 999px; color: var(--status); background: var(--status-soft); }

.idp-form { display: grid; gap: var(--s3); }
.idp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s3); }
.idp-form-grid.is-three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.idp-new-goals { display: grid; gap: var(--s3); margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.idp-new-goals legend { padding: 0 .3rem; }
.idp-new-goals > .btn-ghost { justify-self: start; }
.idp-new-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }

.idp-timeline { position: relative; display: grid; gap: var(--s4); }
.idp-talk { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s4); }
.idp-talk-date { position: relative; display: grid; align-content: start; gap: .35rem; padding-top: var(--s4); }
.idp-talk-date time { font: 500 1.0625rem/1.25 var(--font-display); }
.idp-kind { justify-self: start; padding: .15rem .55rem; font-size: .75rem; font-weight: 700; color: var(--grey-700); background: var(--mist); border-radius: 999px; }
.idp-talk.kind-goal_setting .idp-kind { color: var(--brand-ink); background: var(--brand-soft); }
.idp-talk-body { display: grid; gap: var(--s3); }
.idp-talk-part { display: grid; gap: .3rem; }
.idp-talk-part.is-agreed { padding: var(--s3) var(--s4); background: #eef4ea; border-radius: 12px; }
.idp-talk-part.is-agreed .idp-label { color: #33541f; }
.idp-talk-goals { display: grid; gap: .35rem; }
.idp-talk-goals li { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .9375rem; }
.idp-talk-goals .idp-status { margin-inline-start: auto; }

.idp-diet .hub-card { margin-bottom: var(--s4); }
.idp-diet-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.idp-diet-set legend { margin-bottom: .45rem; padding: 0; }

.idp-body { display: grid; gap: var(--s4); }
.idp-body .hub-tiles { margin-bottom: 0; }
.idp-body .hub-warn { margin: 0; }
.idp-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.idp-chart-head .hub-h { margin: 0; }
.idp-chart-wrap { width: 100%; }
.idp-chart { width: 100%; height: auto; overflow: visible; }
.idp-gridline { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.idp-axis { fill: var(--grey-500); font: 500 12px var(--font-body); font-variant-numeric: tabular-nums; }
.idp-line { fill: none; stroke: var(--brand-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.idp-dot { fill: var(--brand-ink); stroke: var(--white); stroke-width: 2; }
.idp-table-wrap { overflow-x: auto; }
.idp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.idp-table th { padding: .4rem .6rem; font-size: .75rem; font-weight: 700; text-align: start; color: var(--grey-700); border-bottom: 1px solid var(--line); }
.idp-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.idp-table tr:last-child td { border-bottom: 0; }
.idp-meals { display: grid; gap: var(--s3); }
.idp-meals > .btn-ghost { justify-self: start; }

/* The kitchen has no IDP: its menu link and the homepage button go */
:root[data-role="Kitchen_Staff"] [data-route="idp"] { display: none !important; }

/* ---------------------------------------------- 5. AREAS AND STATUSES */
.area-fuel      { --area: #b3122d; --area-soft: #fbe3e7; }
.area-recovery  { --area: #0b3a75; --area-soft: #e0e9f6; }
.area-hydration { --area: #0a6aa1; --area-soft: #dff0fa; }
.area-sleep     { --area: #4f3f8f; --area-soft: #ebe7f7; }
.area-matchday  { --area: #8a5a00; --area-soft: #fbefd2; }
.area-cooking   { --area: #4a5d23; --area-soft: #e4ebd0; }
.area-habits    { --area: #0f6b63; --area-soft: #dcf1ee; }
.area-other     { --area: #5c5a53; --area-soft: #ecebe5; }
.idp-status.is-active   { --status: #0b3a75; --status-soft: #e0e9f6; }
.idp-status.is-achieved { --status: #2f6b2f; --status-soft: #e2f1df; }
.idp-status.is-paused   { --status: #7a5c00; --status-soft: #fbefd2; }
.idp-status.is-stopped  { --status: #5c5a53; --status-soft: #ecebe5; }

/* ------------------------------------- 6. RESPONSIVE / TOUCH / MOTION / PRINT */
@media (max-width: 640px) {
  :is(.hk, .idp, .ed-dialog) :is(input, select, textarea) { font-size: 16px; }
  .hk-jump { top: 3.6rem; }
  .hk-log-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline-start: var(--s3); }
  .hk-log-day { grid-column: 2; grid-row: 1; }
  .hk-log-title { grid-column: 2; grid-row: 2; }
  .hk-log-type { display: none; }
  .hk-log-row .hk-dot { grid-row: 1 / span 2; }
  .hk-log-row .hub-icon-btn { grid-column: 3; grid-row: 1 / span 2; }
  .ed-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .ed-head, .ed-foot { padding-inline: var(--s4); }
  .ed-body { padding: var(--s4); }
  .ed-dialog .hub-tabs { margin-inline: var(--s4); gap: var(--s4); }
  .ed-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ed-row > .ed-thumbs, .ed-row > .ed-kind { grid-column: 1 / -1; }
  .ed-tools { top: .4rem; inset-inline-end: .4rem; }
  .idp-talk { grid-template-columns: 1fr; gap: var(--s2); }
  .idp-talk-date { grid-auto-flow: column; justify-content: start; align-items: center; padding-top: 0; }
  .hub-card { padding: var(--s4); }
  .idp-search-box { max-width: none; }
}

@media (pointer: coarse) {
  .hub-icon-btn, .ed-tool { width: 44px; height: 44px; }
  .hub-seg-btn, .hk-act, .hk-jump-link, .hub-small { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-toast, .idp-card, .hk-skill { transition: none; }
}

@media print {
  .hub-toast, .ed-bar, .ed-tools, .ed-add, .hk-jump, .hk-actions, .hk-skill-tools, .idp-item-tools, .idp-tools { display: none !important; }
  .idp-card, .idp-goal, .hub-card { break-inside: avoid; }
}

/* ----------------------------------------------------- 7. THE IDP'S SQUAD */
/* The traffic lights: fixed colours, the same whatever the theme (text on its tint passes WCAG AA) */
.is-green  { --light: #1d6b2f; --light-soft: #e2f2e5; --lamp: #2f9e4f; }
.is-yellow { --light: #6e4f00; --light-soft: #fff2c7; --lamp: #e9b100; }
.is-red    { --light: #a3001b; --light-soft: #fbe3e6; --lamp: #d7263d; }
.is-pending { --light: #5c5a53; --light-soft: #ecebe5; --lamp: #a9a69b; }

/* The count on the IDP's link in the menu: unseen feedback (a player), photos waiting (the performance staff) */
a[data-route="idp"][data-count]::after {
  content: attr(data-count); display: inline-block; min-width: 1.35em; margin-inline-start: .35em; padding: .05em .4em;
  font: 700 .7rem/1.35 var(--font-body); text-align: center; vertical-align: .15em; color: #fff; background: #b00020; border-radius: 999px;
}
.idp-count-pill {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-inline-start: .4rem; padding: 0 .4rem;
  font: 700 .75rem/1 var(--font-body); color: #fff; background: #b00020; border-radius: 999px;
}

/* The staff's views: Players · Squad · Meal review */
.idp-views { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.idp-views .hub-seg { justify-self: start; }
.idp-view { text-decoration: none; }
.idp-view[aria-current="page"] { color: var(--ink); background: var(--white); box-shadow: 0 1px 2px rgb(20 20 19 / .12); }
.idp-views .hub-warn { margin: 0; }
.idp-tile-link { color: inherit; text-decoration: none; transition: border-color .15s; }
.idp-tile-link:hover { border-color: var(--grey-300); }
.idp-avatar.is-small { width: 2.1rem; height: 2.1rem; font-size: .8125rem; }

/* Available or not, the injury */
.idp-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; font-size: .8125rem; font-weight: 700;
  color: var(--pill); background: var(--pill-soft); border-radius: 999px; white-space: nowrap;
}
.idp-pill.is-in { --pill: #1d6b2f; --pill-soft: #e2f2e5; }
.idp-pill.is-out { --pill: #a3001b; --pill-soft: #fbe3e6; }
.idp-pill.is-unknown { --pill: #5c5a53; --pill-soft: #ecebe5; }
.idp-pill-dot { width: .55rem; height: .55rem; background: currentColor; border-radius: 50%; }
.idp-status-out { display: inline-grid; justify-items: start; gap: .2rem; }
.idp-injury { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }

/* The next conversation: a date, and a flag when it is past or close */
.idp-flag { display: inline-block; padding: .15rem .55rem; font-size: .75rem; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.idp-flag.is-overdue { color: #fff; background: #b00020; }
.idp-flag.is-soon { color: #6e4f00; background: #fff2c7; }
.idp-flag.is-none { color: var(--grey-700); background: var(--mist); }
.idp-next-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.idp .idp-next-input { width: auto; min-width: 9.5rem; min-height: 38px; padding-block: .3rem; font-size: .875rem; }

/* The Squad dashboard: a table; on a phone, a card per player */
.idp-squad-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.idp-squad { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.idp-squad th, .idp-squad td { padding: .7rem .9rem; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--line); }
.idp-squad thead th { font-size: .75rem; font-weight: 700; color: var(--grey-700); white-space: nowrap; background: var(--paper); }
.idp-squad tbody tr:last-child > * { border-bottom: 0; }
.idp-squad tr.is-flagged > :first-child { box-shadow: inset 4px 0 0 #b00020; }
[dir="rtl"] .idp-squad tr.is-flagged > :first-child { box-shadow: inset -4px 0 0 #b00020; }
.idp-squad-player { font-weight: 400; }
.idp-squad-name { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.idp-squad-name:hover span:last-child { text-decoration: underline; }
.idp-squad-player .idp-sub { display: block; margin-top: .15rem; padding-inline-start: 2.7rem; }
.idp-squad-label { display: none; }
.idp-squad .idp-diet-chips { max-width: 16rem; }
.idp-dots { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.idp-dot-count {
  display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; font-size: .8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--light); background: var(--light-soft); border-radius: 999px; text-decoration: none;
}
a.idp-dot-count:hover { box-shadow: inset 0 0 0 1.5px var(--light); }

/* The Meal review: a masonry of photos, the ones waiting first */
.idp-review-intro { max-width: 46rem; margin-bottom: var(--s4); }
.idp-photo-grid { columns: 17rem auto; column-gap: var(--s4); }
.idp-photo {
  display: grid; break-inside: avoid; margin: 0 0 var(--s4); overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--lamp); border-radius: 18px;
}
.idp-photo.is-new { box-shadow: 0 0 0 2px var(--lamp); }
.idp-photo-img { display: block; width: 100%; padding: 0; cursor: zoom-in; background: var(--mist); border: 0; }
.idp-photo-img img { display: block; width: 100%; height: auto; min-height: 8rem; max-height: 26rem; object-fit: cover; }
.idp-photo-img.is-missing { min-height: 8rem; }
.idp-photo-img.is-missing img { visibility: hidden; }
.idp-photo-body { display: grid; gap: .55rem; padding: var(--s3) var(--s4) var(--s4); }
.idp-photo-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.idp-photo-player { margin-inline-end: auto; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.idp-photo-player:hover { text-decoration: underline; }
.idp-light-pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; font-size: .75rem; font-weight: 700;
  color: var(--light); background: var(--light-soft); border-radius: 999px;
}
.idp-badge.is-new { color: #fff; background: #b00020; }
.idp-badge.is-out { color: #a3001b; background: #fbe3e6; }
.idp-photo-meal { margin: 0; font-size: .875rem; color: var(--grey-700); }
.idp-photo-meal strong { color: var(--ink); }
.idp-photo-note { margin: 0; padding-inline-start: .6rem; font-size: .875rem; font-style: italic; border-inline-start: 3px solid var(--line); overflow-wrap: anywhere; }
.idp-photo-wait { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.idp-feedback { display: grid; gap: .25rem; padding: var(--s3); background: var(--light-soft); border-radius: 12px; }
.idp-feedback-text { margin: 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }

/* The staff's tools on a photo: three lights (each saves at once), the feedback, one-tap notes */
.idp-review { display: grid; gap: .55rem; }
.idp-lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.idp-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .35rem .5rem; cursor: pointer;
  font: 700 .8125rem/1.15 var(--font-body); color: var(--light); background: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--lamp) 45%, var(--line)); border-radius: 12px; transition: background-color .15s, border-color .15s, color .15s;
}
.idp-light:hover:not(:disabled) { background: var(--light-soft); border-color: var(--lamp); }
.idp-light[aria-pressed="true"], .idp-light[aria-pressed="true"]:hover:not(:disabled) { color: #fff; background: var(--light); border-color: var(--light); }
.idp-light:disabled { opacity: .55; cursor: default; }
.idp-light-lamp { flex: none; width: .8rem; height: .8rem; background: var(--lamp); border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / .7); }
.idp .idp-review textarea { min-height: 3.6rem; font-size: .875rem; }
.idp-quick { display: flex; flex-wrap: wrap; gap: .3rem; }
.idp-quick-btn {
  min-height: 32px; padding: .2rem .65rem; cursor: pointer; font: 600 .75rem/1.2 var(--font-body); color: var(--grey-700);
  background: var(--mist); border: 0; border-radius: 999px; transition: color .15s, background-color .15s;
}
.idp-quick-btn:hover { color: var(--ink); background: var(--line); }
.idp-review-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.idp-review-foot > .idp-sub { flex: 1 1 8rem; }

/* A photo large */
.idp-lightbox { width: min(96vw, 60rem); max-height: 92vh; padding: 0; overflow: hidden; background: var(--stage); border: 0; border-radius: 18px; }
.idp-lightbox::backdrop { background: rgb(20 20 19 / .75); }
.idp-lightbox img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; }
.idp-lightbox-x { position: absolute; top: .5rem; inset-inline-end: .5rem; color: #fff; background: rgb(20 20 19 / .55); }
.idp-lightbox-x:hover:not(:disabled) { color: #fff; background: rgb(20 20 19 / .8); }

/* A player's Health: available or not, the next conversation, supplements (phone first: one column) */
.idp-health { display: grid; gap: var(--s4); max-width: 46rem; }
.idp-health .hub-card .hub-h, .idp-photo-how { display: flex; align-items: center; gap: .5rem; }
.idp-h-icon { display: grid; flex: none; color: var(--brand-ink); }
.idp-h-icon svg { width: 1.2rem; height: 1.2rem; }
.idp-avail { display: grid; gap: var(--s3); border-inline-start: 5px solid #2f9e4f; }
.idp-avail .hub-h { margin-bottom: 0; }
.idp-avail.is-out { border-inline-start-color: #d7263d; }
.idp-switch {
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 56px; padding: .4rem 0; cursor: pointer;
  font: 600 var(--step-0)/1.3 var(--font-body); color: var(--ink); text-align: start; background: none; border: 0;
}
.idp-switch:disabled { cursor: default; opacity: .6; }
.idp-switch-track {
  position: relative; flex: none; width: 3.4rem; height: 2rem; background: #d7263d; border-radius: 999px; transition: background-color .2s var(--ease);
}
.idp-switch[aria-checked="true"] .idp-switch-track { background: #2f9e4f; }
.idp-switch-thumb {
  position: absolute; top: .2rem; inset-inline-start: .2rem; width: 1.6rem; height: 1.6rem; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgb(20 20 19 / .35); transition: inset-inline-start .2s var(--ease);
}
.idp-switch[aria-checked="true"] .idp-switch-thumb { inset-inline-start: 1.6rem; }
.idp-switch:focus-visible .idp-switch-track { outline: 3px solid var(--ink); outline-offset: 3px; }
.idp-avail-now:empty { display: none; }
.idp-avail > .btn-ghost { justify-self: start; }
.idp-out-form { padding: var(--s4); background: #fbe3e6; border-radius: 14px; }
.idp-next-card { display: grid; gap: var(--s2); }
.idp-next-card .hub-h { margin-bottom: 0; }
.idp-next-card .idp-flag { justify-self: start; }
.idp-next-big { margin: 0; font: 500 var(--step-2)/1.15 var(--font-display); }
.idp-supps { display: grid; gap: var(--s3); }
.idp-supps .hub-h { margin-bottom: 0; }
.idp-supp-list { display: grid; gap: .4rem; }
.idp-supp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) auto; align-items: center; gap: .5rem;
  padding: .35rem .35rem .35rem .8rem; background: var(--paper); border-radius: 12px;
}
.idp-supp-name { font-weight: 600; overflow-wrap: anywhere; }
.idp-supp-dose { font-size: .875rem; color: var(--grey-700); }
.idp .idp-supp-dose-input { min-height: 38px; padding-block: .3rem; font-size: .875rem; }
.idp-supp-add { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.idp-supp-common { display: flex; flex-wrap: wrap; gap: .35rem; }
.idp-supp-chip {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 38px; padding: .3rem .75rem .3rem .55rem; cursor: pointer;
  font: 600 .8125rem/1.2 var(--font-body); color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 999px; transition: border-color .15s, background-color .15s;
}
.idp-supp-chip:hover:not(:disabled) { border-color: var(--ink); }
.idp-supp-chip:disabled { opacity: .5; cursor: default; }
.idp-supp-chip .btn-icon svg { width: .9rem; height: .9rem; }
.idp-supp-own { display: grid; gap: var(--s2); }
.idp-supp-own .hub-actions { margin-top: 0; justify-content: flex-start; }
.idp-supp-safe { padding: var(--s3); background: #fff6d6; border-radius: 12px; color: #4d3b00; }
.idp-photos { display: grid; gap: var(--s4); }
.idp-photo-how { flex-wrap: wrap; margin: 0; }
.idp-photo-how a { font-weight: 600; color: var(--ink); }

/* The note about new feedback, at the bottom of any page */
.idp-notice {
  position: fixed; inset-inline: 0; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1200;
  display: flex; align-items: center; gap: .6rem; width: fit-content; max-width: calc(100% - 2rem); margin: 0 auto; padding: .5rem .5rem .5rem 1rem;
  font-size: .9375rem; color: var(--paper); background: var(--ink); border-radius: 16px; box-shadow: 0 16px 36px -14px rgb(20 20 19 / .6);
  opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.idp-notice.is-on { opacity: 1; transform: none; pointer-events: auto; }
.idp-notice-light { font-size: 1.25rem; line-height: 1; }
.idp-notice-text { font-weight: 600; }
.idp-notice-link { flex: none; padding: .35rem .7rem; font-weight: 700; color: var(--ink); background: var(--paper); border-radius: 10px; text-decoration: none; }
.idp-notice .idp-notice-x { color: var(--paper); }
.idp-notice .idp-notice-x:hover:not(:disabled) { color: var(--paper); background: rgb(250 249 245 / .15); }

@media (max-width: 760px) {
  .idp-squad-wrap { background: none; border: 0; border-radius: 0; overflow: visible; }
  .idp-squad, .idp-squad tbody, .idp-squad tr, .idp-squad th, .idp-squad td { display: block; }
  .idp-squad thead { display: none; }
  .idp-squad tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin-bottom: var(--s3); padding: var(--s4);
    background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  }
  .idp-squad tr.is-flagged { border-inline-start: 4px solid #b00020; }
  .idp-squad tr.is-flagged > :first-child, [dir="rtl"] .idp-squad tr.is-flagged > :first-child { box-shadow: none; }
  .idp-squad th, .idp-squad td { padding: 0; border: 0; }
  .idp-squad-player, .idp-squad-next { grid-column: 1 / -1; }
  .idp-squad-label { display: block; margin-bottom: .2rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); }
  [lang="ar"] .idp-squad-label { letter-spacing: 0; text-transform: none; }
  .idp-supp { grid-template-columns: minmax(0, 1fr) auto; }
  .idp-supp > .idp-supp-dose-input, .idp-supp > .idp-supp-dose { grid-column: 1; grid-row: 2; }
  .idp-supp > .hub-icon-btn { grid-column: 2; grid-row: 1 / span 2; }
  .idp-photo-grid { columns: 1; }
  .idp-notice { inset-inline: 1rem; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .idp-notice, .idp-switch-track, .idp-switch-thumb { transition: none; }
}

@media print {
  .idp-notice, .idp-views, .idp-review, .idp-supp-add { display: none !important; }
  .idp-photo, .idp-squad tr { break-inside: avoid; }
}