/* ============================================================
   MEDSY — CONTROLS
   Extra form controls layered on the base set: slider, segmented
   control, file dropzone and tag input. Token-driven; the React
   primitives in components/controls/ apply these classes.
   ============================================================ */

/* ---------- SLIDER ---------- */
.v-slider{display:flex;align-items:center;gap:16px;width:100%}
/* The rail READS as 8px but the control must be GRABBABLE. Pointer events on a
   range input clip to the input's own box, so an 8px-tall input is an 8px drag
   target — a miss under a finger and short of the 24px pointer-target floor
   (WCAG 2.2 · 2.5.8). The rail and its fill are therefore real elements, and the
   input lies over them as a transparent 24px band: full-height hit area, and a
   rail that survives DOM-cloning exports (a vendor-pseudo rail does not). */
.v-slider-rail{
  position:relative;flex:1;height:8px;border-radius:var(--r-pill);background:var(--mint-100);
  display:flex;align-items:center;
}
.v-slider-fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);background:var(--forest);
  pointer-events:none;transition: width var(--dur-press) linear;
}
.v-slider-rail.is-disabled{opacity:.5}
.v-slider-input{
  -webkit-appearance:none;appearance:none;position:absolute;left:0;right:0;top:50%;
  width:100%;height:24px;margin:0;transform:translateY(-50%);
  cursor:pointer;outline:none;background:transparent;touch-action:none;
}
.v-slider-input::-webkit-slider-runnable-track{height:24px;background:transparent;border:none}
.v-slider-input::-moz-range-track{height:24px;background:transparent;border:none}
.v-slider-input::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--surface-card);
  border:2.5px solid var(--forest);box-shadow:var(--shadow-sm);cursor:pointer;transition: transform var(--dur-hover) var(--ease-spring);
}
.v-slider-input::-webkit-slider-thumb:hover{transform:scale(1.14)}
.v-slider-input::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--surface-card);border:2.5px solid var(--forest);box-shadow:var(--shadow-sm);cursor:pointer;transition: transform var(--dur-hover) var(--ease-spring);
}
.v-slider-input::-moz-range-thumb:hover{transform:scale(1.14)}
.v-slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--focus-ring)}
.v-slider-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--focus-ring)}
.v-slider-input:disabled{cursor:not-allowed}
/* Real monospace + tabular figures: the readout is what reserves space beside
   the track, so proportional figures made stacked sliders end at different x
   (measured 370px vs 367px). Inter's tabular figures keep the tracks aligned
   without leaving the brand face. */
.v-slider-val{font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem;color:var(--text-strong);min-width:4.5ch;text-align:right}

/* ---------- SEGMENTED CONTROL ---------- */
.v-segmented{display:inline-flex;background:var(--mint-50);border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:4px;gap:2px}
.v-segmented button{
  border:none;background:none;cursor:pointer;font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:.9rem;
  color:var(--ink-soft);padding:.55em 1.15em;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:.5em;
  transition: color var(--dur-control),background var(--dur-control),box-shadow var(--dur-control);white-space:nowrap;
}
.v-segmented button:hover{color:var(--forest)}
.v-segmented button.active{background:var(--surface-card);color:var(--forest);box-shadow:var(--shadow-xs);animation: vd-pop-in var(--dur-control) var(--ease-spring)}
.v-segmented button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.v-segmented button .v-icon{width:1.05em;height:1.05em}

/* ---------- FILE DROPZONE ---------- */
.v-dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  padding:40px 28px;border:2px dashed rgba(var(--forest-rgb),.3);border-radius:var(--r-lg);
  background:var(--mint-50);color:var(--ink-soft);cursor:pointer;transition: border-color var(--dur-control) var(--ease-standard),background var(--dur-control),transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control);
}
.v-dropzone:hover{border-color:var(--forest);background:var(--mint-100)}
.v-dropzone.dragging{border-color:var(--forest);background:var(--mint-100);transform:scale(1.01);box-shadow:var(--shadow-sm)}
.v-dropzone:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-dropzone-ico{width:60px;height:60px;border-radius:50%;background:var(--surface-card);border:1px solid var(--line-mint);display:grid;place-items:center;color:var(--forest);transition: transform var(--dur-overlay) var(--ease-spring)}
.v-dropzone:hover .v-dropzone-ico{transform:translateY(-3px)}
.v-dropzone.dragging .v-dropzone-ico{transform:scale(1.14)}
/* align-items:center shrink-wraps a bare flex child to its narrowest line, so the
   title used to wrap mid-phrase and collide with the hint. Stretch the copy block. */
