/* Carbon v11 tokens, Gray 10 theme (dark mode: Gray 100) */
:root{
  color-scheme: light;
  --bg:#f4f4f4; --layer1:#ffffff; --layer2:#f4f4f4; --layer-accent:#e0e0e0;
  --layer-hover1:#e8e8e8; --layer-hover2:#e8e8e8; --layer-selected:#e0e0e0; --layer-selected-hover:#d1d1d1; --layer-selected2:#e0e0e0; --layer-selected-hover2:#d1d1d1;
  --field1:#ffffff; --field2:#f4f4f4; --field3:#ffffff;
  --border-subtle0:#c6c6c6; --border-subtle1:#e0e0e0; --border-strong:#8d8d8d; --border-inverse:#161616;
  --text:#161616; --text2:#525252; --text-helper:#6f6f6f; --text-placeholder:#a8a8a8;
  --text-disabled:rgba(22,22,22,.25); --text-inverse:#ffffff; --text-error:#da1e28;
  --interactive:#0f62fe; --link:#0f62fe; --link-hover:#0043ce;
  --btn-primary:#0f62fe; --btn-primary-hover:#0050e6; --btn-primary-active:#002d9c;
  --btn-secondary:#393939; --btn-secondary-hover:#474747; --btn-secondary-active:#6f6f6f;
  --btn-tertiary:#0f62fe; --btn-tertiary-hover:#0050e6;
  --btn-danger:#da1e28; --btn-danger-hover:#b81921; --btn-danger-active:#750e13;
  --btn-disabled:#c6c6c6; --text-on-disabled:#8d8d8d;
  --focus:#0f62fe; --focus-inset:#ffffff;
  --highlight:#d0e2ff; --inverse-bg:#161616; --inverse-text:#ffffff;
  --tier1:#0f62fe; --tier2:#a6c8ff; --tier3:#c6c6c6;
  --success:#24a148; --error:#da1e28; --warning:#f1c21b; --info:#0043ce;
  --n-info-bg:#edf5ff; --n-success-bg:#defbe6; --n-warning-bg:#fcf4d6; --n-error-bg:#fff1f1;
  --n-info-border:rgba(0,67,206,.3); --n-success-border:rgba(36,161,72,.3); --n-warning-border:rgba(241,194,27,.5); --n-error-border:rgba(218,30,40,.3);
  --tag-gray-bg:#e0e0e0; --tag-gray:#161616; --tag-blue-bg:#d0e2ff; --tag-blue:#0043ce;
  --tag-purple-bg:#e8daff; --tag-purple:#6929c4; --tag-warm-bg:#e5e0df; --tag-warm:#3c3838;
  --toast-bg:#393939; --toast-text:#f4f4f4;
  --overlay:rgba(22,22,22,.5); --shadow:0 2px 6px rgba(0,0,0,.3);
  --h0:#ffffff; --h1:#edf5ff; --h2:#d0e2ff; --h3:#a6c8ff; --h4:#4589ff; --h5:#0f62fe; --h6:#002d9c;
  --ht0:#525252; --ht1:#161616; --ht2:#161616; --ht3:#161616; --ht4:#ffffff; --ht5:#ffffff; --ht6:#ffffff;
  --pad:32px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#161616; --layer1:#262626; --layer2:#393939; --layer-accent:#393939;
    --layer-hover1:#333333; --layer-hover2:#474747; --layer-selected:#393939; --layer-selected-hover:#4c4c4c; --layer-selected2:#525252; --layer-selected-hover2:#636363;
    --field1:#262626; --field2:#393939; --field3:#525252;
    --border-subtle0:#393939; --border-subtle1:#525252; --border-strong:#6f6f6f; --border-inverse:#f4f4f4;
    --text:#f4f4f4; --text2:#c6c6c6; --text-helper:#a8a8a8; --text-placeholder:#6f6f6f;
    --text-disabled:rgba(244,244,244,.25); --text-inverse:#161616; --text-error:#ff8389;
    --interactive:#4589ff; --link:#78a9ff; --link-hover:#a6c8ff;
    --btn-secondary:#6f6f6f; --btn-secondary-hover:#5e5e5e; --btn-secondary-active:#393939;
    --btn-tertiary:#ffffff; --btn-tertiary-hover:#f4f4f4;
    --btn-disabled:#525252; --text-on-disabled:#8d8d8d;
    --focus:#ffffff; --focus-inset:#161616;
    --highlight:#002d9c; --inverse-bg:#f4f4f4; --inverse-text:#161616;
    --tier1:#4589ff; --tier2:#002d9c; --tier3:#6f6f6f;
    --success:#42be65; --error:#fa4d56; --info:#4589ff;
    --n-info-bg:#262626; --n-success-bg:#262626; --n-warning-bg:#262626; --n-error-bg:#262626;
    --tag-gray-bg:#525252; --tag-gray:#f4f4f4; --tag-blue-bg:#002d9c; --tag-blue:#d0e2ff;
    --tag-purple-bg:#491d8b; --tag-purple:#e8daff; --tag-warm-bg:#565151; --tag-warm:#f7f3f2;
    --toast-bg:#f4f4f4; --toast-text:#161616;
    --overlay:rgba(0,0,0,.6); --shadow:0 2px 6px rgba(0,0,0,.8);
    --h0:#262626; --h1:#001141; --h2:#001d6c; --h3:#002d9c; --h4:#0043ce; --h5:#0f62fe; --h6:#4589ff;
    --ht0:#a8a8a8; --ht1:#f4f4f4; --ht2:#f4f4f4; --ht3:#f4f4f4; --ht4:#ffffff; --ht5:#ffffff; --ht6:#161616;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#161616; --layer1:#262626; --layer2:#393939; --layer-accent:#393939;
  --layer-hover1:#333333; --layer-hover2:#474747; --layer-selected:#393939; --layer-selected-hover:#4c4c4c; --layer-selected2:#525252; --layer-selected-hover2:#636363;
  --field1:#262626; --field2:#393939; --field3:#525252;
  --border-subtle0:#393939; --border-subtle1:#525252; --border-strong:#6f6f6f; --border-inverse:#f4f4f4;
  --text:#f4f4f4; --text2:#c6c6c6; --text-helper:#a8a8a8; --text-placeholder:#6f6f6f;
  --text-disabled:rgba(244,244,244,.25); --text-inverse:#161616; --text-error:#ff8389;
  --interactive:#4589ff; --link:#78a9ff; --link-hover:#a6c8ff;
  --btn-secondary:#6f6f6f; --btn-secondary-hover:#5e5e5e; --btn-secondary-active:#393939;
  --btn-tertiary:#ffffff; --btn-tertiary-hover:#f4f4f4;
  --btn-disabled:#525252; --text-on-disabled:#8d8d8d;
  --focus:#ffffff; --focus-inset:#161616;
  --highlight:#002d9c; --inverse-bg:#f4f4f4; --inverse-text:#161616;
  --tier1:#4589ff; --tier2:#002d9c; --tier3:#6f6f6f;
  --success:#42be65; --error:#fa4d56; --info:#4589ff;
  --n-info-bg:#262626; --n-success-bg:#262626; --n-warning-bg:#262626; --n-error-bg:#262626;
  --tag-gray-bg:#525252; --tag-gray:#f4f4f4; --tag-blue-bg:#002d9c; --tag-blue:#d0e2ff;
  --tag-purple-bg:#491d8b; --tag-purple:#e8daff; --tag-warm-bg:#565151; --tag-warm:#f7f3f2;
  --toast-bg:#f4f4f4; --toast-text:#161616;
  --overlay:rgba(0,0,0,.6); --shadow:0 2px 6px rgba(0,0,0,.8);
  --h0:#262626; --h1:#001141; --h2:#001d6c; --h3:#002d9c; --h4:#0043ce; --h5:#0f62fe; --h6:#4589ff;
  --ht0:#a8a8a8; --ht1:#f4f4f4; --ht2:#f4f4f4; --ht3:#f4f4f4; --ht4:#ffffff; --ht5:#ffffff; --ht6:#161616;
}

:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:calc(56px + env(safe-area-inset-top,0px)); }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:14px; line-height:20px; letter-spacing:.16px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button, input, select, textarea{ font-family:inherit; }
[hidden]{ display:none !important; }
svg{ display:block; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* UI shell header */
.shell{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  height:48px; display:flex; align-items:stretch;
  background:#161616; border-bottom:1px solid #393939; color:#f4f4f4;
}
.shell__name{
  display:flex; align-items:center; padding:0 32px 0 16px; white-space:nowrap;
  font-size:14px; line-height:18px; letter-spacing:.1px; color:#f4f4f4;
}
.shell__name b{ font-weight:600; margin-right:.3em; }
.shell__nav{ display:flex; position:relative; padding-left:16px; }
.shell__nav[hidden]{ display:none; }
.shell__nav::before{ content:''; position:absolute; left:0; top:12px; width:1px; height:24px; background:#393939; }
.shell__item{
  appearance:none; border:0; background:transparent; color:#c6c6c6; cursor:pointer;
  font-size:14px; line-height:18px; letter-spacing:.16px; padding:0 16px; position:relative;
}
.shell__item:hover{ background:#2c2c2c; color:#f4f4f4; }
.shell__item[aria-current="page"]{ color:#f4f4f4; background:#262626; }
.shell__item[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#0f62fe; }
.shell__item:focus-visible{ outline:2px solid #ffffff; outline-offset:-2px; }
.shell__status{ margin-left:auto; display:flex; align-items:center; gap:8px; padding:0 16px; font-size:12px; line-height:16px; letter-spacing:.32px; color:#c6c6c6; white-space:nowrap; }
.dot{ width:8px; height:8px; border-radius:50%; background:#8d8d8d; flex:none; }
.dot--ok{ background:#42be65; } .dot--warn{ background:#f1c21b; }
.shell__link{ margin-left:8px; padding:0 8px; height:32px; border:0; background:transparent; color:#78a9ff; font:inherit; cursor:pointer; }
.shell__link:hover{ color:#a6c8ff; background:#2c2c2c; }
.shell__link:focus-visible{ outline:2px solid #ffffff; outline-offset:-2px; }
.btn.login-local{ margin-top:16px; width:100%; white-space:normal; }
@media (max-width:671px){
  .shell__suffix, .shell__status-text{ display:none; }
  .shell__name{ padding-right:12px; }
  .shell__nav{ flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; padding-left:8px; }
  .shell__nav::-webkit-scrollbar{ display:none; }
  .shell__nav::before{ display:none; }
  .shell__item{ padding:0 10px; white-space:nowrap; flex:none; }
  .shell__status{ padding:0 12px 0 8px; flex:none; }
  .shell__link{ margin-left:4px; padding:0 4px; }
}

/* Page */
.page{ max-width:1584px; margin:0 auto; padding:var(--pad) var(--pad) 0; }
@media (max-width:1055px){ :root{ --pad:24px; } }
@media (max-width:671px){ :root{ --pad:16px; } }
.page-end{ height:64px; }
main:focus{ outline:none; }

/* Type */
.display{ font-size:42px; line-height:50px; font-weight:300; letter-spacing:0; margin:0 0 24px; max-width:16ch; }
@media (max-width:671px){ .display{ font-size:32px; line-height:40px; } }
.h-04{ font-size:28px; line-height:36px; font-weight:400; letter-spacing:0; margin:0 0 8px; }
.h-03{ font-size:20px; line-height:28px; font-weight:400; letter-spacing:0; margin:0 0 16px; }
.h-02{ font-size:16px; line-height:22px; font-weight:600; letter-spacing:0; margin:0 0 8px; }
.body-02{ font-size:16px; line-height:24px; letter-spacing:0; }
.lead{ font-size:16px; line-height:24px; color:var(--text2); margin:0 0 32px; max-width:62ch; }
.muted{ color:var(--text2); }
.helper{ font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text-helper); margin:4px 0 0; }
p{ margin:0; }

/* Buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; flex-shrink:0;
  min-height:48px; padding:13px 63px 13px 15px; margin:0;
  font-size:14px; line-height:18px; letter-spacing:.16px; font-weight:400;
  border:1px solid transparent; border-radius:0; cursor:pointer; text-align:left; white-space:nowrap;
  transition:background-color 70ms cubic-bezier(0,0,.38,.9);
}
.btn svg{ position:absolute; right:16px; top:50%; transform:translateY(-50%); fill:currentColor; }
.btn--md{ min-height:40px; padding-top:9px; padding-bottom:9px; }
.btn--sm{ min-height:32px; padding-top:6px; padding-bottom:6px; }
.btn--primary{ background:var(--btn-primary); color:#fff; }
.btn--primary:hover{ background:var(--btn-primary-hover); }
.btn--primary:active{ background:var(--btn-primary-active); }
.btn--secondary{ background:var(--btn-secondary); color:#fff; }
.btn--secondary:hover{ background:var(--btn-secondary-hover); }
.btn--secondary:active{ background:var(--btn-secondary-active); }
.btn--tertiary{ background:transparent; border-color:var(--btn-tertiary); color:var(--btn-tertiary); }
.btn--tertiary:hover{ background:var(--btn-tertiary-hover); color:var(--text-inverse); }
.btn--danger{ background:var(--btn-danger); color:#fff; }
.btn--danger:hover{ background:var(--btn-danger-hover); }
.btn--danger:active{ background:var(--btn-danger-active); }
.btn--ghost, .btn--danger-ghost{ background:transparent; color:var(--link); padding-right:15px; }
.btn--ghost svg, .btn--danger-ghost svg{ position:static; transform:none; margin-left:8px; }
.btn--ghost:hover{ background:var(--layer-hover1); color:var(--link-hover); }
.btn--danger-ghost{ color:var(--text-error); }
.btn--danger-ghost:hover{ background:var(--btn-danger); color:#fff; }
.btn--icon{ padding:0; width:32px; min-height:32px; justify-content:center; color:var(--text2); background:transparent; }
.btn--icon svg{ position:static; transform:none; }
.btn--icon:hover{ background:var(--layer-hover1); color:var(--text); }
.btn:focus-visible{ outline:none; border-color:var(--focus); box-shadow:inset 0 0 0 1px var(--focus), inset 0 0 0 2px var(--focus-inset); }
.btn:disabled, .btn:disabled:hover{ background:var(--btn-disabled); border-color:var(--btn-disabled); color:var(--text-on-disabled); cursor:not-allowed; }
.btn--ghost:disabled, .btn--ghost:disabled:hover, .btn--icon:disabled{ background:transparent; border-color:transparent; color:var(--text-disabled); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1px; }
.btn-row--spaced{ gap:16px; }

/* Form fields */
.field{ display:flex; flex-direction:column; margin-bottom:24px; }
.label{ font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text2); margin-bottom:8px; }
.input, .select, .textarea{
  width:100%; margin:0; border:0; border-bottom:1px solid var(--border-strong); border-radius:0;
  background:var(--field1); color:var(--text);
  font-size:14px; line-height:18px; letter-spacing:.16px;
  outline:2px solid transparent; outline-offset:-2px;
}
.on-layer .input, .on-layer .select, .on-layer .textarea, .modal .input, .modal .textarea{ background:var(--field2); }
.adder .input{ background:var(--field3); }
.input, .select{ height:40px; padding:0 16px; }
.input--sm{ height:32px; }
.textarea{ padding:11px 16px; resize:vertical; min-height:40px; }
.input:focus, .select:focus, .textarea:focus{ outline-color:var(--focus); }
.input::placeholder, .textarea::placeholder{ color:var(--text-placeholder); opacity:1; }
.input:disabled, .textarea:disabled, .select:disabled{ color:var(--text-disabled); border-bottom-color:transparent; cursor:not-allowed; }
.field--invalid .input, .field--invalid .select{ outline:2px solid var(--error); }
.form-req{ display:flex; gap:6px; align-items:center; font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text-error); margin-top:4px; }
.form-req svg{ fill:var(--error); flex:none; }
.select-wrap{ position:relative; }
.select{ appearance:none; -webkit-appearance:none; padding-right:48px; cursor:pointer; }
.select-wrap > svg{ position:absolute; right:16px; top:12px; fill:var(--text); pointer-events:none; }
.select option{ color:#161616; background:#ffffff; }
.checkbox{ display:flex; gap:8px; align-items:flex-start; cursor:pointer; font-size:14px; line-height:20px; }
.checkbox input{
  appearance:none; -webkit-appearance:none; flex:none; width:16px; height:16px; margin:2px 0 0;
  border:1px solid var(--text); border-radius:2px; background:transparent; display:grid; place-content:center; cursor:pointer;
}
.checkbox input::before{ content:''; width:9px; height:5px; border-left:2px solid var(--text-inverse); border-bottom:2px solid var(--text-inverse); transform:translateY(-1px) rotate(-45deg); opacity:0; }
.checkbox input:checked{ background:var(--text); }
.checkbox input:checked::before{ opacity:1; }
.checkbox input:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.optional{ color:var(--text-helper); }

/* Tags */
.tag{
  display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:24px; flex:none;
  font-size:12px; line-height:16px; letter-spacing:.32px; white-space:nowrap;
  background:var(--tag-gray-bg); color:var(--tag-gray);
}
.tag--sm{ min-height:18px; }
.tag--blue{ background:var(--tag-blue-bg); color:var(--tag-blue); }
.tag--purple{ background:var(--tag-purple-bg); color:var(--tag-purple); }
.tag--warm{ background:var(--tag-warm-bg); color:var(--tag-warm); }
.tag--outline{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong); }

/* Notifications */
.notif{
  display:flex; gap:12px; align-items:flex-start; margin:0 0 24px; padding:14px 16px 14px 13px;
  border:1px solid var(--nb); border-left:3px solid var(--na); background:var(--nbg); color:var(--text);
}
.notif > svg{ flex:none; fill:var(--na); margin-top:0; }
.notif__body{ flex:1; min-width:0; }
.notif__title{ font-weight:600; margin-right:4px; }
.notif__actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.notif__actions{ margin-left:-15px; }
.notif--info{ --na:var(--info); --nbg:var(--n-info-bg); --nb:var(--n-info-border); }
.notif--success{ --na:var(--success); --nbg:var(--n-success-bg); --nb:var(--n-success-border); }
.notif--warning{ --na:var(--warning); --nbg:var(--n-warning-bg); --nb:var(--n-warning-border); }
.notif--error{ --na:var(--error); --nbg:var(--n-error-bg); --nb:var(--n-error-border); }
.notif--warning > svg .inner{ fill:#161616; }

/* Progress indicator */
.progress{ display:flex; gap:4px; list-style:none; margin:0 0 32px; padding:0; }
.progress li{ flex:1 1 0; min-width:0; }
.progress__btn{
  display:flex; gap:8px; align-items:flex-start; width:100%; margin:0; padding:9px 16px 8px 0;
  background:none; border:0; border-top:1px solid var(--border-subtle0); color:var(--text);
  font-size:14px; line-height:18px; letter-spacing:.16px; text-align:left; cursor:pointer;
}
.progress__btn svg{ flex:none; fill:var(--interactive); margin-top:1px; }
.is-done .progress__btn, .is-current .progress__btn{ border-top:2px solid var(--interactive); padding-top:8px; }
.progress__btn:disabled{ cursor:default; color:var(--text2); }
.progress__btn:disabled svg{ fill:var(--border-strong); }
.is-current .progress__btn:disabled{ color:var(--text); }
.is-current .progress__btn svg, .is-done .progress__btn svg{ fill:var(--interactive); }
.progress__btn:not(:disabled):hover span{ text-decoration:underline; }
.is-current .progress__btn:hover span{ text-decoration:none; }
.progress__btn:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
@media (max-width:671px){
  .progress li:not(.is-current) .progress__btn span{ display:none; }
  .progress li.is-current{ flex-grow:3; }
}

/* Start */
.start{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px 96px; align-items:start; }
@media (max-width:1055px){ .start{ grid-template-columns:1fr; } }
.task-steps{ list-style:none; margin:0 0 16px; padding:0; max-width:64ch; }
.task-steps li{ display:grid; grid-template-columns:40px 1fr; gap:0; padding:16px 0; border-top:1px solid var(--border-subtle0); }
.task-steps li:last-child{ border-bottom:1px solid var(--border-subtle0); }
.task-steps .n{ font-size:20px; line-height:28px; font-weight:300; color:var(--text2); font-variant-numeric:tabular-nums; }
.task-steps h2{ font-size:16px; line-height:22px; font-weight:600; margin:3px 0 4px; }
.task-steps p{ color:var(--text2); }
.tile{ background:var(--layer1); padding:24px 16px 16px; }
@media (min-width:672px){ .tile{ padding:24px; } }
.start-form .btn--primary{ width:100%; }

/* Task head */
.task-head{ display:flex; gap:24px; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
.task-head__text{ max-width:72ch; }
.scenario{ font-size:16px; line-height:24px; color:var(--text2); }
.task-head__meta{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width:671px){ .task-head{ flex-direction:column; } .task-head__meta{ justify-content:flex-start; } }
.question{ display:flex; gap:8px 32px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; }
.question h2{ font-size:20px; line-height:28px; font-weight:400; margin:0; }
.question p{ color:var(--text2); max-width:70ch; }
.kbd-note{ font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text-helper); margin:0 0 16px; }

/* Board */
.board{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; margin-bottom:32px; }
@media (max-width:1055px){ .board{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:559px){ .board{ grid-template-columns:1fr; } }
.col{ display:flex; flex-direction:column; background:var(--layer1); border-top:3px solid var(--border-subtle1); min-height:320px; }
.col--onmisbaar{ border-top-color:var(--tier1); }
.col--handig{ border-top-color:var(--tier2); }
.col--nietnodig{ border-top-color:var(--tier3); }
.col--pool{ border-top-color:var(--text); }
.col__head{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; padding:16px 16px 12px; min-height:72px; }
.col__title{ font-size:16px; line-height:22px; font-weight:600; margin:0; }
.col__desc{ font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text2); margin-top:2px; }
.count{
  flex:none; min-width:24px; height:24px; padding:0 8px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--layer-accent); color:var(--text); font-size:12px; line-height:16px; font-variant-numeric:tabular-nums;
}
.col--pool .count{ background:var(--inverse-bg); color:var(--inverse-text); }
.col--pool .count.is-zero{ background:var(--tag-gray-bg); color:var(--tag-gray); }
.list{ list-style:none; margin:0; padding:0 8px 8px; flex:1; display:flex; flex-direction:column; gap:4px; min-height:136px; }
.list:empty::before{
  content:attr(data-empty); flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:120px; padding:16px; border:1px dashed var(--border-strong); color:var(--text-helper);
}
.list[data-tier="pool"]:empty::before{ border-color:var(--success); color:var(--text2); }
.card{
  display:flex; align-items:center; gap:8px; min-height:40px; padding:0 4px 0 12px; position:relative;
  background:var(--layer2); border:1px solid var(--layer2); color:var(--text);
  font-size:14px; line-height:18px; letter-spacing:.16px;
  cursor:grab; user-select:none; -webkit-user-select:none; outline:2px solid transparent; outline-offset:-2px;
}
@media (hover:hover){ .card:hover{ background:var(--layer-hover2); } }
.card:focus-visible{ outline-color:var(--focus); }
.card--ranked{ padding-left:12px; }
.card__rank{ flex:none; min-width:16px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.col--handig .card__rank{ font-weight:400; color:var(--text2); }
.card__label{ flex:1; min-width:0; padding:10px 0; overflow-wrap:anywhere; }
.card__grip{ flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; fill:var(--text-helper); }
@media (hover:hover){ .card:hover .card__grip{ fill:var(--text); } }
.card__remove{ flex:none; width:24px; height:24px; padding:0; border:0; background:transparent; color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.card__remove svg{ fill:currentColor; }
.card__remove:hover{ background:var(--layer-hover1); color:var(--text); }
.card__remove:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.card.is-ghost, .card.is-ghost.is-selected{ background:var(--highlight); border:1px dashed var(--interactive); }
.card.is-ghost > *{ visibility:hidden; }
.card.is-fallback, .card.is-dragging{ opacity:1 !important; background:var(--layer1) !important; box-shadow:var(--shadow); cursor:grabbing; }
.card.is-flash{ animation:flash 900ms cubic-bezier(.2,0,.38,.9); }
/* Selection (Carbon selectable tile + checkbox) */
.card__check{
  flex:none; width:16px; height:16px; margin:0; border:1px solid var(--border-strong); border-radius:2px; background:transparent;
  display:flex; align-items:center; justify-content:center; transition:background-color 70ms, border-color 70ms;
}
@media (hover:hover){ .card:hover .card__check{ border-color:var(--text); } }
.card__check::before{ content:''; width:9px; height:5px; border-left:2px solid var(--text-inverse); border-bottom:2px solid var(--text-inverse); transform:translateY(-1px) rotate(-45deg); opacity:0; }
.card.is-selected{ background:var(--layer-selected2); border-color:var(--text); }
@media (hover:hover){ .card.is-selected:hover{ background:var(--layer-selected-hover2); } }
.card.is-selected .card__check{ background:var(--text); border-color:var(--text); }
.card.is-selected .card__check::before{ opacity:1; }
.board.is-group-drag .card.is-selected:not(.is-ghost){ opacity:.35; }
.card__badge{
  position:absolute; top:-10px; right:-10px; min-width:24px; height:24px; padding:0 8px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--btn-primary); color:#fff; font-size:12px; line-height:16px; font-weight:600; font-variant-numeric:tabular-nums;
}
.col__select{ padding:0 8px 8px; }
.col__select .checkbox{ padding:4px 0 4px 13px; font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text2); align-items:center; }
.col__select .checkbox input{ margin:0; }
.col__select .checkbox.is-disabled{ color:var(--text-disabled); cursor:not-allowed; }
.col__select .checkbox input:disabled{ border-color:var(--border-subtle1); cursor:not-allowed; }
.checkbox input:indeterminate{ background:var(--text); }
.checkbox input:indeterminate::before{ opacity:1; width:8px; height:0; border-left:0; border-bottom:2px solid var(--text-inverse); transform:none; }
/* Batch actions (Carbon data table batch action bar) */
.actionbar.actionbar--batch{ background:var(--btn-primary); border-top-color:var(--btn-primary); color:#fff; padding-top:0; padding-bottom:env(safe-area-inset-bottom,0px); min-height:72px; }
.batch__summary{ color:#fff; font-size:14px; line-height:18px; letter-spacing:.16px; padding:15px 0; }
.batch__dests{ display:flex; flex-wrap:wrap; align-items:center; margin-left:auto; }
.batch__tools{ display:flex; align-items:center; }
.batch__tools::before{ content:''; width:1px; height:16px; background:rgba(255,255,255,.5); margin:0 4px; }
.btn--batch{ background:var(--btn-primary); color:#fff; padding-right:16px; padding-left:16px; min-height:48px; touch-action:manipulation; }
@media (hover:hover){ .btn--batch:hover{ background:var(--btn-primary-hover); } }
.btn--batch:active{ background:var(--btn-primary-active); }
.btn--batch:focus-visible{ border-color:#fff; box-shadow:inset 0 0 0 1px #fff; }
.btn--batch:disabled, .btn--batch:disabled:hover{ background:var(--btn-primary); border-color:transparent; color:rgba(255,255,255,.4); }
.btn--batch svg{ position:static; transform:none; margin-right:8px; }
.actionbar__status .status-warn{ display:inline-flex; }
.actionbar__status .status-warn svg{ fill:var(--warning); }
.actionbar__status .status-warn svg .inner{ fill:#161616; }
@keyframes flash{ 0%{ background:var(--highlight); } 100%{ background:var(--layer2); } }
body.is-dragging, body.is-dragging *{ cursor:grabbing !important; }
.adder{ padding:0 8px 8px; }
.adder form{ display:flex; flex-direction:column; gap:8px; padding:8px; background:var(--layer2); }
.adder .btn-row{ gap:8px; }
.adder .btn--ghost{ width:100%; }

/* Action bar */
.actionbar{
  position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:0 calc(var(--pad) * -1); padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--layer1); border-top:1px solid var(--border-subtle0);
}
.actionbar__status{ display:flex; gap:8px; align-items:center; color:var(--text2); }
.actionbar__status svg{ fill:var(--success); flex:none; }
.actionbar .btn-row{ gap:16px; margin-left:auto; }
.note-field{ max-width:880px; margin-bottom:32px; }

/* Finish */
.summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:32px; }
@media (max-width:1055px){ .summary{ grid-template-columns:1fr; } }
.summary .tile{ border-top:3px solid var(--tier1); }
.summary ol{ margin:0 0 12px; padding-left:24px; }
.summary li{ padding:4px 0; }
.done{ max-width:640px; padding:48px 0 64px; }
.done > svg{ fill:var(--success); margin-bottom:24px; }
.done .btn-row{ margin-top:32px; gap:16px; }

/* Results */
.res-head{ display:flex; gap:16px 32px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }
.res-head .h-04{ margin:0 0 4px; }
.toolbar{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.toolbar .field{ margin:0; min-width:200px; }
.toolbar .checkbox{ height:40px; align-items:center; }
.toolbar .checkbox input{ margin:0; }
.tabs{ display:flex; overflow-x:auto; margin-bottom:24px; }
.tab{
  appearance:none; flex:none; background:none; border:0; border-bottom:2px solid var(--border-subtle0);
  padding:11px 16px 9px; min-width:10rem; text-align:left; cursor:pointer;
  font-size:14px; line-height:18px; letter-spacing:.16px; color:var(--text2);
}
.tab:hover{ color:var(--text); border-bottom-color:var(--border-strong); }
.tab[aria-selected="true"]{ color:var(--text); font-weight:600; border-bottom-color:var(--interactive); }
.tab:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.switcher-wrap{ overflow-x:auto; margin-bottom:24px; }
.switcher{ display:inline-flex; }
.switch{
  appearance:none; flex:none; height:40px; padding:0 16px; margin:0; cursor:pointer; white-space:nowrap;
  background:transparent; color:var(--text2); border:1px solid var(--border-inverse); border-left-width:0;
  font-size:14px; line-height:18px; letter-spacing:.16px;
}
.switch:first-child{ border-left-width:1px; }
.switch:hover{ background:var(--layer-hover1); color:var(--text); }
.switch[aria-selected="true"]{ background:var(--inverse-bg); color:var(--inverse-text); }
.switch:focus-visible{ outline:2px solid var(--focus); outline-offset:-3px; box-shadow:inset 0 0 0 3px var(--focus-inset); }
.switcher--sm .switch{ height:32px; }
.res-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start; }
@media (max-width:1311px){ .res-grid{ grid-template-columns:1fr; } }
.legend{ display:flex; gap:8px 20px; flex-wrap:wrap; align-items:center; font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text2); margin-bottom:12px; }
.legend i{ display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-2px; }
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; font-size:14px; line-height:18px; letter-spacing:.16px; }
.table th{ background:var(--layer-accent); color:var(--text); font-weight:600; text-align:left; height:48px; padding:0 16px; white-space:nowrap; }
.table td{ background:var(--layer1); color:var(--text2); border-top:1px solid var(--border-subtle1); padding:15px 16px; vertical-align:middle; }
@media (hover:hover){ .table tbody tr:hover td{ background:var(--layer-hover1); color:var(--text); } }
.table td.lbl{ color:var(--text); }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table td.actions{ padding:8px 8px; white-space:nowrap; text-align:right; }
.table td.actions .btn{ vertical-align:middle; }
.table .rank{ width:48px; font-variant-numeric:tabular-nums; }
.bar{ display:flex; height:16px; min-width:140px; background:var(--layer-accent); }
.bar span{ height:100%; }
.bar span + span{ box-shadow:inset 1px 0 0 var(--layer1); }
.bar .b1{ background:var(--tier1); } .bar .b2{ background:var(--tier2); } .bar .b3{ background:var(--tier3); }
.hier{ background:var(--layer1); padding:16px; }
.hier__group{ margin-top:16px; padding-left:12px; border-left:3px solid var(--border-subtle1); }
.hier__group--1{ border-left-color:var(--tier1); }
.hier__group--2{ border-left-color:var(--tier2); }
.hier__group--3{ border-left-color:var(--tier3); }
.hier__group--x{ border-left-style:dashed; border-left-color:var(--border-strong); }
.hier__group h3{ font-size:14px; line-height:18px; font-weight:600; margin:0 0 4px; }
.hier__group ol{ margin:0; padding:0; list-style:none; }
.hier__group li{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.hier__group li span:last-child{ color:var(--text-helper); font-variant-numeric:tabular-nums; }
.section{ margin-top:48px; }
.notes{ list-style:none; margin:0; padding:0; max-width:88ch; }
.notes li{ padding:12px 0; border-top:1px solid var(--border-subtle0); }
.notes b{ font-weight:600; margin-right:8px; }
.heat{ table-layout:fixed; min-width:720px; }
.heat th:first-child{ width:28%; }
.heat td.hc{ padding:0; text-align:center; border-left:1px solid var(--bg); font-variant-numeric:tabular-nums; }
.heat td.hc span{ display:block; padding:15px 16px; }
@media (hover:hover){ .heat tbody tr:hover td.hc{ filter:brightness(.96); } }
.h0{ background:var(--h0) !important; color:var(--ht0) !important; } .h1{ background:var(--h1) !important; color:var(--ht1) !important; }
.h2{ background:var(--h2) !important; color:var(--ht2) !important; } .h3{ background:var(--h3) !important; color:var(--ht3) !important; }
.h4{ background:var(--h4) !important; color:var(--ht4) !important; } .h5{ background:var(--h5) !important; color:var(--ht5) !important; }
.h6{ background:var(--h6) !important; color:var(--ht6) !important; }
.heat td.hc--na{ background:var(--bg) !important; }
.hc--na span{ color:var(--text-helper); font-size:12px; }
.scale{ display:flex; align-items:center; gap:8px; font-size:12px; line-height:16px; color:var(--text2); margin-bottom:12px; flex-wrap:wrap; }
.scale span.sw{ display:inline-block; width:24px; height:12px; }
.empty{ padding:48px 0; max-width:56ch; }
.empty h2{ font-size:20px; line-height:28px; font-weight:400; margin:0 0 8px; }
.empty p{ color:var(--text2); margin-bottom:24px; }
.inline-loading{ display:flex; gap:8px; align-items:center; color:var(--text2); padding:32px 0; }
.spinner{ width:16px; height:16px; border:2px solid var(--border-subtle1); border-top-color:var(--interactive); border-radius:50%; animation:spin 690ms linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Cards editor */
.cfg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:32px; }
@media (max-width:1055px){ .cfg-grid{ grid-template-columns:1fr; } }
.cfg-grid .textarea.cards{ min-height:360px; line-height:24px; }

/* Modal */
.modal-overlay{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--overlay); }
.modal{ display:flex; flex-direction:column; width:min(36rem,100%); max-height:calc(100% - 32px); background:var(--layer1); color:var(--text); box-shadow:var(--shadow); }
.modal--lg{ width:min(72rem,100%); }
.modal__head{ position:relative; padding:16px 64px 8px 16px; }
.modal__label{ font-size:12px; line-height:16px; letter-spacing:.32px; color:var(--text2); margin-bottom:4px; }
.modal__title{ font-size:20px; line-height:28px; font-weight:400; margin:0; }
.modal__close{ position:absolute; top:0; right:0; width:48px; height:48px; padding:0; border:0; background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.modal__close svg{ fill:currentColor; }
.modal__close:hover{ background:var(--layer-hover1); }
.modal__close:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.modal__body{ padding:8px 16px 32px; overflow:auto; flex:1; }
.modal__body p + p{ margin-top:12px; }
.modal__foot{ display:flex; }
.modal__foot .btn{ flex:1 1 50%; min-height:64px; align-items:flex-start; padding-top:14px; }
.detail-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:767px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-grid section{ background:var(--layer2); padding:16px; }
.detail-grid h3{ font-size:14px; line-height:18px; font-weight:600; margin:0 0 12px; }
.detail-grid h4{ font-size:12px; line-height:16px; letter-spacing:.32px; font-weight:400; color:var(--text2); margin:12px 0 4px; }
.detail-grid ol, .detail-grid ul{ margin:0; padding-left:20px; }
.detail-grid li{ padding:2px 0; }
.detail-grid .note{ margin-top:12px; color:var(--text2); font-style:italic; }
.copy-area{ width:100%; min-height:240px; font-family:'IBM Plex Mono', Menlo, Consolas, monospace; font-size:12px; line-height:16px; }

/* Toast */
.toasts{ position:fixed; z-index:120; top:calc(56px + env(safe-area-inset-top,0px)); right:16px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{
  pointer-events:auto; width:min(22rem, calc(100vw - 32px)); display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px 14px 13px; background:var(--toast-bg); color:var(--toast-text);
  border-left:3px solid var(--na); box-shadow:var(--shadow);
}
.toast svg{ flex:none; fill:var(--na); }
.toast--success{ --na:#42be65; } .toast--info{ --na:#4589ff; } .toast--error{ --na:#fa4d56; }

/* Settings */
.cfg-h{ margin:32px 0 4px; }
.cfg-sub{ margin-bottom:16px; }
.cfg-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1055px){ .cfg-grid--2{ grid-template-columns:1fr; } }
.cfg-tile-head{ display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-bottom:8px; }
.cfg-tile-head .label{ margin:0; }
.cfg-tile-head .checkbox{ align-items:center; }
.tile.is-off .field{ opacity:.55; }
.share-tile{ margin-bottom:8px; }
.share-tile > .muted{ margin:4px 0 16px; max-width:72ch; }
.share-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px; }
@media (max-width:1055px){ .share-grid{ grid-template-columns:1fr; } }
.share-grid .field{ margin:0; }
.inline-input{ display:flex; align-items:stretch; }
.inline-input .input{ flex:1; min-width:0; }
.inline-input .btn{ flex:none; }
.note-text{ display:block; margin-top:2px; }
.notes .helper{ margin-left:8px; }
.plist__code{ color:var(--text2); }
.heat__total{ box-shadow:inset -2px 0 0 var(--border-strong); }

/* Labels per breakpoint */
.lbl-sm{ display:none; }
@media (max-width:671px){ .lbl-lg{ display:none; } .lbl-sm{ display:inline; } }

/* Touch */
.card, .btn, .tierbar__tab, .tab, .switch{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media (pointer:coarse){
  .card__grip{ width:44px; height:44px; margin-right:-4px; touch-action:none; cursor:grab; }
  .kbd-note{ display:none; }
}
/* iOS zooms in on inputs under 16px */
@media (max-width:671px), (pointer:coarse){ .input, .select, .textarea{ font-size:16px; } }

/* Mobile column tabs */
.tierbar{ display:none; }
.pool-next{ display:none; }
@keyframes bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.35); color:var(--interactive); } 100%{ transform:scale(1); } }
@media (max-width:671px){
  html{ scroll-padding-top:calc(48px + 72px + env(safe-area-inset-top,0px)); scroll-padding-bottom:136px; }
  .tierbar{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px;
    position:sticky; top:calc(48px + env(safe-area-inset-top,0px)); z-index:30;
    margin:0 calc(var(--pad) * -1); padding:8px var(--pad) 0; background:var(--bg);
  }
  .tierbar__tab{
    --tc:var(--text); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:2px; min-width:0;
    min-height:60px; margin:0; padding:8px; border:0; border-top:3px solid var(--tc); border-radius:0;
    background:var(--layer-accent); color:var(--text2); font:inherit; text-align:left; cursor:pointer;
  }
  .tierbar__tab--onmisbaar{ --tc:var(--tier1); } .tierbar__tab--handig{ --tc:var(--tier2); } .tierbar__tab--nietnodig{ --tc:var(--tier3); }
  .tierbar__tab[aria-selected="true"]{ background:var(--layer1); color:var(--text); }
  .tierbar__tab:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
  .tierbar__label{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:16px; letter-spacing:.32px; }
  .tierbar__count{ display:inline-block; font-size:20px; line-height:24px; font-variant-numeric:tabular-nums; transform-origin:left center; }
  .tierbar__tab[aria-selected="true"] .tierbar__count{ font-weight:600; }
  .tierbar__count.is-bump{ animation:bump 600ms cubic-bezier(.2,0,.38,.9); }

  .board{ grid-template-columns:1fr; gap:0; margin-bottom:24px; }
  .board > .col:not(.is-mactive){ display:none; }
  .col{ min-height:0; border-top:0; }
  .col__head{ min-height:0; padding:12px 16px 8px; }
  .col__title, .col__head .count{ display:none; }
  .col__desc{ margin:0; font-size:14px; line-height:18px; letter-spacing:.16px; }
  .list{ min-height:96px; }
  .list:empty::before{ min-height:96px; }
  .card{ min-height:48px; }
  .col--pool .card__grip{ display:none; }
  .col--pool .card{ padding-right:12px; }
  .col--pool .list:empty, .col--pool:has(.list:empty) .col__select{ display:none; }
  .pool-next:not([hidden]){ display:block; padding:16px; margin:0 8px 8px; background:var(--layer2); }
  .pool-next p{ margin-bottom:12px; }
  .question{ margin-bottom:12px; }
  .question h2{ font-size:16px; line-height:22px; font-weight:600; }
  .question p{ font-size:14px; line-height:20px; }
  .task-head{ margin-bottom:20px; gap:12px; }
  .task-head .h-04{ font-size:24px; line-height:32px; margin-bottom:4px; }
  .task-head .scenario{ font-size:16px; line-height:24px; }
  .progress{ margin-bottom:20px; }

  /* Sticky bars: status line plus full-bleed buttons, as in Carbon modal footers */
  .actionbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; padding:0; align-items:center; }
  .actionbar__status{ grid-column:1 / -1; padding:8px var(--pad); font-size:12px; line-height:16px; letter-spacing:.32px; }
  .actionbar .btn-row{ grid-column:1 / -1; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:1px; margin:0; }
  .actionbar .btn-row .btn{ min-height:56px; padding:18px 44px calc(18px + env(safe-area-inset-bottom,0px)) 16px; }
  .actionbar .btn-row .btn svg{ top:28px; }
  .actionbar.actionbar--batch{ padding:0; min-height:0; }
  .batch__summary{ grid-column:1; grid-row:1; padding:12px var(--pad); }
  .batch__tools{ grid-column:2; grid-row:1; }
  .batch__tools::before{ display:none; }
  .batch__cancel{ min-height:48px; }
  .btn--batch-icon{ width:48px; padding:0; justify-content:center; }
  .btn--batch-icon svg{ margin:0; }
  .batch__dests{ grid-column:1 / -1; grid-row:2; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
  .batch__dests .btn--batch{ justify-content:center; text-align:center; white-space:normal; min-height:56px; padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px)); }
  .batch__dests .btn--batch + .btn--batch{ box-shadow:inset 1px 0 0 rgba(255,255,255,.3); }

  /* Results */
  .table--res thead{ display:none; }
  .table--res, .table--res tbody{ display:block; }
  .table--res tr{
    display:grid; grid-template-columns:24px minmax(0,1fr) auto; grid-template-areas:"rank lbl score" ". dist dist" ". adv pct";
    gap:8px; align-items:center; padding:12px 16px; background:var(--layer1); border-top:1px solid var(--border-subtle1);
  }
  .table--res td{ display:block; padding:0; border:0; background:none; width:auto; }
  .table--res .rank{ grid-area:rank; color:var(--text-helper); }
  .table--res .lbl{ grid-area:lbl; }
  .table--res .score{ grid-area:score; color:var(--text); font-weight:600; }
  .table--res .score .lbl-sm{ font-weight:400; color:var(--text-helper); font-size:12px; }
  .table--res .dist{ grid-area:dist; }
  .table--res .adv{ grid-area:adv; }
  .table--res .pct{ grid-area:pct; font-size:12px; line-height:16px; color:var(--text2); }
  .table--res .n{ display:none; }
  .table--res .bar{ min-width:0; }
  .ptable{ display:none; }
  .plist{ list-style:none; margin:0; padding:0; }
  .plist__item{ display:flex; gap:8px; align-items:flex-start; justify-content:space-between; padding:12px 0 12px 16px; background:var(--layer1); border-top:1px solid var(--border-subtle1); }
  .plist__main{ min-width:0; }
  .plist__main p{ margin:0; }
  .plist__name{ font-weight:600; }
  .plist__actions{ display:flex; flex:none; }
  .plist__actions .btn--icon{ width:40px; min-height:40px; }
  .heat{ min-width:520px; }
  .heat th:first-child, .heat td:first-child{ position:sticky; left:0; z-index:1; }
  .heat td:first-child{ background:var(--layer1); box-shadow:inset -1px 0 0 var(--border-subtle1); }
  .tabs .tab, .switch{ white-space:nowrap; }
  .tabs .tab{ flex:0 0 auto; min-width:0; padding-left:12px; padding-right:12px; }
  .heat th{ white-space:normal; }
  .switcher-wrap--task{ display:none; }

  /* Modals become sheets */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal{ width:100%; max-height:calc(100% - 48px - env(safe-area-inset-top,0px)); }
  .modal--lg{ height:calc(100% - env(safe-area-inset-top,0px)); max-height:none; }
  .modal__foot .btn{ padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
}
.plist{ display:none; }
.task-select{ display:none; }
@media (max-width:671px){ .plist{ display:block; } .task-select{ display:flex; margin-bottom:16px; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
}