/* Actions have edges. Navigation and disclosures stay quiet, with visible
   selection, chevrons and keyboard focus instead of raised button chrome. */
/* גיליון העורך הוא כרטיס בהיר בכל דף. בלינק החתום ה-body הוא controls-dark,
   והכרטיס היה יורש ממנו כפתורים כהים וטקסט כמעט-לבן על רקע לבן. הוא מקבל כאן
   את אותה ערכה בהירה, מאותו מקור אחד, ולא עותק שני שלה. */
:root, .edx-sheet {
  --control-paper: oklch(0.987 0.005 240);
  --control-surface: oklch(0.985 0.004 240);
  --control-hover: oklch(0.953 0.009 240);
  --control-border: oklch(0.84 0.014 245);
  --control-ink: oklch(0.265 0.046 250);
  --control-primary: oklch(0.285 0.054 250);
  --control-primary-hover: oklch(0.355 0.062 248);
  --control-primary-ink: var(--control-paper);
  --control-focus: oklch(0.51 0.098 225);
  --control-selected: oklch(0.947 0.014 230);
  --control-danger: oklch(0.46 0.155 25);
  --control-danger-bg: oklch(0.97 0.014 25);
  --control-success: oklch(0.44 0.105 155);
  --control-success-bg: oklch(0.97 0.018 155);
  --control-ease: cubic-bezier(.23, 1, .32, 1);
}
/* Dark video links and the administration rail keep the same hierarchy. */
body.controls-dark, aside {
  --control-surface: oklch(0.3 0.04 247);
  --control-hover: oklch(0.36 0.045 247);
  --control-border: oklch(0.46 0.025 245);
  --control-ink: oklch(0.955 0.013 242);
  --control-primary: oklch(0.76 0.124 216);
  --control-primary-hover: oklch(0.81 0.115 216);
  --control-primary-ink: oklch(0.23 0.035 242);
  --control-focus: oklch(0.83 0.1 216);
  --control-selected: oklch(0.36 0.06 235);
  --control-danger: oklch(0.83 0.09 25);
  --control-danger-bg: oklch(0.3 0.055 25);
  --control-success: oklch(0.85 0.1 155);
  --control-success-bg: oklch(0.3 0.04 155);
}
/* :root also covers dynamically loaded editors. State variables allow quiet
   component roles without a second set of hover/disabled/focus rules. */
:where(body) :where(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"], summary) {
  --button-bg: var(--control-surface);
  --button-hover: var(--control-hover);
  --button-ink: var(--control-ink);
  --button-border: var(--control-border);
}
:root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"], summary) {
  box-sizing: border-box;
  min-block-size: 44px;
  min-inline-size: 44px;
  border: 1px solid var(--button-border);
  border-radius: 9px;
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: none;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--control-ease), border-color 160ms var(--control-ease),
    box-shadow 160ms var(--control-ease), transform 160ms var(--control-ease), color 160ms var(--control-ease);
}
:root body :is(.btn, .pick, .fixsend, .ce-save, .save, .buy:not(.alt), .send, .go, [id="ts"]),
:root body.controls-dark:not(.hassave) .dl {
  --button-bg: var(--control-primary);
  --button-hover: var(--control-primary-hover);
  --button-ink: var(--control-primary-ink);
  --button-border: var(--control-primary);
  font-weight: 600;
}
/* Navigation is a location, not an action. The underline survives grayscale. */
:root body :is(.nav, .rl) {
  --button-bg: transparent;
  --button-border: transparent;
  border-radius: 6px;
  position: relative;
}
:root body .nav.on {
  --button-bg: transparent;
  --button-border: transparent;
  font-weight: 600;
}
:root body .nav.on::after {
  content: ''; position: absolute; inset-inline: 14px; inset-block-end: 1px;
  block-size: 2px; border-radius: 2px; background: var(--control-focus);
}
:root body .rl.on { --button-bg: var(--control-selected); font-weight: 600; }
:root body .tab { --button-bg: transparent; --button-border: transparent; }
:root body .tab.on {
  --button-bg: var(--control-selected);
  --button-hover: var(--control-selected);
  font-weight: 600;
}
/* Presets are choices, with a check mark as well as colour. */
:root body .pre.on {
  --button-bg: var(--control-selected);
  --button-hover: var(--control-selected);
  --button-border: var(--control-focus);
  font-weight: 600;
}
:root body .pre { position: relative; padding-inline-end: 38px; }
:root body .pre.on::after { content: '✓'; position: absolute; inset-inline-end: 14px; inset-block-start: 10px; color: var(--control-focus); }
:root body .edx-s { --button-bg: transparent; --button-border: transparent; text-align: start; }
:root body .edx-s:is(.now, .sel) { --button-bg: var(--control-selected); --button-border: var(--control-focus); }
:root body :is(.edx-s.cut, .edx-cta .btn2.danger, .fixlist .x, .fx li .x) {
  --button-bg: var(--control-danger-bg);
  --button-hover: var(--control-danger-bg);
  --button-ink: var(--control-danger);
  --button-border: var(--control-danger);
  opacity: 1;
}
:root body .edx-cta .btn2.ok {
  --button-bg: var(--control-success-bg);
  --button-hover: var(--control-success-bg);
  --button-ink: var(--control-success);
  --button-border: var(--control-success);
}
:root body .vid-id { font-family: inherit; letter-spacing: 0; }
:root body .vid-id::before { content: none; }
:root body .vid-id.copied { --button-ink: var(--control-success); --button-border: var(--control-success); }
:root body summary:not([hidden]) {
  --button-bg: transparent; --button-border: transparent;
  border: 0; border-radius: 6px; padding: 10px 0;
  display: flex; align-items: center; gap: 8px; list-style: none; text-align: start;
}
:root body summary::-webkit-details-marker { display: none; }
:root body summary:not([hidden])::after {
  content: ''; inline-size: 7px; block-size: 7px; flex: 0 0 7px;
  margin-inline-start: auto; margin-inline-end: 3px;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms var(--control-ease);
}
:root body details[open] > summary::after { transform: rotate(135deg); }
:root body :is(.vmore, .tsc, .fixpanel, .caption-editor) > summary { margin-block: 0; padding-inline: 12px; }
:root body .scriptopt > summary { padding-inline: 0; }
:root body .setting-summary { margin: 0; padding: 14px 0; }
:root body :is(.foot button, button.eye, .vid-id, .ce-time) {
  --button-bg: transparent; --button-border: transparent;
}
:root body .foot button { padding-inline: 12px; }
:root body button.edx-play { width: 52px; height: 52px; border-radius: 50%; }
/* Manual editing: quiet tools around the media, one clear save action. */
.edx-transport{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:6px}
:root body .edx .edx-transport button{--button-bg:transparent;--button-border:transparent;min-width:44px;min-height:44px;padding:6px 10px;font-size:.85rem;font-variant-numeric:tabular-nums}
:root body .edx .edx-transport .edx-toggle{--button-bg:var(--control-selected);--button-border:var(--control-border);min-width:92px;display:flex;align-items:center;justify-content:center;gap:8px}
.edx-progress{display:flex;align-items:center;gap:12px;max-width:480px;margin:0 auto}
.edx-progress input{flex:1;min-width:0;height:36px;accent-color:var(--acc-d, #0891B2);cursor:pointer}
.edx-progress input{appearance:none;-webkit-appearance:none;background:transparent;touch-action:pan-y}
.edx-progress input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--control-border)}
.edx-progress input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:var(--acc-d, #0891B2);border:0}
.edx-progress input::-moz-range-track{height:3px;border-radius:2px;background:var(--control-border)}
.edx-progress input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acc-d, #0891B2);border:0}
.edx-progress .edx-time{flex:none;min-width:90px;margin:0;font-size:.72rem}
/* Mobile preview geometry belongs to video-editor.css, shared by both pages. */
@media(max-width:600px){
  /* פריט ברשת נשאר ברוחב התוכן שלו אלא אם אומרים לו אחרת, וסרגל הניגון
     גלש בגללו אל מחוץ למסך בטלפונים צרים. נמדד: התחיל במינוס 59 פיקסלים. */
  :root body .edx .edx-top>*{min-width:0;max-width:100%}
  :root body .edx .edx-stage{border-radius:12px}
  /* עיגול של 44 פיקסלים על פריים של 120 מכסה שליש ממנו, וכפתור הניגון
     ממילא עומד לידו. נגיעה בסרטון עצמו מפעילה אותו, כמו בכל נגן. */
  :root body button.edx-play{display:none}
  :root body .edx .edx-stage video{cursor:pointer}
  /* Visible playback labels remain available on touch screens. */
  :root body .edx .edx-transport{justify-content:center;gap:12px;margin:0}
  :root body .edx .edx-transport .edx-toggle{min-width:104px}
  :root body .edx .edx-transport .edx-toggle-label{display:inline}
  /* בשורה מלאה הביטול נדחף לקצה הרחוק. בעמודה זה משאיר חור באמצע. */
  :root body .edx .edx-history{margin-inline-start:auto}
  :root body .edx .edx-capedit input{padding:8px 10px;font-size:16px}
  :root body .edx .edx-more{--button-bg:transparent;--button-border:transparent;
    color:var(--control-focus);font-size:.85rem;padding:6px 8px;margin-inline-start:0}
}
/* מסך נמוך. הרשימה ויתרה על רצפת הגובה שלה, אחרת היא דוחפת את כפתור
   השמירה אל מתחת לקצה המסך. נמדד: 653 פיקסלים בתוך מסך של 640. */
@media(max-width:600px) and (max-height:720px){
  :root body .edx .edx-hint{display:none}
  :root body .edx .edx-sents{min-height:80px}
  :root body .edx-head h3{font-size:.98rem}
}
:root body .edx-sheet{background:var(--control-paper);padding:16px 18px 12px;border-radius:16px}
:root body .edx-head{margin-bottom:12px;gap:12px}
:root body .edx-head h3{font-size:1.05rem;font-weight:600}
:root body .edx-n{font-size:.75rem}
:root body .edx :is(.edx-x,.edx-nav button,.edx-history button){
  --button-bg:transparent;--button-border:transparent;border-radius:7px;
}
:root body .edx .edx-strip{border-radius:7px}
:root body .edx .edx-nav{gap:6px;margin-top:4px}
:root body .edx .edx-selection-time{font-size:.72rem;font-weight:700}
:root body .edx .edx-cta{gap:6px;margin-top:6px;padding-block:4px;border-top:1px solid var(--line, #E3EBF2)}
:root body .edx .edx-cta .btn2{font-size:.85rem;padding:7px 12px;--button-bg:transparent}
:root body .edx .edx-cta .btn2.danger{
  --button-bg:transparent;--button-border:var(--control-border);--button-ink:var(--control-ink);
  --button-hover:var(--control-danger-bg);
  background:var(--button-bg);color:var(--button-ink);
}
:root body .edx .edx-history button:disabled{background:transparent;border-color:transparent}
:root body .edx .edx-capedit{padding:0;background:transparent;margin-top:8px;border-radius:0}
:root body .edx .edx-capedit input{background:var(--control-surface);border-color:var(--line, #E3EBF2);border-radius:8px;font-size:16px;padding:10px 12px}
:root body .edx .edx-sents{gap:2px}
:root body .edx .edx-s{padding:8px 10px;font-size:.9rem;line-height:1.5;border-radius:7px;min-height:44px}
:root body .edx .edx-s .act{width:20px;height:20px;background:transparent;font-size:.85rem}
:root body .edx .edx-s:is(.now,.sel){--button-border:transparent}
:root body .edx .edx-s.cut{--button-border:transparent;--button-bg:transparent;--button-ink:var(--t2, #46586B)}
:root body .edx .edx-s.cut.sel{--button-bg:var(--control-selected)}
:root body .edx .edx-hint{font-size:.75rem;line-height:1.6;color:var(--t2, #46586B);padding:6px 8px 10px}
:root body .edx .edx-bar{padding-top:10px;margin-top:8px;gap:8px;background:transparent}
:root body .edx .edx-bar .btn{min-height:44px;font-size:.9rem;border-radius:8px}
:root body .edx .edx-bar .btn2{min-height:44px;--button-bg:transparent;--button-border:transparent}
@media(min-width:900px){
  :root body .edx-sheet{gap:16px;grid-template-columns:minmax(0,1fr) 300px}
  :root body .edx .edx-sents{padding:8px 14px}
  :root body .edx .edx-bar .btn{flex:0 1 auto;min-width:230px;padding-inline:24px}
}
@media(max-width:600px){
  :root body .edx-sheet{border-radius:0;padding:10px 14px max(10px,env(safe-area-inset-bottom))}
  :root body .edx-head{margin-bottom:0}
  /* הקו העליון מפריד שורה מלאה. בעמודה שליד הפריים הוא חוצה כלום. */
  :root body .edx .edx-cta{margin:0;border-top:0;padding-block:0}
  :root body .edx .edx-nav{margin:0}
  :root body .edx .edx-capedit{margin:0}
  :root body .edx .edx-sents{margin-top:4px}
  :root body .edx .edx-hint{padding:2px 6px 8px}
}
/* Hover never sticks to touch controls. Active feedback does not change layout. */
@media (hover: hover) and (pointer: fine) {
  :root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"], summary):not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover {
    background: var(--button-hover);
    box-shadow: none;
    filter: none;
  }
}
:root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"], summary):not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active {
  transform: scale(.99);
  box-shadow: none;
  transition-duration: 60ms;
}
:root body :is(.nav, .rl, .tab, summary, .edx-s):not(:disabled):active { transform: none; }
/* The password eye is centered with transform, so do not replace that transform. */
:root body button.eye:not(:disabled):active { transform: translateY(-50%) scale(.96); }
:root body :is(button, a, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--control-focus);
  outline-offset: 3px;
}
:root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"]):is(:disabled, [aria-disabled="true"]) {
  background: var(--control-surface);
  color: var(--control-ink);
  border-color: var(--control-border);
  box-shadow: none;
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
:root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"])[aria-busy="true"] { opacity: .8; cursor: progress; box-shadow: none; transform: none; }
:root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, [role="button"], summary)[hidden] { display: none; }
@media (max-width: 700px) {
  :root body :is(button, .btn, .btn2, .dl, .buy, summary) { font-size: max(.875rem, 14px); }
}
@media (prefers-reduced-motion: reduce) {
  :root body :is(button, a, summary, [role="button"]) { transition: none !important; }
  :root body summary::after { transition: none; }
  :root body :is(button, a.btn, a.btn2, a.dl, a.buy, a.go, a.alt, summary, [role="button"]):not(:disabled):active { transform: none; }
  :root body button.eye:not(:disabled):active { transform: translateY(-50%); }
}