/* =============================================================================
   WICK — FORMS LAYER
   forms.css · v2.0
   =============================================================================

   WHAT THIS IS
   An extension of design-system-v2.css covering every form control the product
   needs. It supersedes LAYER 4.19 of the design system: when this file is
   approved, fold it in there and delete the old `.field` block.

     <link rel="stylesheet" href="/css/design-system-v2.css">
     <link rel="stylesheet" href="/css/forms.css">

   FONT AWESOME
   Pages already load Font Awesome, so icons are used freely. Every icon must
   be wrapped in <span class="ic"> — that wrapper is what this file positions,
   never the <i> itself. This keeps the CSS working whether FA renders as a
   webfont <i> or swaps in an <svg> (the JS build rewrites the element but
   leaves the wrapper alone).

     <span class="ic"><i class="fa-solid fa-magnifying-glass"></i></span>

   Icons inside controls are decorative. They are hidden from assistive tech by
   `.ic { aria-hidden }` in markup — always add aria-hidden="true" to the <i>.

   SMART DEFAULTS  (section 15)
   The journal knows a lot before the person types: their last instrument, the
   session date, their usual size, the R multiple implied by entry and stop.
   A smart default is a value the form fills in that the person can accept by
   doing nothing. Three rules govern them:
     1. A prefilled value must be visibly marked as prefilled (`.smart-flag`).
     2. It must be undoable in one click, and the undo must be adjacent.
     3. A derived value (`.smart-calc`) is read-only and never submitted as if
        the person typed it.
   A default the person cannot see is a bug, not a convenience.

   CONTENTS
     1   Tokens
     2   Form layout
     3   Labels, hints, help
     4   Text inputs — sizes & states
     5   Affixes — icons, prefixes, suffixes, buttons
     6   Textarea & counter
     7   Select
     8   Checkbox & radio
     9   Switch
     10  Segmented control
     11  Stepper, range, rating
     12  Date & time
     13  File drop
     14  Search & combobox
     15  Smart defaults
     16  Validation
     17  Form actions & steps
   ========================================================================== */


/* =============================================================================
   1 — TOKENS
   Heights only. Colour, type and radius come from the design system.
   ========================================================================== */

:root{
  --in-h:38px;             /* default control height */
  --in-h-sm:32px;
  --in-h-lg:46px;          /* hero fields: the trade-entry sheet */
  --in-pad:11px;
  --in-gap:6px;            /* label → control */
  --in-bg:var(--canvas);   /* inputs sit BELOW the panel they're on */
  --in-br:var(--rule);
  --in-br-focus:var(--muted);
}


/* =============================================================================
   2 — FORM LAYOUT
   =============================================================================
   <form class="form">
     <fieldset class="form-group">
       <legend>Position</legend>
       <div class="field-row cols-2"> …two .field… </div>
     </fieldset>
     <div class="form-actions"> … </div>
   </form>

   `.field-row` is the ONLY way to put fields side by side. It collapses to one
   column below 560px, always — two 50% fields on a phone is never correct.
   ========================================================================== */

.form{display:flex;flex-direction:column;gap:var(--s-5)}
.form-group{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.form-group > legend{font-family:var(--f-display);font-size:var(--t-h3);font-weight:400;
                     letter-spacing:-.01em;padding:0;margin-bottom:var(--s-1)}
.form-group > .legend-sub{color:var(--faint);font-size:var(--t-xs);margin-top:-6px}
.form-group + .form-group{border-top:1px solid var(--rule);padding-top:var(--s-5)}

.field-row{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:560px){
  .field-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .field-row.grow-first{grid-template-columns:2fr 1fr}
  .field-row.grow-last{grid-template-columns:1fr 2fr}
}
.field{display:flex;flex-direction:column;margin:0}   /* overrides DS margin */
.field-inline{display:flex;align-items:center;gap:var(--s-3);justify-content:space-between}


/* =============================================================================
   3 — LABELS, HINTS, HELP
   =============================================================================
   <div class="field">
     <label for="entry">Entry price
       <span class="req" aria-hidden="true">*</span>
       <button type="button" class="help" aria-label="What counts as entry price">
         <span class="ic"><i class="fa-regular fa-circle-question" aria-hidden="true"></i></span>
       </button>
     </label>
     <input id="entry" …>
     <p class="hint" id="entry-hint">Lorem ipsum dolor sit amet</p>
   </div>

   REQUIRED: every control has a <label for>. If a hint exists, the control
   points at it with aria-describedby. `.optional` instead of `.req` when most
   fields in a form are required — mark the exception, not the rule.
   ========================================================================== */

.field > label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
               margin-bottom:var(--in-gap)}