.v-dropzone-copy{align-self:stretch;display:grid;gap:2px;min-width:0}
.v-dropzone-title{font-weight:var(--fw-semibold);color:var(--text-strong);text-wrap:balance}
.v-dropzone-hint{font-size:.85rem;color:var(--ink-faint)}

/* ---------- TAG INPUT ---------- */
.v-taginput{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface-card);
  transition: border-color var(--dur-control),box-shadow var(--dur-control);cursor:text;
}
.v-taginput:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-tag{display:inline-flex;align-items:center;gap:6px;background:var(--mint-100);color:var(--forest);border:1px solid var(--line-mint);border-radius:var(--r-pill);padding:.3em .35em .3em .85em;font-size:.85rem;font-weight:var(--fw-semibold);animation: vd-pop-in var(--dur-control) var(--ease-spring) both}
/* 24px is the floor for a pointer target (WCAG 2.2 · 2.5.8); the glyph stays 13px
   and the extra 4px is transparent, so the chip looks identical and hits right. */
.v-tag button{border:none;background:none;cursor:pointer;color:var(--forest);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;transition: var(--dur-hover);padding:0}
.v-tag button:hover{background:var(--mint-300)}
.v-tag button .v-icon{width:13px;height:13px}
.v-taginput-field{flex:1;min-width:90px;border:none;outline:none;font:inherit;color:var(--ink);background:none;padding:4px}
.v-taginput-field::placeholder{color:var(--ink-faint)}

/* ---------- SEARCH BAR ---------- */
.v-search{position:relative;display:flex;align-items:center;width:100%}
.v-search-ico{position:absolute;left:15px;width:18px;height:18px;color:var(--ink-faint);pointer-events:none}
.v-search-input{width:100%;font:inherit;color:var(--ink);background:var(--surface-card);border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:.7em 2.6em .7em 2.7em;transition: border-color var(--dur-control),box-shadow var(--dur-control)}
.v-search-input::placeholder{color:var(--ink-faint)}
.v-search-input::-webkit-search-cancel-button,.v-search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.v-search-input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-search-clear{position:absolute;right:10px;width:26px;height:26px;border-radius:50%;border:none;background:var(--mist);color:var(--ink-soft);
  cursor:pointer;display:grid;place-items:center;transition: var(--dur-hover)}
.v-search-clear:hover{background:var(--mint-100);color:var(--forest)}
.v-search-clear:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.v-search-clear .v-icon{width:14px;height:14px}

/* ---------- COMBOBOX (searchable dropdown) ---------- */
.v-combobox{position:relative;width:100%}
.v-combobox-control{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface-card);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:.7em 1em;cursor:text;transition: border-color var(--dur-control),box-shadow var(--dur-control)}
.v-combobox.open .v-combobox-control,.v-combobox-control:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-combobox-input{flex:1;border:none;outline:none;background:none;font:inherit;color:var(--ink);min-width:0}
.v-combobox-input::placeholder{color:var(--ink-faint)}
.v-combobox-chev{flex:none;width:16px;height:16px;color:var(--ink-faint);transition: transform var(--dur-control) var(--ease-spring)}
.v-combobox.open .v-combobox-chev{transform:rotate(180deg)}
.v-combobox-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:6px;max-height:260px;overflow-y:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition: var(--dur-control) var(--ease-standard)}
.v-combobox.open .v-combobox-panel{opacity:1;transform:none;pointer-events:auto}
.v-combobox-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:.94rem;color:var(--ink)}
.v-combobox-opt .v-icon{width:16px;height:16px;color:var(--forest-300);flex:none}
.v-combobox-opt.active,.v-combobox-opt:hover{background:var(--mint-100);color:var(--text-strong)}
.v-combobox-opt.selected{font-weight:var(--fw-semibold);color:var(--forest)}
.v-combobox-opt .chk{margin-left:auto;color:var(--forest);display:grid;place-items:center}
.v-combobox-opt .chk .v-icon{width:16px;height:16px;color:var(--forest)}
.v-combobox-empty{padding:16px 12px;text-align:center;color:var(--ink-faint);font-size:.88rem}
.v-combobox-hl{background:var(--butter);border-radius:3px;padding:0 1px}

/* ---------- SELECTABLE CARD (selection box) ---------- */
.v-selectcard{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;background:var(--surface-card);border:1.5px solid var(--line);
  border-radius:var(--r);padding:16px 18px;cursor:pointer;font:inherit;transition: border-color var(--dur-control) var(--ease-standard),background var(--dur-control),box-shadow var(--dur-control),transform var(--dur-control) var(--ease-spring)}
.v-selectcard:hover{border-color:var(--line-mint);background:var(--mint-50);transform:translateY(-2px)}
.v-selectcard:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-selectcard.selected{border-color:var(--forest);background:var(--mint-50);box-shadow:0 0 0 1px var(--forest) inset}
.v-selectcard-ico{flex:none;width:42px;height:42px;border-radius:var(--r-sm);background:var(--mint-100);border:1px solid var(--line-mint);
  display:grid;place-items:center;color:var(--forest)}
.v-selectcard-ico .v-icon{width:22px;height:22px}
.v-selectcard-body{flex:1;min-width:0}
.v-selectcard-title{display:block;font-weight:var(--fw-semibold);color:var(--text-strong);font-size:.98rem}
.v-selectcard-text{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin-top:3px}
.v-selectcard-mark{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition: var(--dur-hover) var(--ease-spring)}
.v-selectcard-mark.radio{border-radius:50%}
.v-selectcard.selected .v-selectcard-mark{background:var(--forest);border-color:var(--forest)}
.v-selectcard-mark .v-icon{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.4);transition: var(--dur-hover) var(--ease-spring)}
.v-selectcard.selected .v-selectcard-mark .v-icon{opacity:1;transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  .v-search-input,.v-combobox-control,.v-combobox-panel,.v-combobox-chev,.v-selectcard,.v-selectcard-mark,.v-selectcard-mark .v-icon{transition: none!important}
}

/* ---------- MULTISELECT (dropdown w/ chips) ---------- */
.v-ms{position:relative;width:100%}
.v-ms-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;min-height:48px;background:var(--surface-card);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;cursor:text;transition: border-color var(--dur-control),box-shadow var(--dur-control)}
.v-ms.open .v-ms-control,.v-ms-control:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-ms-chip{display:inline-flex;align-items:center;gap:6px;background:var(--mint-100);color:var(--forest);border:1px solid var(--line-mint);
  border-radius:var(--r-pill);padding:.25em .35em .25em .75em;font-size:.84rem;font-weight:var(--fw-semibold);max-width:100%;animation: vd-pop-in var(--dur-control) var(--ease-spring) both}
.v-ms-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-ms-chip button{border:none;background:none;cursor:pointer;color:var(--forest);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;padding:0;flex:none;transition: var(--dur-hover)}
.v-ms-chip button:hover{background:var(--mint-300)}
.v-ms-chip button .v-icon{width:12px;height:12px}
.v-ms-input{flex:1;min-width:80px;border:none;outline:none;background:none;font:inherit;color:var(--ink);padding:5px 2px}
.v-ms-input::placeholder{color:var(--ink-faint)}
.v-ms-chev{flex:none;width:16px;height:16px;color:var(--ink-faint);transition: transform var(--dur-control) var(--ease-spring);align-self:center}
.v-ms.open .v-ms-chev{transform:rotate(180deg)}
.v-ms-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:6px;max-height:264px;overflow-y:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition: var(--dur-control) var(--ease-standard)}
.v-ms.open .v-ms-panel{opacity:1;transform:none;pointer-events:auto}
.v-ms-opt{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;font-size:.94rem;color:var(--ink)}
.v-ms-opt.active,.v-ms-opt:hover{background:var(--mint-100);color:var(--text-strong)}
.v-ms-box{flex:none;width:20px;height:20px;border:1.5px solid rgba(var(--forest-rgb),.35);border-radius:6px;display:grid;place-items:center;transition: var(--dur-hover) var(--ease-spring)}
.v-ms-box .v-icon{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.4);transition: var(--dur-hover) var(--ease-spring)}
.v-ms-opt.sel .v-ms-box{background:var(--forest);border-color:var(--forest)}
.v-ms-opt.sel .v-ms-box .v-icon{opacity:1;transform:scale(1)}
.v-ms-empty{padding:16px 12px;text-align:center;color:var(--ink-faint);font-size:.88rem}

/* ---------- CHECKBOX / RADIO GROUP ---------- */
.v-group{display:flex;flex-direction:column;gap:2px}
.v-group.inline{flex-direction:row;flex-wrap:wrap;gap:18px}
.v-group-legend{font-size:.92rem;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:0;margin-bottom:8px}
.v-group .check,.v-group .radio{padding:7px 0}

@media (prefers-reduced-motion: reduce){
  .v-ms-control,.v-ms-panel,.v-ms-chev,.v-ms-box,.v-ms-box .v-icon{transition: none!important}
  .v-tag,.v-ms-chip,.v-segmented button.active{animation: none!important}
  .v-dropzone-ico{transition: none!important}
}

/* ---------- DATE PICKER ---------- */
.v-dp{position:relative;display:inline-block;font-size:.92rem}
.v-dp-trigger{display:inline-flex;align-items:center;gap:10px;min-width:224px;font:inherit;color:var(--ink);background:var(--surface-card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;transition: border-color var(--dur-hover) var(--ease-standard),box-shadow var(--dur-hover) var(--ease-standard)}
.v-dp-trigger .v-icon:first-child{color:var(--forest)}
.v-dp-trigger>span{flex:1;text-align:left}
.v-dp-trigger>.v-icon:last-child{transform:rotate(90deg);color:var(--ink-faint);transition: transform var(--dur-hover) var(--ease-standard)}
.v-dp.open .v-dp-trigger>.v-icon:last-child{transform:rotate(-90deg)}
.v-dp-trigger:hover{border-color:var(--line-mint)}
.v-dp-trigger:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-dp-ph{color:var(--ink-faint)}
.v-dp-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;background:var(--surface-card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:14px;animation: v-dp-pop var(--dur-overlay) var(--ease-spring) both;transform-origin:top left}
.v-dp-inline .v-dp-panel{position:static;animation: none;display:inline-block}
@keyframes v-dp-pop{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
.v-dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.v-dp-title{font-weight:var(--fw-semibold);font-size:.9rem;color:var(--text-strong)}
.v-dp-nav{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--surface-card);color:var(--ink-soft);cursor:pointer;transition: border-color var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard)}
.v-dp-nav:hover{border-color:var(--line-mint);color:var(--forest)}
.v-dp-nav:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.v-dp-grid{display:grid;grid-template-columns:repeat(7,34px);gap:2px}
.v-dp-dow{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:4px 0 6px}
.v-dp-day{font:inherit;font-size:.82rem;font-weight:500;color:var(--ink);width:34px;height:32px;border:none;border-radius:9px;background:transparent;cursor:pointer;transition: background var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard)}
.v-dp-day:hover:not(:disabled){background:var(--mint-100)}
.v-dp-day:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.v-dp-day.out{color:var(--ink-faint);opacity:.55}
.v-dp-day.today{box-shadow:inset 0 0 0 1.5px var(--mint)}
.v-dp-day.sel{background:var(--forest);color:#fff;font-weight:700}
.v-dp-day:disabled{color:var(--ink-faint);opacity:.3;cursor:not-allowed}
@media (prefers-reduced-motion: reduce){.v-dp-panel{animation: none}.v-dp-trigger,.v-dp-nav,.v-dp-day{transition: none}}


/* ============================================================
   PRESS STATES — sliders, segments, options and pickers
   Hover is not feedback on a touch screen, and a control that only
   responds to hover feels dead under a finger. Every interactive
   surface here answers a press with the same vocabulary the buttons
   use: small controls sink (translateY(1px) scale(.97)), lifted
   cards press back through their lift, and data cells dip in place.
   Presses are instant by design — no transition — so the response
   lands on touch-down rather than easing in after it.
   ============================================================ */
.v-slider-input:active::-webkit-slider-thumb{transform:scale(1.02);box-shadow:0 0 0 7px var(--focus-ring)}
.v-slider-input:active::-moz-range-thumb{transform:scale(1.02);box-shadow:0 0 0 7px var(--focus-ring)}
.v-segmented button:active,.v-dp-nav:active,.v-search-clear:active,.v-tag button:active,.v-ms-chip button:active{transform:translateY(1px) scale(.94)}
.v-dp-trigger:active,.v-selectcard:active{transform:translateY(1px) scale(.99)}
.v-combobox-opt:active,.v-ms-opt:active{background:var(--mint-200);transform:scale(.995)}
.v-dp-day:active:not(:disabled){transform:scale(.9)}
.v-dropzone:active{transform:scale(.99);border-color:var(--forest);background:var(--mint-100)}