/* Shared form controls and buttons for the client portal (login.html), /editors/ and /admin/. Linked right after
   tokens.css and before every page's own CSS, so a page restyles a control with its own selector and wins.

   How to add one:
   - Style the native element (<button>, <input type="checkbox|radio|range">, <input role="switch">, <textarea> …) so
     forms, keyboard use and tests keep working without JavaScript; add a module in shared/ only where CSS cannot
     reach (the <select> and date pickers are select-controls.js and date-picker.js for that reason).
   - Use plain class selectors (.k-btn, .k-check …), not :where(): the pages' global `*{padding:0}` reset would beat
     zero specificity.
   - Only tokens from tokens.css (--space-*, --radius-*, --text-*, colours), so both themes work without extra rules.
   - Show it on the components page (components/index.html, local only: npm run dev, then /components/). */

/* Segmented switch: a copy of the client Home period switch (portal/dashboard.css .home-range), a grey track with a
   white thumb that slides under the pressed button. shared/segment.js presses the buttons and places the thumb;
   without it the pressed button gets the white background itself.
   <div class="k-segment" role="group" aria-label="Period">
     <button type="button" value="7" aria-pressed="false">7 days</button>
     <button type="button" value="30" aria-pressed="true">30 days</button>
   </div> */
.k-segment{position:relative;isolation:isolate;display:inline-flex;flex:0 0 auto;gap:4px;padding:4px;background:#ededeb;border-radius:12px}
.k-segment.has-thumb::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--thumb-w);transform:translateX(var(--thumb-x));border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 1px 6px rgba(0,0,0,.05);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.k-segment.has-thumb::before{transition:none}}
.k-segment button{position:relative;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.k-segment button::after{content:"";position:absolute;inset:-5px 0}
.k-segment button:hover{color:var(--text)}
.k-segment button[aria-pressed="true"]{color:#181818}
.k-segment:not(.has-thumb) button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 1px 6px rgba(0,0,0,.05)}
@media(forced-colors:active){.k-segment button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-2px}}
@media(max-width:680px){.k-segment{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.k-segment button{padding:8px 8px}}
:root[data-theme="dark"] .k-segment{background:var(--panel)}
:root[data-theme="dark"] .k-segment button[aria-pressed="true"]{color:#f5f7fa}
:root[data-theme="dark"] .k-segment:not(.has-thumb) button[aria-pressed="true"],:root[data-theme="dark"] .k-segment.has-thumb::before{background:#3a4250;box-shadow:0 1px 2px rgba(0,0,0,.35),0 1px 6px rgba(0,0,0,.2)}

/* Tick box: a copy of the client Home task box (portal/dashboard.css .home-task-check). The tick draws itself in;
   the pop and the halo play only while shared/check.js has put .is-ticked on the box, so they play for a press and
   never on a re-render.
   <span class="k-check"><input id="…" type="checkbox"><svg viewBox="0 0 20 20" aria-hidden="true"><path pathLength="1" d="M5.6 10.4 8.6 13.3 14.5 7.2"/></svg></span> */
.k-check{position:relative;isolation:isolate;display:grid;flex:0 0 20px;width:20px;height:20px}
.k-check input{grid-area:1/1;appearance:none;width:20px;height:20px;margin:0;border:1.5px solid #c4c4c0;border-radius:6px;background:var(--panel);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s cubic-bezier(.22,1,.36,1)}
.k-check input:active,.k-check input:active+svg{transform:scale(.86)}
.k-check input:checked{border-color:#246df0;background:#246df0}
@media(hover:hover){
  .k-check input:hover{border-color:#93938f}
  .k-check input:checked:hover{border-color:#1d5fd6;background:#1d5fd6}
}
.k-check svg{grid-area:1/1;width:20px;height:20px;color:#fff;pointer-events:none;transition:transform .16s cubic-bezier(.22,1,.36,1)}
/* pathLength="1": a dash of 1 is the whole tick. The gap is longer and the offset a hair past it, so no round cap dot is left behind. */
.k-check path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1.02;transition:stroke-dashoffset .12s ease-in}
.k-check input:checked+svg path{stroke-dashoffset:0;transition:stroke-dashoffset .28s cubic-bezier(.65,0,.35,1) .07s}
/* The halo keeps the box's shape: a circle growing past a square pokes out of its sides as bumps first. */
.k-check::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:7px;background:rgba(36,109,240,.22);opacity:0;pointer-events:none}
/* The tick pops with the box. It has to: Chrome doesn't repaint the drawing tick over a box whose transform is animating. */
.k-check.is-ticked input:checked,.k-check.is-ticked input:checked+svg{animation:k-check-pop .44s cubic-bezier(.33,1,.68,1)}
.k-check.is-ticked::before{animation:k-check-ripple .5s cubic-bezier(.22,1,.36,1) .03s}
@keyframes k-check-pop{0%{transform:scale(.86)}40%{transform:scale(1.14)}72%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes k-check-ripple{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@media(prefers-reduced-motion:reduce){
  .k-check input:active,.k-check input:active+svg{transform:none}
  .k-check path,.k-check input:checked+svg path{transition:none}
  .k-check.is-ticked input:checked,.k-check.is-ticked input:checked+svg,.k-check.is-ticked::before{animation:none}
}
/* !important: the dark theme's border and the hover colours would otherwise win over the system colours. */
@media(forced-colors:active){
  .k-check input{forced-color-adjust:none;border-color:ButtonText!important;background:Canvas!important}
  .k-check input:checked{border-color:Highlight!important;background:Highlight!important}
  .k-check svg{forced-color-adjust:none;color:HighlightText}
  .k-check::before{display:none}
}
:root[data-theme="dark"] .k-check input:not(:checked){border-color:#5b6372}
:root[data-theme="dark"] .k-check::before{background:rgba(92,150,255,.3)}
@media(hover:hover){
  :root[data-theme="dark"] .k-check input:not(:checked):hover{border-color:#8a93a3}
  :root[data-theme="dark"] .k-check input:checked:hover{border-color:#3d80f5;background:#3d80f5}
}

/* Text field: a copy of the filming day's Location field (shared/content-plan.css .cp-field and .cp-input), a small
   grey label over a 36px box that rings blue on focus.
   <div class="k-field"><label for="…">Location</label><input class="k-input" type="text" id="…" placeholder="Address or place"></div> */
.k-field{display:grid;gap:6px;min-width:0;margin:0}
.k-field>label{display:block;margin:0;padding:0;color:var(--muted);font-size:12px;font-weight:600;line-height:1.4}
.k-input{
  display:block;width:100%;min-width:0;min-height:36px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14px;line-height:1.4;
}
/* The grey hover fill comes from the editor's input rule (shared/video-editor.css); :where keeps it below the focus rule. */
.k-input:where(:not([readonly])):hover{background:var(--panel-2)}
.k-input:hover:not(:disabled){border-color:color-mix(in srgb,var(--text) 22%,var(--line))}
.k-input:focus-visible{outline:2px solid transparent;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft);background:var(--panel)}
.k-input::placeholder{color:var(--muted);opacity:.75}
.k-input:disabled{opacity:.6;cursor:default}

/* Password field with a show/hide eye inside it on the right (the sign-in forms). shared/password-reveal.js flips the
   input between password and text; aria-pressed="true" means the password is shown, and swaps the eye for the crossed one.
   <div class="k-password">
     <input id="pw" class="k-password-input" type="password">
     <button type="button" class="k-password-toggle" aria-controls="pw" aria-pressed="false" aria-label="Show password">
       <svg class="k-password-show" …eye/><svg class="k-password-hide" …eye-off/>
     </button>
   </div>
   The input keeps its page's look; only the right padding grows (the three classes beat the pages' `.login .field input`). */
.k-password{position:relative}
.k-password>.k-password-input[type]{padding-right:52px}
.k-password-input::-ms-reveal{display:none}
.k-password-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;
  padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;
  transition:color .15s ease,background-color .15s ease;
}
.k-password-toggle svg{width:20px;height:20px}
.k-password-toggle .k-password-hide,.k-password-toggle[aria-pressed="true"] .k-password-show{display:none}
.k-password-toggle[aria-pressed="true"] .k-password-hide{display:block}
@media(hover:hover){.k-password-toggle:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}}
.k-password-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}