.req{color:var(--loss)}
.optional{color:var(--faint);font-size:var(--t-2xs);margin-left:auto}
.help{display:grid;place-items:center;width:16px;height:16px;color:var(--faint);
      font-size:12px;transition:color var(--d-fast)}
.help:hover{color:var(--mark)}
.hint{color:var(--faint);font-size:var(--t-xs);margin-top:6px;line-height:1.4}


/* =============================================================================
   4 — TEXT INPUTS
   =============================================================================
   Defaults that need no class:
     · numeric fields get tabular mono figures automatically via [inputmode]
     · placeholders are examples, never labels
     · :disabled and [readonly] are styled distinctly — readonly is still
       selectable text, disabled is not interactive at all

   SPECIFICITY
   The base selector is wrapped in :where() so it carries (0,1,0). That is
   deliberate: composite controls (.time-parts, .stepper, .tokens) style their
   own inner inputs at (0,1,1) and must win without escalating. Do not unwrap
   this — a plain `.field input:not(…):not(…)` chain lands at (0,5,1) and
   silently forces width:100% and a border onto every nested segment.

   <input type="text" placeholder="NQ" autocomplete="off">
   <input type="text" inputmode="decimal" placeholder="20145.25">
   ========================================================================== */

.input,
.field :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
){
  width:100%;height:var(--in-h);background:var(--in-bg);
  border:1px solid var(--in-br);border-radius:var(--r);
  color:var(--text);padding:0 var(--in-pad);font:inherit;font-size:14.5px;
  transition:border-color var(--d-fast),background var(--d-fast)}

/* Numbers are numbers. No class needed — the input mode declares it. */
.field input[inputmode="decimal"],
.field input[inputmode="numeric"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.input--num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--rule-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--in-br-focus);background:var(--canvas)}

.field input:disabled,.field select:disabled,.field textarea:disabled{
  opacity:.45;cursor:not-allowed;background:var(--panel-2)}
.field input[readonly],.field textarea[readonly]{
  background:var(--panel-2);border-color:transparent;color:var(--muted);cursor:default}

/* Sizes. Apply to the .field so affixes inherit the height. */
.field-sm input,.field-sm select,.field-sm .input-wrap{height:var(--in-h-sm);font-size:13.5px}
.field-lg input,.field-lg select,.field-lg .input-wrap{height:var(--in-h-lg);font-size:16px}

/* Kill the browser's spinner on number inputs — it's never the right control.
   Use `.stepper` (section 11) when the person needs to nudge a value. */
.field input[type=number]{-moz-appearance:textfield}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}


/* =============================================================================
   5 — AFFIXES
   =============================================================================
   <div class="input-wrap has-left has-right">
     <span class="ic ic-left"><i class="fa-solid fa-dollar-sign" aria-hidden="true"></i></span>
     <input inputmode="decimal" placeholder="20145.25">
     <span class="unit">USD</span>
   </div>

   Variants:
     .ic-left / .ic-right        decorative icon inside the field
     .unit                       static text at the right edge (USD, %, R, pts)
     .addon                      bordered segment outside the field (https://)
     .in-btn                     an interactive button inside the field
   ========================================================================== */

.input-wrap{position:relative;display:flex;align-items:center;width:100%;height:var(--in-h)}
.input-wrap > input,.input-wrap > select{height:100%}
.input-wrap .ic{position:absolute;display:grid;place-items:center;width:34px;height:100%;
                color:var(--faint);font-size:13px;pointer-events:none;z-index:1}
.input-wrap .ic-left{left:0}
.input-wrap .ic-right{right:0}
.input-wrap.has-left > input{padding-left:34px}
.input-wrap.has-right > input{padding-right:34px}

.input-wrap .unit{position:absolute;right:var(--in-pad);color:var(--faint);
                  font-family:var(--f-num);font-size:var(--t-xs);pointer-events:none}
.input-wrap.has-unit > input{padding-right:52px}

/* Interactive affix: clear, reveal password, copy, calendar picker. */
.input-wrap .in-btn{position:absolute;right:4px;width:30px;height:30px;border-radius:var(--r);
                    display:grid;place-items:center;color:var(--faint);font-size:13px;
                    transition:color var(--d-fast),background var(--d-fast)}
.input-wrap .in-btn:hover{color:var(--text);background:var(--panel-2)}
.input-wrap.has-btn > input{padding-right:38px}

/* Bordered addon, outside the field. */
.input-group{display:flex;align-items:stretch;width:100%}
.input-group > .addon{display:flex;align-items:center;padding:0 var(--in-pad);
  background:var(--panel-2);border:1px solid var(--in-br);color:var(--muted);
  font-size:var(--t-sm);white-space:nowrap}
.input-group > .addon:first-child{border-radius:var(--r) 0 0 var(--r);border-right:0}
.input-group > .addon:last-child{border-radius:0 var(--r) var(--r) 0;border-left:0}
.input-group > input{border-radius:0}
.input-group > :first-child:not(.addon){border-radius:var(--r) 0 0 var(--r)}
.input-group > :last-child:not(.addon){border-radius:0 var(--r) var(--r) 0}


/* =============================================================================
   6 — TEXTAREA & COUNTER
   =============================================================================
   <div class="field">
     <label for="notes">What were you thinking?</label>
     <textarea id="notes" rows="4" maxlength="500"></textarea>
     <div class="field-foot">
       <p class="hint">Lorem ipsum dolor sit amet</p>
       <span class="counter"><b>124</b>/500</span>
     </div>
   </div>
   Vertical resize only — horizontal resize breaks the grid.
   ========================================================================== */

.field textarea{height:auto;min-height:88px;padding:10px var(--in-pad);
                line-height:1.5;resize:vertical}
.field textarea.autogrow{resize:none;overflow:hidden}
.field-foot{display:flex;align-items:flex-start;justify-content:space-between;
            gap:var(--s-3);margin-top:6px}
.field-foot .hint{margin-top:0}
.counter{color:var(--faint);font-family:var(--f-num);font-size:var(--t-2xs);
         white-space:nowrap;flex:none}
.counter b{color:var(--muted);font-weight:400}
.counter.is-near b{color:var(--mark)}
.counter.is-over b{color:var(--loss)}


/* =============================================================================
   7 — SELECT
   =============================================================================
   Native <select>, restyled. The chevron is a Font Awesome icon in the wrapper,
   so it inherits our colours instead of the OS palette.

   <div class="select-wrap">
     <select id="setup"> … </select>
     <span class="ic ic-right"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></span>
   </div>
   ========================================================================== */

.select-wrap{position:relative;display:block;width:100%}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.select-wrap .ic{position:absolute;top:0;right:0;width:34px;height:100%;
                 display:grid;place-items:center;color:var(--faint);font-size:11px;
                 pointer-events:none}
.select-wrap select:focus + .ic{color:var(--text)}
/* The dropdown list itself is OS-rendered — force legible option colours. */
.select-wrap select option{background:var(--panel);color:var(--text)}
.field select[multiple]{height:auto;padding:6px;min-height:120px}


/* =============================================================================
   8 — CHECKBOX & RADIO
   =============================================================================
   The native input is hidden but still focusable and still the thing screen
   readers read. `.box` is the drawn control; the FA check lives inside it.

   <label class="check">
     <input type="checkbox" checked>
     <span class="box"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
     <span class="check-text">Lorem ipsum
       <small>Dolor sit amet consectetur</small></span>
   </label>

   Swap `.check` for `.radio` and type="radio"; the box becomes circular and
   the check is replaced by a dot.
   ========================================================================== */

.check,.radio{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
              padding:6px 0;font-size:14px}
.check input,.radio input{position:absolute;opacity:0;width:0;height:0}
.box{width:18px;height:18px;flex:none;margin-top:1px;border:1px solid var(--rule-2);
     border-radius:var(--r);background:var(--in-bg);display:grid;place-items:center;
     color:transparent;font-size:10px;transition:var(--d-fast)}
.radio .box{border-radius:50%}
.check:hover .box,.radio:hover .box{border-color:var(--muted)}
.check input:checked + .box,.radio input:checked + .box{
  background:var(--win);border-color:var(--win);color:var(--canvas)}
.radio input:checked + .box{background:var(--canvas);border-color:var(--win);color:var(--win)}
.radio .box::after{content:"";width:8px;height:8px;border-radius:50%;
                   background:currentColor;transform:scale(0);transition:transform var(--d-fast)}
.radio input:checked + .box::after{transform:scale(1)}
.check input:focus-visible + .box,.radio input:focus-visible + .box{
  outline:2px solid var(--mark);outline-offset:2px}
.check input:disabled ~ *,.radio input:disabled ~ *{opacity:.45}
.check-text small{display:block;color:var(--faint);font-size:var(--t-xs);margin-top:2px}

/* Card variant: the whole tile is the target. Use for 2–4 exclusive choices
   that need a description. */
.choice-grid{display:grid;gap:var(--s-2);grid-template-columns:1fr}
@media(min-width:560px){ .choice-grid.cols-2{grid-template-columns:repeat(2,1fr)} }
.choice{border:1px solid var(--rule);border-radius:var(--r);padding:13px 14px;
        background:var(--in-bg);align-items:flex-start;transition:var(--d-fast)}
.choice:hover{border-color:var(--rule-2)}
.choice:has(input:checked){border-color:var(--mark);background:var(--panel-2)}


/* =============================================================================
   9 — SWITCH
   =============================================================================
   Carried over from the design system, plus a compact variant. Use a switch
   for something that takes effect immediately; use a checkbox for something
   that takes effect on save.
   ========================================================================== */

.switch{display:flex;width:100%;align-items:center;justify-content:space-between;
        gap:var(--s-3);text-align:left;font-size:14px;cursor:pointer;padding:8px 0}
.switch > span > small{display:block;color:var(--faint);font-size:var(--t-xs);margin-top:2px}
.track{width:40px;height:22px;border-radius:var(--r-pill);background:var(--panel-2);
       border:1px solid var(--rule);position:relative;flex:none;transition:.18s}
.track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
              border-radius:50%;background:var(--muted);transition:.18s}
[aria-checked="true"] .track{background:var(--win);border-color:var(--win)}
[aria-checked="true"] .track::after{left:20px;background:var(--canvas)}
.switch-sm .track{width:32px;height:18px}
.switch-sm .track::after{width:12px;height:12px}
.switch-sm[aria-checked="true"] .track::after{left:16px}
.switch:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:var(--r)}


/* =============================================================================
   10 — SEGMENTED CONTROL
   =============================================================================
   Two to four exclusive options, all visible. Built from radios so it works
   with the keyboard and submits like a field.

   <div class="segmented" role="radiogroup" aria-label="Side">
     <label><input type="radio" name="side" value="long" checked><span>Long</span></label>
     <label><input type="radio" name="side" value="short"><span>Short</span></label>
   </div>

   `.segmented--side` colours the selected option with win/loss semantics —
   use it for direction only.
   ========================================================================== */

.segmented{display:inline-flex;width:100%;background:var(--in-bg);
           border:1px solid var(--rule);border-radius:var(--r);padding:3px;gap:2px}
.segmented label{flex:1;position:relative;display:grid;place-items:center;cursor:pointer}
.segmented input{position:absolute;opacity:0;width:0;height:0}
.segmented span{display:block;width:100%;text-align:center;padding:6px 10px;
                border-radius:2px;font-size:13.5px;color:var(--muted);transition:var(--d-fast)}
.segmented label:hover span{color:var(--text)}
.segmented input:checked + span{background:var(--text);color:var(--canvas);font-weight:500}
.segmented input:focus-visible + span{outline:2px solid var(--mark);outline-offset:2px}
.segmented--side input[value="long"]:checked + span{background:var(--win);color:var(--canvas)}
.segmented--side input[value="short"]:checked + span{background:var(--loss);color:var(--canvas)}


/* =============================================================================
   11 — STEPPER, RANGE, RATING
   =============================================================================
   STEPPER — for small integers the person nudges (contracts, lots, R target).
   <div class="stepper">
     <button type="button" class="step" aria-label="Decrease">
       <span class="ic"><i class="fa-solid fa-minus" aria-hidden="true"></i></span></button>
     <input inputmode="numeric" value="2" aria-label="Contracts">
     <button type="button" class="step" aria-label="Increase">
       <span class="ic"><i class="fa-solid fa-plus" aria-hidden="true"></i></span></button>
   </div>
   ========================================================================== */

