/* EasyClippers 13.9: the app's new pieces, kept out of app.css so they read on their own. The menu's quiet account
   group, the tabs of the grouped pages (Streams, Shorts), the plan card (Starter gold and still, Pro purple-gold that
   shimmers and moves a little, Studio rainbow-gold that flows and waves), the hover tips and the first-run tour. Every
   colour comes from app.css's tokens, so both themes and the navy menu work; all motion stops for reduced motion. */

/* ---------- the menu: seven places, then the account items, smaller ---------- */
.nav .nav-quiet { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1px; }
.nav .nav-quiet button { height: 34px; font-size: 13px; color: var(--text-3); }
.nav .nav-quiet button .icon { width: 16px; height: 16px; opacity: .8; }
.nav .nav-quiet button:hover, .nav .nav-quiet button.on { color: var(--text); }
.shell.rail .nav .nav-quiet { border-top-color: transparent; margin-top: 6px; }

/* ---------- the tabs of a grouped page, at the top of the content ---------- */
.page-tabs { padding: 14px 28px 0; }
.page-tabs[hidden] { display: none; }
.ptabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-2); border: 1px solid var(--border); }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none;
  color: var(--text-2); font: 600 13.5px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.ptabs button:hover { color: var(--text); background: var(--hover); }
.ptabs button.on { background: var(--surface); color: var(--text-hi); box-shadow: var(--shadow); }
.ptabs .badge { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  font: 700 11px/1 var(--font); background: var(--accent); color: var(--on-accent); }
.ptabs .badge.hidden { display: none; }
@media (max-width: 767px) { .page-tabs { padding: 10px 14px 0; } .ptabs { width: 100%; } .ptabs button { flex: 1; justify-content: center; padding: 0 10px; } }

/* ---------- the plan card ---------- */
@property --plan-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.side-card.plan-card { --pc-fill: color-mix(in srgb, var(--side-bg) 92%, #fff 8%); }
.side-card .plan-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.side-card .plan-ico img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.side-card .plan-free-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2);
  background: rgb(var(--ov) / .08); border: 1px solid var(--rule-2); }
