/* Studio: light glassmorphism.
   Loaded by the studio page only, after styles.css. The administration dashboard (admin.html) does not load this file and keeps its own look.
   Frosted translucent surfaces over a soft pastel background, with a warm amber accent. Readability comes first: text stays dark
   on near-white glass, and every glass surface has a more opaque fallback. */

html[data-app="studio"]:root {
  color-scheme: light;
  --bg: #eef2fb;
  --bg-2: rgba(255, 255, 255, .5);
  --panel: rgba(255, 255, 255, .58);
  --panel-2: rgba(255, 255, 255, .8);
  --line: rgba(32, 44, 84, .13);
  --ink: #182033;
  --ink-2: #47506a;
  --ink-3: #66708b;
  --accent: #a85d00;                       /* amber for text and small marks: dark enough to read on glass */
  --accent-ink: #ffffff;
  --accent-soft: rgba(224, 138, 18, .14);
  --ok: #12805a; --warn: #9a5800; --bad: #c0392b; --info: #1f6fb5; --violet: #6a4fc4;
  --shadow: 0 18px 50px rgba(50, 60, 110, .2);
  --g-bg: rgba(255, 255, 255, .56);
  --g-bg-strong: rgba(255, 255, 255, .86);
  --g-line: rgba(255, 255, 255, .78);
  --g-edge: rgba(32, 44, 84, .09);
  --g-blur: 20px;
  --g-shadow: 0 10px 34px rgba(50, 60, 110, .11), 0 1px 3px rgba(50, 60, 110, .06);
  --btn-grad: linear-gradient(135deg, #ffcb5c, #f59a2b);
}

html[data-app="studio"] body {
  background: linear-gradient(160deg, #f6f0ff 0%, #edf3fd 46%, #fdf2e4 100%) fixed;
  color: var(--ink);
}
::selection { background: rgba(245, 154, 43, .3); }

/* Soft colour orbs behind the glass */
.glass-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glass-bg i { position: absolute; border-radius: 50%; filter: blur(90px); }
.glass-bg i:nth-child(1) { width: 460px; height: 460px; background: #ffc9a3; opacity: .7; inset-block-start: -140px; inset-inline-end: 6%; }
.glass-bg i:nth-child(2) { width: 540px; height: 540px; background: #aad5ff; opacity: .65; inset-block-end: -220px; inset-inline-start: -140px; }
.glass-bg i:nth-child(3) { width: 380px; height: 380px; background: #cdb9ff; opacity: .6; inset-block-start: 42%; inset-inline-end: -140px; }

/* The frosted surfaces */
.side, .top, .card, dialog, .job-pop, .toast {
  background: var(--g-bg);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(165%); backdrop-filter: blur(var(--g-blur)) saturate(165%);
  border-color: var(--g-line);
}
.card, .job-pop, .toast { border: 1px solid var(--g-line); border-radius: 16px; box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px var(--g-edge); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side, .top, .card, dialog, .job-pop, .toast { background: var(--g-bg-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .side, .top, .card, dialog, .job-pop, .toast { background: #fbfcff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-bg i { display: none; }
}

/* Shell */
.app { background: transparent; }
.side { border-inline-end: 1px solid var(--g-line); box-shadow: inset -1px 0 0 var(--g-edge), 6px 0 30px rgba(50, 60, 110, .06); }
.top { border-bottom: 1px solid var(--g-line); box-shadow: 0 6px 24px rgba(50, 60, 110, .06); }
.brand .mark { background: var(--btn-grad); color: #3a2300; box-shadow: 0 4px 12px rgba(245, 154, 43, .35); }
.brand .mark::after { border-color: #3a2300; }
.nav a { border-radius: 12px; transition: background .15s, color .15s, box-shadow .15s; }
.nav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .92); color: var(--accent); box-shadow: 0 2px 10px rgba(50, 60, 110, .1), inset 0 0 0 1px rgba(224, 138, 18, .35); }
.nav .num { background: rgba(32, 44, 84, .07); color: var(--ink-3); border-radius: 7px; }
.nav a[aria-current="page"] .num { background: var(--btn-grad); color: #3a2300; }
.me-link:hover, .me-link[aria-current="page"] { background: rgba(255, 255, 255, .7); }
.me-avatar { background: var(--btn-grad); color: #3a2300; }

/* Controls */
button, .btn {
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(32, 44, 84, .14); border-radius: 12px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(50, 60, 110, .06), inset 0 1px 0 rgba(255, 255, 255, .8); transition: background .15s, box-shadow .15s, transform .1s, border-color .15s;
}
button:hover, .btn:hover { background: #fff; border-color: rgba(32, 44, 84, .28); box-shadow: 0 4px 14px rgba(50, 60, 110, .12); }
button:active, .btn:active { transform: translateY(1px); }
button.primary { background: var(--btn-grad); color: #2b1a00; border-color: transparent; box-shadow: 0 6px 18px rgba(245, 154, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
button.primary:hover { filter: brightness(1.04); background: var(--btn-grad); box-shadow: 0 8px 22px rgba(245, 154, 43, .42); }
button.danger { color: var(--bad); border-color: rgba(192, 57, 43, .35); }
button.danger:hover { background: rgba(192, 57, 43, .08); }
button.ghost { background: transparent; box-shadow: none; border-color: transparent; }
button.ghost:hover { background: rgba(255, 255, 255, .6); box-shadow: none; }
button:disabled { box-shadow: none; }
button.choice:hover { border-color: rgba(224, 138, 18, .5); background: rgba(255, 255, 255, .95); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid #e08a12; outline-offset: 2px; }

input, textarea, select {
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(32, 44, 84, .14); border-radius: 12px; color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(50, 60, 110, .05);
}
input::placeholder, textarea::placeholder { color: #8b95ad; }
input:focus, textarea:focus, select:focus { background: #fff; border-color: #e08a12; box-shadow: 0 0 0 4px rgba(245, 154, 43, .2); }
input:disabled, textarea:disabled, select:disabled { background: rgba(255, 255, 255, .4); color: var(--ink-3); }
label { color: var(--ink-2); }

/* Badges, chips, progress, alerts */
.badge, .chip, .kind-badge { background: rgba(255, 255, 255, .8); border-color: rgba(32, 44, 84, .12); }
.progress { background: rgba(32, 44, 84, .1); }
.progress > i { background: var(--btn-grad); }
.alert { background: rgba(255, 255, 255, .7); border-color: var(--g-line); box-shadow: 0 0 0 1px var(--g-edge); border-radius: 14px; }
.alert.warn { background: rgba(255, 244, 222, .8); border-color: rgba(224, 138, 18, .4); }
.alert.bad { background: rgba(255, 234, 230, .85); border-color: rgba(192, 57, 43, .4); }
.alert.ok { background: rgba(228, 247, 238, .85); border-color: rgba(18, 128, 90, .4); }
.alert.info { background: rgba(232, 243, 255, .85); border-color: rgba(31, 111, 181, .4); }
.err-text { color: var(--bad); }
.hint { color: var(--ink-3); }

/* Tabs, project cards, timeline, scenes */
.tabs { border-bottom-color: rgba(32, 44, 84, .12); scrollbar-color: rgba(32, 44, 84, .22) transparent; }
.tabs a { color: var(--ink-2); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="step"] { color: var(--accent); border-color: #e08a12; }
.tabs a .dot { background: rgba(32, 44, 84, .18); }
.pcard { transition: transform .18s, box-shadow .18s; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(50, 60, 110, .16), inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 1px var(--g-edge); border-color: var(--g-line); }
.pcard .thumb { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .7) 0 12px, rgba(237, 241, 251, .7) 12px 24px); color: var(--ink-3); }
.timeline { background: rgba(255, 255, 255, .5); border-color: var(--g-line); border-radius: 12px; }
.timeline button { background: rgba(255, 255, 255, .8); }
.scene { border-inline-start-width: 4px; }
.scene .num { background: var(--accent-soft); color: var(--accent); border-radius: 10px; }
.prompt-box { background: rgba(255, 255, 255, .6); border: 1px dashed rgba(32, 44, 84, .22); border-radius: 12px; color: var(--ink-2); }
.drop { background: rgba(255, 255, 255, .45); border-color: rgba(32, 44, 84, .22); border-radius: 14px; }
.drop:hover, .drop.over { border-color: #e08a12; background: rgba(255, 244, 222, .75); }
.empty { background: rgba(255, 255, 255, .42); border-color: rgba(32, 44, 84, .2); border-radius: 16px; }
.preview-9x16 { border-color: var(--g-line); border-radius: 14px; box-shadow: 0 10px 30px rgba(50, 60, 110, .18); }
.qc li { border-bottom-color: rgba(32, 44, 84, .1); }
th, td { border-bottom-color: rgba(32, 44, 84, .1); }
.completion { border-color: rgba(224, 138, 18, .4); }
.avatar-lg { border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 20px rgba(50, 60, 110, .18); }
.empty-avatar { background: var(--btn-grad); color: #3a2300; }
.phone-prefix { background: rgba(255, 255, 255, .72); border-color: rgba(32, 44, 84, .14); border-radius: 12px; }
.otp-input { background: rgba(255, 255, 255, .85); }

/* Dialogs and toasts */
dialog { background: var(--g-bg-strong); color: var(--ink); border: 1px solid var(--g-line); border-radius: 18px; box-shadow: var(--shadow), 0 0 0 1px var(--g-edge); }
dialog::backdrop { background: rgba(30, 40, 80, .32); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.toast { background: var(--g-bg-strong); }

/* Sign-in */
.login .card { padding: 26px; border-radius: 22px; }

/* Phones: the drawer needs a readable, almost opaque surface */
@media (max-width: 820px) {
  .side { background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); }
  body.nav-open::after { background: rgba(30, 40, 80, .35); }
}
@media (prefers-reduced-motion: reduce) { .pcard, button, .btn, .nav a { transition: none; } .pcard:hover { transform: none; } }

/* Brand logo: the mark replaces the old amber "R" tile everywhere (studio sidebar, login, dashboard sign-in). */
.brand .mark, .adm-brand .mark {
  background: url("../icons/logo.svg") center / contain no-repeat; box-shadow: none; border-radius: 0; font-size: 0; color: transparent;
  width: 34px; height: 34px; filter: drop-shadow(0 3px 6px rgba(245, 154, 43, .35));
}
.brand .mark::after { content: none; }

/* Install call-to-action (sidebar) */
.install-btn {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; margin-top: 10px; padding: 11px 12px; text-align: start; direction: rtl;
  border-radius: 14px; border: 1px solid rgba(255, 203, 92, .55); color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #2c2c32 0%, #3a2f22 55%, #7a4a14 100%);
  box-shadow: 0 8px 22px rgba(245, 154, 43, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.install-btn::after { /* soft moving glint, switched off once the user dismissed or installed */
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 220, 140, .28) 50%, transparent 65%);
  transform: translateX(-120%); animation: inst-glint 4.5s ease-in-out infinite; pointer-events: none;
}
.install-btn.quiet::after { animation: none; content: none; }
@keyframes inst-glint { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.install-btn:hover { transform: translateY(-1px); filter: brightness(1.08); background: linear-gradient(135deg, #2c2c32 0%, #3a2f22 55%, #7a4a14 100%); border-color: #ffcb5c; box-shadow: 0 12px 28px rgba(245, 154, 43, .4), inset 0 1px 0 rgba(255, 255, 255, .2); }
.install-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(245, 154, 43, .3); }
.install-btn:focus-visible { outline: 3px solid #ffcb5c; outline-offset: 3px; border-radius: 14px; }
.install-btn .inst-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #3a2300; background: var(--btn-grad); box-shadow: 0 3px 10px rgba(245, 154, 43, .45); }
.install-btn .ico { width: 20px; height: 20px; display: inline-flex; }
.install-btn .ico svg { width: 100%; height: 100%; }
.install-btn .inst-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.5; text-align: right; }
.install-btn .inst-label { font-weight: 800; font-size: .95rem; }
.install-btn .inst-hint { font-size: .75rem; color: rgba(255, 255, 255, .72); }
.install-btn .inst-hint:empty { display: none; }
.install-btn.is-installed { background: rgba(18, 128, 90, .1); border-color: rgba(18, 128, 90, .4); color: var(--ok); box-shadow: none; }
.install-btn.is-installed:hover { background: rgba(18, 128, 90, .16); filter: none; box-shadow: none; border-color: var(--ok); }
.install-btn.is-installed .inst-ico { background: var(--ok); color: #fff; box-shadow: none; }

/* Install dialog: centered glass modal on desktop, bottom sheet on phones */
dialog.install-dlg { padding: 26px 24px 22px; width: min(460px, calc(100vw - 32px)); border-radius: 24px; text-align: center; animation: inst-pop .22s ease-out; overflow-x: hidden; }
@keyframes inst-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.inst-close { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.inst-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.inst-head h2 { margin: 6px 0 0; font-size: 1.3rem; }
.inst-head p { margin: 0; max-width: 34ch; line-height: 1.9; }
.inst-badge { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #3a2300; background: var(--btn-grad); box-shadow: 0 10px 26px rgba(245, 154, 43, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
.inst-badge.ok { background: linear-gradient(135deg, #3fc796, #12805a); color: #fff; box-shadow: 0 10px 26px rgba(18, 128, 90, .35); }
.inst-badge .ico { width: 38px; height: 38px; display: inline-flex; }
.inst-badge svg, .inst-chip svg, .inst-done svg, .inst-unsupported svg, .inst-secondary svg, .inst-cta svg { width: 100%; height: 100%; }
.inst-plat { margin-top: 4px; font-size: .78rem; color: var(--ink-3); background: rgba(32, 44, 84, .06); padding: 3px 12px; border-radius: 999px; }
.inst-body { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: start; }
.inst-body p { margin: 0; line-height: 1.9; }
.inst-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-size: 1.05rem; font-weight: 800; border-radius: 16px; color: #2b1a00; border: 0; background: var(--btn-grad); box-shadow: 0 10px 26px rgba(245, 154, 43, .42), inset 0 1px 0 rgba(255, 255, 255, .55); }
.inst-cta:hover { background: var(--btn-grad); filter: brightness(1.05); }
.inst-cta .ico { width: 22px; height: 22px; display: inline-flex; }
.inst-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px; }
.inst-secondary .ico { width: 20px; height: 20px; display: inline-flex; }
.inst-sub { margin: 6px 0 0; font-size: .95rem; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inst-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 1px solid var(--g-edge, var(--line)); }
.inst-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #3a2300; background: var(--btn-grad); }
.inst-chip { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #27272b; color: #ffcb5c; }
.inst-chip .ico { width: 22px; height: 22px; display: inline-flex; }
.inst-txt { line-height: 1.9; font-size: .93rem; min-width: 0; overflow-wrap: anywhere; }
.inst-txt .en { font-weight: 700; color: var(--ink); background: rgba(245, 154, 43, .16); padding: 0 6px; border-radius: 6px; unicode-bidi: isolate; }
.inst-done, .inst-unsupported { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.inst-done .ico, .inst-unsupported .ico { width: 30px; height: 30px; display: inline-flex; }
.inst-done .ico { color: var(--ok); }
.inst-unsupported .ico { color: var(--ink-3); }
@media (max-width: 820px) {
  dialog.install-dlg { inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 92dvh; border-radius: 26px 26px 0 0; padding: 24px 18px calc(22px + env(safe-area-inset-bottom)); animation: inst-sheet .28s cubic-bezier(.2, .8, .2, 1); }
  dialog.install-dlg::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(32, 44, 84, .2); margin: -12px auto 14px; }
  @keyframes inst-sheet { from { transform: translateY(100%); } to { transform: none; } }
  .inst-cta, .inst-secondary { min-height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .install-btn, .install-btn::after, dialog.install-dlg { animation: none !important; transition: none; } }

.install-btn[hidden] { display: none; }

/* "ساخت ریلز": the main call-to-action on the dashboard, same family as the install button */
.cta-reel {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 18px; min-height: 52px; border-radius: 16px;
  font-weight: 900; font-size: 1.05rem; color: #fff; text-decoration: none; cursor: pointer; border: 1px solid rgba(255, 203, 92, .6);
  background: linear-gradient(135deg, #2c2c32 0%, #3a2f22 55%, #7a4a14 100%);
  box-shadow: 0 10px 26px rgba(245, 154, 43, .32), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .18s, box-shadow .18s, filter .18s;
}
.cta-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 220, 140, .3) 50%, transparent 65%); transform: translateX(-120%); animation: inst-glint 4.5s ease-in-out infinite; pointer-events: none; }
.cta-reel .cr-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #3a2300; background: var(--btn-grad); box-shadow: 0 3px 10px rgba(245, 154, 43, .5); }
.cta-reel .cr-ico svg { width: 20px; height: 20px; }
.cta-reel:hover { transform: translateY(-2px); filter: brightness(1.08); border-color: #ffcb5c; box-shadow: 0 14px 32px rgba(245, 154, 43, .45), inset 0 1px 0 rgba(255, 255, 255, .22); }
.cta-reel:active { transform: translateY(1px); }
.cta-reel:focus-visible { outline: 3px solid #ffcb5c; outline-offset: 3px; }
@media (max-width: 540px) { .cta-reel { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cta-reel, .cta-reel::after { animation: none !important; transition: none; } }

/* "i" explanation button and its dialog */
.info-btn { width: 28px; height: 28px; min-height: 28px; padding: 0; margin-inline-start: 8px; border-radius: 50%; vertical-align: middle; display: inline-grid; place-items: center;
  font: 800 .95rem/1 Georgia, "Times New Roman", serif; font-style: italic; color: #7a4a00; background: rgba(245, 154, 43, .16); border: 1.5px solid rgba(245, 154, 43, .6); box-shadow: none; cursor: pointer; transition: transform .15s, background .15s; }
.info-btn:hover { background: var(--btn-grad); color: #3a2300; transform: scale(1.08); box-shadow: 0 4px 12px rgba(245, 154, 43, .4); }
.info-btn:focus-visible { outline: 3px solid #f59a2b; outline-offset: 2px; }
dialog.info-dlg { width: min(520px, calc(100vw - 32px)); padding: 26px 24px 20px; border-radius: 24px; text-align: start; animation: inst-pop .2s ease-out; }
.info-x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.info-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 8px; font: 800 1.5rem/1 Georgia, serif; font-style: italic; color: #3a2300; background: var(--btn-grad); box-shadow: 0 8px 20px rgba(245, 154, 43, .4); }
.info-dlg h3 { margin: 0 0 6px; } .info-lead { line-height: 2; margin: 0 0 12px; color: var(--ink-2); }
.info-steps { list-style-type: persian; margin: 6px 0 12px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.9; font-size: .93rem; }
.info-fit { padding: 10px 12px; border-radius: 14px; background: rgba(18, 128, 90, .09); line-height: 1.9; font-size: .92rem; margin-bottom: 8px; }
.info-note { padding: 10px 12px; border-radius: 14px; background: rgba(245, 154, 43, .12); line-height: 1.9; font-size: .9rem; margin-bottom: 14px; }
@media (max-width: 540px) { dialog.info-dlg { inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; border-radius: 24px 24px 0 0; max-height: 90dvh; } }
@media (prefers-reduced-motion: reduce) { .info-btn, dialog.info-dlg { transition: none; animation: none; } }

/* Sidebar profile picture: the photo, or a light-orange circle with a person icon */
.me-avatar { background: linear-gradient(145deg, #ffeacb, #ffd29b); color: #c46a00; overflow: hidden; border: 1.5px solid rgba(245, 154, 43, .45); box-shadow: 0 2px 8px rgba(245, 154, 43, .22); }
.me-avatar svg { width: 20px; height: 20px; }
.me-avatar.has-photo { background: none; border-color: rgba(245, 154, 43, .6); }
.me-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.empty-avatar { background: linear-gradient(145deg, #ffeacb, #ffd29b); color: #c46a00; border: 2px solid rgba(245, 154, 43, .45); box-shadow: 0 6px 18px rgba(245, 154, 43, .22); }
.empty-avatar svg { width: 52%; height: 52%; }

/* Two fields side by side on one straight row (e.g. duration + number of pictures), also on phones */
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.field-pair > .field { margin-bottom: 0; min-width: 0; }
.field-pair :is(input, select) { width: 100%; max-width: none; min-height: 44px; height: 44px; }
/* the little "i" inside a label is smaller than the one in page titles */
label .info-btn { width: 22px; height: 22px; min-height: 22px; margin-inline-start: 6px; font-size: .78rem; }