.stepper{display:flex;align-items:stretch;height:var(--in-h);width:100%;
         border:1px solid var(--rule);border-radius:var(--r);background:var(--in-bg);
         overflow:hidden}
.stepper .step{width:38px;flex:none;display:grid;place-items:center;color:var(--muted);
               font-size:12px;transition:var(--d-fast)}
.stepper .step:hover{background:var(--panel-2);color:var(--text)}
.stepper input{flex:1;min-width:0;border:0;background:transparent;text-align:center;
               height:100%;font-family:var(--f-num);font-size:15px;color:var(--text)}
.stepper input:focus{outline:none}
.stepper:focus-within{border-color:var(--in-br-focus)}

/* RANGE — for a value with a felt magnitude (risk %, conviction, R target). */
.field input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:24px;
  background:transparent;padding:0;border:0;cursor:pointer}
.field input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:var(--r-pill);background:var(--panel-2)}
.field input[type="range"]::-moz-range-track{
  height:4px;border-radius:var(--r-pill);background:var(--panel-2)}
.field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;
  width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--mark);
  border:2px solid var(--canvas)}
.field input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--mark);border:2px solid var(--canvas)}
.range-head{display:flex;justify-content:space-between;align-items:baseline;
            margin-bottom:var(--in-gap)}
.range-val{font-family:var(--f-num);font-size:15px;color:var(--text)}
.range-scale{display:flex;justify-content:space-between;color:var(--faint);
             font-size:var(--t-2xs);font-family:var(--f-num)}

/* RATING — conviction, discipline, how well a setup matched the playbook.
   Radios under the hood so it submits a value and reads correctly. */
.rating{display:flex;gap:4px}
.rating input{position:absolute;opacity:0;width:0;height:0}
.rating label{cursor:pointer;width:30px;height:30px;display:grid;place-items:center;
              border:1px solid var(--rule);border-radius:var(--r);color:var(--faint);
              font-size:13px;transition:var(--d-fast)}
.rating label:hover{border-color:var(--mark);color:var(--mark)}
.rating input:checked + label{background:var(--mark);border-color:var(--mark);color:var(--canvas)}
.rating input:focus-visible + label{outline:2px solid var(--mark);outline-offset:2px}


/* =============================================================================
   12 — DATE & TIME
   =============================================================================
   Native pickers. They are better than anything we would build, they work
   offline, and they respect the person's locale. Only the calendar glyph is
   restyled.

   SECONDS
   `step="1"` adds a seconds segment to type="time" and type="datetime-local".
   Without it the browser shows hours and minutes only and silently drops the
   seconds on submit, so the attribute is mandatory wherever seconds matter.

     <input type="time" step="1" value="09:42:17">
     <input type="datetime-local" step="1" value="2026-09-19T09:42:17">

   Browser support for the seconds segment is uneven. Where the value must be
   exact, use `.time-parts` below instead — three plain numeric fields that
   behave identically everywhere and are faster to type into than a picker.
   ========================================================================== */

.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(.62) sepia(.1);cursor:pointer;opacity:.7}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
/* Seconds make the field wider — stop it collapsing inside a narrow column. */
.field input[type="time"][step],
.field input[type="datetime-local"][step]{min-width:0}

/* TIME PARTS — hh : mm : ss as three fields in one bordered shell.
   <div class="time-parts">
     <input inputmode="numeric" maxlength="2" placeholder="09" aria-label="Hours">
     <span class="sep">:</span>
     <input inputmode="numeric" maxlength="2" placeholder="42" aria-label="Minutes">
     <span class="sep">:</span>
     <input inputmode="numeric" maxlength="2" placeholder="17" aria-label="Seconds">
     <span class="ic"><i class="fa-regular fa-clock" aria-hidden="true"></i></span>
   </div>
   Each segment has its own aria-label; the shell is labelled by the .field's
   <label> pointing at the hours input. Focus advances automatically once a
   segment is full — see the JS hook `.time-parts` in the sample page. */
.time-parts{display:flex;align-items:center;flex-wrap:nowrap;gap:1px;
            height:var(--in-h);width:100%;max-width:100%;min-width:0;
            background:var(--in-bg);border:1px solid var(--rule);border-radius:var(--r);
            padding:0 var(--in-pad);overflow:hidden}
.time-parts:hover{border-color:var(--rule-2)}
.time-parts:focus-within{border-color:var(--in-br-focus)}
.time-parts input{width:2.4ch;flex:0 0 auto;min-width:0;border:0;background:transparent;
                  height:100%;padding:0;text-align:center;color:var(--text);
                  font-family:var(--f-num);font-variant-numeric:tabular-nums;
                  font-size:15px;letter-spacing:-.02em}
/* Neutralise the base :hover/:focus rules, which would otherwise repaint a
   border and background onto each segment inside the shell. */
.time-parts input:hover,.time-parts input:focus{border:0;background:transparent;outline:none}
.time-parts input:focus{color:var(--mark)}
.time-parts input::placeholder{color:var(--faint)}
.time-parts .sep{color:var(--faint);font-family:var(--f-num);font-size:15px;
                 flex:none;user-select:none}
.time-parts .ic{margin-left:auto;padding-left:8px;color:var(--faint);font-size:12px;
                flex:none;pointer-events:none}
.time-parts .tz{margin-left:auto;padding-left:8px;color:var(--faint);
                font-family:var(--f-num);font-size:var(--t-2xs);flex:none;
                white-space:nowrap}
.field-sm .time-parts{height:var(--in-h-sm)}
.field-sm .time-parts input{font-size:13.5px}
.field-lg .time-parts{height:var(--in-h-lg)}
.field-lg .time-parts input{font-size:17px}
.is-error .time-parts{border-color:var(--loss)}


/* =============================================================================
   13 — FILE DROP
   =============================================================================
   <label class="drop">
     <input type="file" accept="image/*,.csv">
     <span class="ic drop-ic"><i class="fa-solid fa-cloud-arrow-up" aria-hidden="true"></i></span>
     <span class="drop-title">Lorem ipsum dolor sit</span>
     <span class="drop-sub">PNG, JPG or CSV — up to 10 MB</span>
   </label>
   Add `.is-over` on dragover from JS. Attached files render as `.file-item`.
   ========================================================================== */

.drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
      border:1.5px dashed var(--rule-2);border-radius:var(--r);padding:26px 20px;
      background:var(--in-bg);cursor:pointer;transition:var(--d-fast)}
.drop:hover,.drop.is-over{border-color:var(--mark);background:var(--panel-2)}
.drop input[type="file"]{position:absolute;opacity:0;width:0;height:0}
.drop-ic{font-size:20px;color:var(--faint)}
.drop:hover .drop-ic,.drop.is-over .drop-ic{color:var(--mark)}
.drop-title{font-size:14px;color:var(--text)}
.drop-sub{font-size:var(--t-xs);color:var(--faint)}

.file-item{display:flex;align-items:center;gap:11px;padding:9px 11px;margin-top:var(--s-2);
           background:var(--panel-2);border:1px solid var(--rule);border-radius:var(--r);
           font-size:13.5px}
.file-item .ic{color:var(--faint);font-size:13px}
.file-item .file-size{margin-left:auto;color:var(--faint);font-family:var(--f-num);
                      font-size:var(--t-2xs)}
.file-item .file-x{color:var(--faint);width:22px;height:22px;display:grid;place-items:center;
                   border-radius:var(--r);font-size:11px}
.file-item .file-x:hover{color:var(--loss);background:var(--panel)}


/* =============================================================================
   14 — SEARCH & COMBOBOX
   =============================================================================
   The combobox is markup plus this CSS; the filtering is yours. Follow the
   ARIA pattern: input[role=combobox][aria-expanded][aria-controls], list
   [role=listbox], items [role=option][aria-selected].
   ========================================================================== */

.combo{position:relative}
.combo-list{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:var(--z-sticky);
            background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);
            padding:5px;max-height:240px;overflow-y:auto;
            box-shadow:0 12px 30px rgba(0,0,0,.45)}
.combo-list[hidden]{display:none}
.combo-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;
           font-size:14px;color:var(--muted);cursor:pointer}
.combo-opt:hover,.combo-opt[aria-selected="true"]{background:var(--panel-2);color:var(--text)}
.combo-opt .sym{font-family:var(--f-display);font-size:16px;color:var(--text)}
.combo-opt .combo-meta{margin-left:auto;color:var(--faint);font-size:var(--t-2xs);
                       font-family:var(--f-num)}