.side-card .plan-free-ic .icon { width: 16px; height: 16px; }
.side-card .tier-name { overflow: visible; }
.plan-word { display: inline-flex; align-items: baseline; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.plan-word i { font-style: normal; display: inline-block; }
.plan-trial { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.plan-word.free { color: var(--text-hi); font-weight: 750; }
/* Starter: solid gold, still */
.plan-word.starter { background: linear-gradient(135deg, #fff3c6 0%, #f4c65e 30%, #c68b22 56%, #ffe08c 78%, #dfa743 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Pro and Studio: each letter carries the gradient, which flows through the word, while the letters bob (Pro) or wave
   (Studio) one after another */
.plan-word.pro i, .plan-word.studio i { background-image: var(--pw); background-size: 700% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: pwFlow var(--pt) linear infinite, var(--pm) var(--pb) ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -0.14s), calc(var(--k, 0) * 0.1s); }
.plan-word.pro { --pw: linear-gradient(90deg, #ffe39a 0%, #f6b54a 16%, #c79bff 34%, #8a63ff 46%, #c9a2ff 60%, #f7c96c 78%, #ffe39a 100%);
  --pt: 3.4s; --pb: 2.4s; --pm: pwBob; filter: drop-shadow(0 0 7px rgba(150, 110, 255, .5)); }
.plan-word.studio { --pw: linear-gradient(90deg, #ffe39a 0%, #ffb45e 13%, #ff8fb3 27%, #c7a6ff 41%, #7fd6ff 55%, #9ff5d2 69%, #ffd572 84%, #ffe39a 100%);
  --pt: 2.3s; --pb: 1.6s; --pm: pwWave; font-size: 16.5px; filter: drop-shadow(0 0 8px rgba(255, 196, 120, .55)); }
@keyframes pwFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes pwBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes pwWave { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-3px) scale(1.06); } 65% { transform: translateY(1px) scale(.98); } }
/* the card's edge: a gold hairline (Starter), a purple-gold edge that breathes (Pro), a rainbow-gold ring that turns
   (Studio) */
.side-card.plan-starter { border-color: rgba(244, 198, 94, .42); }
.side-card.plan-starter:hover { border-color: rgba(244, 198, 94, .7); }
.side-card.plan-pro, .side-card.plan-studio { border: 1.5px solid transparent; }
.side-card.plan-pro { background: linear-gradient(var(--pc-fill), var(--pc-fill)) padding-box,
  linear-gradient(135deg, rgba(255, 216, 122, .95), rgba(150, 110, 255, .95) 55%, rgba(255, 216, 122, .7)) border-box;
  animation: pcBreathe 2.8s ease-in-out infinite; }
@keyframes pcBreathe { 50% { box-shadow: 0 0 20px -6px rgba(150, 110, 255, .7); } }
.side-card.plan-studio { background: linear-gradient(var(--pc-fill), var(--pc-fill)) padding-box,
  conic-gradient(from var(--plan-turn), #ffe39a, #ffb45e, #ff8fb3, #c7a6ff, #7fd6ff, #9ff5d2, #ffd572, #ffe39a) border-box;
  animation: pcTurn 4.5s linear infinite, pcGlow 2.2s ease-in-out infinite; }
@keyframes pcTurn { to { --plan-turn: 360deg; } }
@keyframes pcGlow { 50% { box-shadow: 0 0 24px -6px rgba(255, 190, 120, .65); } }
.shell.rail .side-card.plan-card { padding: 7px; }
.shell.rail .side-card .plan-ico, .shell.rail .side-card .plan-ico img { width: 30px; height: 30px; }

/* ---------- hover tips: what a control does, in a few words ---------- */
.tip-pop { position: fixed; z-index: 9000; max-width: 260px; padding: 9px 12px; border-radius: 10px; pointer-events: none;
  background: var(--tip-bg); color: var(--tip-text); font: 500 12.5px/1.45 var(--font); letter-spacing: -.003em;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(3px); transition: opacity .14s, transform .14s; }
.tip-pop.on { opacity: 1; transform: none; }
.tip-pop b { display: block; font-weight: 700; color: #fff; margin-bottom: 2px; }
.tip-pop::after { content: ''; position: absolute; left: var(--ax, 50%); width: 9px; height: 9px; background: inherit; border: inherit;
  transform: translateX(-50%) rotate(45deg); }
.tip-pop.below::after { top: -5px; border-right: 0; border-bottom: 0; }
.tip-pop.above::after { bottom: -5px; border-left: 0; border-top: 0; }
.tip-pop.side::after { display: none; }

/* ---------- the first-run tour: a spotlight on the real control and a small card beside it ---------- */
.tour-shade { position: fixed; inset: 0; z-index: 8000; pointer-events: auto; }
.tour-hole { position: fixed; z-index: 8001; border-radius: 14px; pointer-events: none; transition: all .38s var(--spring);
  box-shadow: 0 0 0 9999px rgba(3, 8, 18, .66), 0 0 0 2px var(--accent), 0 0 30px 4px rgb(var(--aq) / .35); }
.tour-card { position: fixed; z-index: 8002; width: min(340px, calc(100vw - 32px)); padding: 20px; border-radius: 18px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  transition: top .38s var(--spring), left .38s var(--spring), opacity .2s; }
.tour-card .tc-step { font: 650 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.tour-card h3 { margin: 10px 0 0; font-size: 19px; letter-spacing: -.02em; line-height: 1.25; color: var(--text-hi); }
.tour-card p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.tour-card .tc-dots { display: flex; gap: 6px; margin-top: 16px; }
.tour-card .tc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-3); transition: background .2s, width .2s; }
.tour-card .tc-dots i.on { width: 18px; border-radius: 4px; background: var(--accent); }
.tour-card .tc-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-card .tc-row .grow { flex: 1; }
.tc-skip { background: none; border: 0; color: var(--text-3); font: 600 13.5px/1 var(--font); cursor: pointer; padding: 10px 6px; }
.tc-skip:hover { color: var(--text); }
.tour-welcome { position: fixed; inset: 0; z-index: 8002; display: grid; place-items: center; padding: 20px; background: rgba(3, 8, 18, .58);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: twIn .25s var(--spring); }
@keyframes twIn { from { opacity: 0; } }
.tour-welcome .tw-card { animation: twCard .35s var(--spring); }
@keyframes twCard { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.tour-welcome .tw-card { width: min(460px, 100%); padding: 30px 28px; border-radius: 24px; text-align: center; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-pop); color: var(--text); }
.tour-welcome .tw-art { width: 84px; height: 84px; margin: 0 auto; }
.tour-welcome h2 { margin: 16px 0 0; font-size: 26px; letter-spacing: -.03em; color: var(--text-hi); }
.tour-welcome p { margin: 10px auto 0; max-width: 34ch; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.tour-welcome .tw-row { display: grid; gap: 10px; margin-top: 22px; }
.tour-welcome .tw-row .btn { height: 44px; font-size: 15px; }

/* ---------- the save-to-computer box: in the bottom right of the page, never over the menu (13.9, EC-120) ---------- */
@media (min-width: 768px) {
  .devpill { left: auto; right: 22px; bottom: 22px; max-width: min(460px, calc(100vw - var(--side-w) - 60px)); }
}

/* ---------- controls that read on every surface (13.9: EC-119 slider knobs, EC-123 faint edges) ---------- */
input[type=range]::-webkit-slider-thumb { background: var(--surface); border: 2px solid var(--accent); }
input[type=range]::-moz-range-thumb { background: var(--surface); border: 2px solid var(--accent); }
:root:not([data-theme="dark"]) .input, :root:not([data-theme="dark"]) select.input, :root:not([data-theme="dark"]) textarea.input { border-color: #a9b5c6; }
:root:not([data-theme="dark"]) :is(.card.glass, .glass.card, .monitor, .tiles, .auth-card) :is(.input, select.input, textarea.input) { border-color: var(--border-2); }
input[type=checkbox] { accent-color: var(--accent); }
:root:not([data-theme="dark"]) .check input[type=checkbox]:not(:checked) { outline: 1px solid #8492a6; outline-offset: -1px; border-radius: 3px; }

/* ---------- the top bar's live count: a red dot and the words, no pill (13.9, the owner: no tags or pills) ---------- */
.live-pill { background: none; border: 0; padding: 0 6px; height: 32px; color: var(--t-live); }
.live-pill:hover { background: none; color: var(--text-hi); }

/* ---------- Settings in two groups (13.9, EC-008): Editing and Account, then the group's own tabs ---------- */
.stab-groups { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.stab-groups button { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: 650 13.5px/1 var(--font); cursor: pointer; }
.stab-groups button:hover { color: var(--text); background: var(--hover); }
.stab-groups button.on { background: var(--surface); color: var(--text-hi); box-shadow: var(--shadow); }
/* a strip of tabs or filters that runs past the screen fades at its edge, so it reads as scrollable */
@media (max-width: 767px) {
  .tabs, .filters { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .stab-groups { display: flex; width: 100%; } .stab-groups button { flex: 1; }
}

/* ---------- one empty state everywhere (EC-121, SF.emptyState): a picture, one bold line, one short line, the next step */
.es { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px 34px; }
.es-art { width: 96px; height: 96px; margin-bottom: 8px; filter: drop-shadow(0 12px 22px rgba(7, 18, 38, .22)); }
.es-t { font-size: 16px; font-weight: 650; color: var(--text-hi); text-wrap: balance; }
.es-l { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.es-l a { color: var(--accent-text); }
.es-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
@media (max-width: 767px) { .es { padding: 28px 16px 26px; } .es-cta { width: 100%; } .es-cta .btn { flex: 1 1 160px; } }

/* ---------- the type scale (EC-124): five sizes for the app's small text, used instead of inline font sizes ---------- */
.text-xs { font-size: 12px; } .text-sm { font-size: 13px; } .text-md { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 20px; }

/* ---------- the check that keeps out robots (Cloudflare Turnstile, 13.9): its own small space, nothing when off ---------- */
.ts-box:empty { display: none; }
.ts-box { display: flex; justify-content: center; margin: 4px 0; }   /* 13.14.4: out of sight unless it needs a click */

/* ---------- streaming to EasyClippers (13.10, ingest.js): the server and the key, one row each ---------- */
.ing-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--rule); }
.ing-k { font-size: 13px; color: var(--text-3); font-weight: 600; }
.ing-v { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; color: var(--text-hi); }
code.ing-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ing-live { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: var(--t-live); font-weight: 600; }
.ing-steps { display: grid; gap: 8px; }
.ing-steps > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 13.5px; }
@media (max-width: 520px) { .ing-row { grid-template-columns: 1fr auto; } .ing-k { grid-column: 1 / -1; }
  .ing-steps > div { grid-template-columns: 1fr; gap: 2px; } }

/* the sliders' knob is the EasyClippers mark (the owner, Nov 4 2026: "instead of a dot or circle ... the easyclippers
   logo"), with a soft shadow so it reads on either theme and a glow while it is held or has the keyboard */
input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; border: 0; border-radius: 0;
  background: url("/static/assets/thumb.svg") center / contain no-repeat; box-shadow: none;
  filter: drop-shadow(0 1px 2px rgb(7 18 38 / .4)); transition: filter .15s, transform .15s; }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 0;
  background: url("/static/assets/thumb.svg") center / contain no-repeat; box-shadow: none; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: none; filter: drop-shadow(0 0 6px rgb(46 230 214 / .7)) drop-shadow(0 1px 2px rgb(7 18 38 / .4)); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }