/* 新會議 source styles (split out of app.css for WEBSRC1): the Mac App window's one line tip, the web entry (WEBSRC2), the share
   sheet drawing, and the computer row drawn dead while recording in person. Loaded right after app.css */
/* the Mac App window: the column keeps the width the two source cards had (2 x 168 + 8), so the language row does not shrink
   to the one line tip in a short language */
.rec-idle .rec-setup { min-width: min(344px, 100%); }
/* WEBSRC2 entry: one big button, one line under it, a quiet 面對面 switch, the language; one 360px column */
.rec-entry .rec-setup { width: 360px; max-width: 100%; margin-top: 24px; gap: 16px; }
.rec-entry .rec-setup .rec-lang-row { align-self: stretch; }
.rec-hint, .rec-warn-line { display: flex; align-items: center; justify-content: center; gap: 8px; width: 360px; max-width: 100%; min-height: 40px; margin-top: 16px; font-size: var(--fs-13); color: var(--text-2); }
.rec-hint { flex-wrap: wrap; row-gap: 4px; }
.rec-hint .share-art, .share-art .sa-sw, .share-art .sa-tab { flex: none; white-space: nowrap; }
.rec-warn-line { border-radius: var(--r-md); background: color-mix(in srgb, var(--c4) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c4) 30%, transparent); font-weight: 600; color: var(--text); }
.rec-warn-line svg { width: 16px; height: 16px; color: color-mix(in srgb, var(--c4) 80%, var(--text)); }
.rec-alt { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: var(--fill);
  font: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); cursor: pointer; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.rec-alt:hover { background: var(--fill-strong); color: var(--text); transition-duration: 0ms; }
.rec-alt:focus-visible { outline: none; box-shadow: var(--ring); }
.rec-alt svg { width: 16px; height: 16px; }
.rec-get { text-decoration: none; }
/* while recording in person: one line, the same warm tone as the card; the computer row drawn as a dead line in the warning colour */
.mic-line { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c4) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c4) 30%, transparent); font-size: var(--fs-13); font-weight: 600; color: var(--text); }
.ml-ic { display: inline-flex; color: color-mix(in srgb, var(--c4) 80%, var(--text)); }
.ml-ic svg { width: 16px; height: 16px; }
.ml-t { flex: 1; min-width: 0; }
.m-row.dead .meter i { background: color-mix(in srgb, var(--c4) 80%, var(--text)); opacity: .7; }
.m-row.dead .m-st { color: color-mix(in srgb, var(--c4) 80%, var(--text)); font-weight: 600; }
.rec-src-tip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; color: var(--text-3); }
.rec-src-tip svg { width: 14px; height: 14px; flex: none; }
/* Chrome's share sheet in small: the Meet tab picked and the audio switch on, the switch pulses once in a while */
.share-art { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-bar); font-size: var(--fs-12); color: var(--text-2); }
.sa-tab { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 600; }
.sa-tab i { width: 8px; height: 8px; border-radius: 2px; background: var(--c2); }
.sa-sw { width: 24px; height: 14px; border-radius: 7px; background: var(--accent); position: relative; animation: sw-hint 3200ms var(--ease) infinite; }
.sa-sw i { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
@keyframes sw-hint { 0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 80% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }
.sa-l { color: var(--text); }
/* WEBSRC3: on a Mac, the quiet line to the Mac App for a meeting in a desktop app */
.rec-app { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-13); color: var(--text-2); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.rec-app:hover { color: var(--text); text-decoration-color: currentColor; transition-duration: 0ms; }
.rec-app:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.rec-app svg { width: 16px; height: 16px; flex: none; }
/* a screen shared on a Mac without sound: the 僅限系統錄音 row drawn small, then what to do */
.perm-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c4) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c4) 30%, transparent); font-size: var(--fs-13); color: var(--text-2); }
.perm-card .pc-t { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.perm-card .pc-t svg { width: 16px; height: 16px; flex: none; color: color-mix(in srgb, var(--c4) 80%, var(--text)); }
.perm-card .pc-do { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; color: var(--text); }
.perm-card .pc-do .btn { flex: none; }
.perm-card .pc-do + .pc-do { border-top: 1px solid color-mix(in srgb, var(--c4) 25%, transparent); padding-top: 12px; }
.perm-art { display: flex; flex-direction: column; gap: 4px; align-self: flex-start; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-bar); font-size: var(--fs-12); }
.perm-art .pa-h { font-weight: 600; color: var(--text); }
.perm-art .pa-row { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.perm-art .pa-row > i { width: 16px; height: 16px; border-radius: 4px; background: var(--fill-strong); }
.perm-art .pa-row b { flex: 1; font-weight: 500; color: var(--text); }

/* Fixed slots for text that changes while the page is open (Hugo 10-30 「不要有任何地方因為字的變化導致其它跑版」), checked by
   web/tools/check_jitter.py. Digits are tabular since app.css stopped turning tnum off; each slot below is as wide as its
   longest value (the clock at 0:00:00, the longest word in four locales), so nothing next to it moves */
.rec-clock { min-width: 3.65em; }
.meters .m-st { width: 8.5em; text-align: right; }
.nav .rec-t { min-width: 4.2em; text-align: right; }
.mini-t { min-width: 5em; }