.combo-empty{padding:14px 10px;text-align:center;color:var(--faint);font-size:var(--t-xs)}

/* Token/tag input — setups, mistakes, free tags. */
.tokens{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:var(--in-h);
        padding:5px 6px;background:var(--in-bg);border:1px solid var(--rule);border-radius:var(--r)}
.tokens:focus-within{border-color:var(--in-br-focus)}
.tokens input{flex:1;min-width:90px;border:0;background:transparent;height:26px;
              font:inherit;font-size:14px;color:var(--text);padding:0 4px}
.tokens input:focus{outline:none}
.token{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);
       border:1px solid var(--rule);border-radius:2px;padding:3px 7px;
       font-size:var(--t-2xs);color:var(--muted)}
.token button{color:var(--faint);font-size:10px;display:grid;place-items:center}
.token button:hover{color:var(--loss)}


/* =============================================================================
   15 — SMART DEFAULTS
   =============================================================================
   FLAG — the field is prefilled and the person can undo it.
   <div class="field is-smart">
     <label for="inst">Instrument</label>
     <input id="inst" value="NQ">
     <p class="smart-flag">
       <span class="ic"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span>
       Prefilled from your last trade
       <button type="button" class="smart-undo">Clear</button>
     </p>
   </div>

   CHIPS — offered values the person taps instead of typing.
   <div class="smart-chips" role="group" aria-label="Suggested setups">
     <button type="button" class="smart-chip">Opening range break</button>
   </div>

   CALC — derived, read-only, recomputed as the person types. Never editable:
   if they disagree with it, they should change the inputs it comes from.
   <div class="smart-calc">
     <div><span>R multiple</span><b class="num win">+2.4R</b></div>
   </div>
   ========================================================================== */

.is-smart input,.is-smart select,.is-smart .input-wrap > input{
  border-color:color-mix(in srgb,var(--mark) 32%,transparent);
  background:color-mix(in srgb,var(--mark) 5%,var(--in-bg))}
.is-smart input:focus{border-color:var(--in-br-focus);
  background:var(--in-bg)}   /* once they engage, it's an ordinary field */

.smart-flag{display:flex;align-items:center;gap:7px;margin-top:6px;
            color:var(--mark);font-size:var(--t-xs)}
.smart-flag .ic{font-size:11px}
.smart-undo{margin-left:auto;color:var(--faint);font-size:var(--t-xs);
            text-decoration:underline;text-underline-offset:3px}
.smart-undo:hover{color:var(--text)}

.smart-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.smart-chip{border:1px dashed var(--rule-2);border-radius:var(--r-pill);padding:4px 11px;
            font-size:var(--t-xs);color:var(--muted);transition:var(--d-fast)}
.smart-chip:hover{border-style:solid;border-color:var(--mark);color:var(--mark)}
.smart-chip[aria-pressed="true"]{background:var(--mark);border-color:var(--mark);
                                 border-style:solid;color:var(--canvas)}

.smart-calc{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
            border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){ .smart-calc.cols-3{grid-template-columns:repeat(3,1fr)} }
.smart-calc > div{background:var(--panel-2);padding:11px 13px;display:flex;
                  flex-direction:column;gap:5px}
.smart-calc span{color:var(--faint);font-size:var(--t-2xs)}
.smart-calc b{font-size:17px;font-weight:500}

/* Autosave / pending indicator for forms that never submit. */
.autosave{display:inline-flex;align-items:center;gap:7px;color:var(--faint);font-size:var(--t-xs)}
.autosave .ic{font-size:10px}
.autosave.is-saved{color:var(--win)}
.autosave.is-saving .ic{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* =============================================================================
   16 — VALIDATION
   =============================================================================
   Error is the ONLY state that turns a field red, and only after the person
   has left it or tried to submit — never while they are still typing.

   <div class="field is-error">
     <label for="stop">Stop price</label>
     <input id="stop" aria-invalid="true" aria-describedby="stop-err">
     <p class="field-msg is-error" id="stop-err">
       <span class="ic"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span>
       Lorem ipsum must be below your entry
     </p>
   </div>

   REQUIRED: aria-invalid on the control and aria-describedby pointing at the
   message. Colour alone never carries the error.
   ========================================================================== */

.is-error input,.is-error select,.is-error textarea,.is-error .tokens,
.field [aria-invalid="true"]{border-color:var(--loss)}
.is-error input:focus,.field [aria-invalid="true"]:focus{border-color:var(--loss)}
.is-success input,.is-success select{border-color:color-mix(in srgb,var(--win) 55%,transparent)}
.is-warn input,.is-warn select{border-color:color-mix(in srgb,var(--mark) 55%,transparent)}

.field-msg{display:flex;align-items:flex-start;gap:7px;margin-top:6px;
           font-size:var(--t-xs);line-height:1.4}
.field-msg .ic{font-size:11px;margin-top:2px;flex:none}
.field-msg.is-error{color:var(--loss)}
.field-msg.is-success{color:var(--win)}
.field-msg.is-warn{color:var(--mark)}

/* Form-level summary. Put it at the top, move focus to it on failed submit. */
.form-alert{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r);
            border:1px solid color-mix(in srgb,var(--loss) 40%,transparent);
            background:color-mix(in srgb,var(--loss) 9%,transparent);font-size:var(--t-sm)}
.form-alert .ic{color:var(--loss);margin-top:2px}
.form-alert h4{color:var(--text);font-size:var(--t-sm);font-weight:500;margin-bottom:4px}
.form-alert ul{color:var(--muted);display:flex;flex-direction:column;gap:3px;font-size:var(--t-xs)}
.form-alert a{color:var(--loss);text-decoration:underline;text-underline-offset:3px}


/* =============================================================================
   17 — FORM ACTIONS & STEPS
   =============================================================================
   Actions sit right-aligned on desktop. On mobile the primary button goes
   full width and FIRST in the visual order — the thumb is at the bottom.
   ========================================================================== */

.form-actions{display:flex;align-items:center;gap:var(--s-2);
              padding-top:var(--s-4);border-top:1px solid var(--rule)}
.form-actions .push{margin-left:auto}
@media(max-width:560px){
  .form-actions{flex-direction:column-reverse;align-items:stretch}
  .form-actions .btn{width:100%}
  .form-actions .push{margin-left:0}
}
/* Sticky bar for long forms. */
.form-actions--sticky{position:sticky;bottom:0;background:var(--panel);
                      margin:0 calc(var(--s-6) * -1) calc(var(--s-6) * -1);
                      padding:var(--s-4) var(--s-6);
                      padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom))}

/* Pending button: swap the label for a spinner, keep the width. */
.btn.is-pending{pointer-events:none;opacity:.7}
.btn.is-pending .ic{animation:spin 1s linear infinite}

/* Steps for a multi-screen form (import wizard). */
.steps{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-5)}
.step-item{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:var(--t-xs)}
.step-item .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule-2);
              display:grid;place-items:center;font-family:var(--f-num);font-size:11px}
.step-item.is-done{color:var(--muted)}
.step-item.is-done .n{background:var(--win);border-color:var(--win);color:var(--canvas)}
.step-item.is-current{color:var(--text)}
.step-item.is-current .n{border-color:var(--mark);color:var(--mark)}
.step-sep{flex:1;height:1px;background:var(--rule);min-width:14px}


/* =============================================================================
   MOTION HOOKS
     .is-over        on .drop during dragover
     .is-pending     on a submitting .btn
     .is-saving / .is-saved   on .autosave
   No entrance animation belongs on a form. A field that fades in is a field
   the person cannot click yet.
   ========================================================================== */

/* =============================================================================
   18 — COMPOSITE CONTROL HARDENING
   =============================================================================
   Any control that wraps bare <input> elements inside a bordered shell —
   .time-parts, .stepper, .tokens, .combo — must neutralise the base field
   styling on its inner inputs, or each segment paints its own border and
   background inside the shell and the row overflows its column.

   If you add another composite control, add its selector here too.
   ========================================================================== */

.time-parts input,
.stepper input,
.tokens input{
  box-sizing:border-box;min-width:0;max-width:100%}

.stepper input:hover,.stepper input:focus,
.tokens input:hover,.tokens input:focus{
  border:0;background:transparent;outline:none}

/* Safety net: no form control may push its column wider than the column is. */
.field,.field-row > *,.input-wrap,.input-group,.time-parts,.stepper,.tokens{
  min-width:0;max-width:100%}