/* Shared controls for Studio, administration, capture and listener surfaces.
   Keep native form semantics and platform option menus for keyboard/touch use. */
:root {
  --control-radius:10px;
  --control-height:48px;
  --control-border:var(--line, #dce5e0);
  --control-surface:var(--surface, var(--card, #fff));
  --control-ink:var(--ink, var(--fg, #182d2b));
  --control-accent:var(--brand, var(--accent, #176453));
  --control-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586763' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root body select:not([multiple]):not([size]),
:root body select[size="1"] {
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;max-width:100%;min-width:0;
  min-height:var(--control-height);height:auto;
  padding:12px 42px 12px 14px;
  font:inherit;font-size:1rem;line-height:1.4;
  color:var(--control-ink);border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background-color:var(--control-surface);
  background-image:var(--control-chevron);background-repeat:no-repeat;
  background-position:right 14px center;background-size:16px;
  text-overflow:ellipsis;cursor:pointer;
  box-shadow:0 1px 2px #193c3304;
}
:root body textarea,
:root body input:is([type=text],[type=email],[type=password],[type=search],[type=url],[type=number],[type=tel],[type=datetime-local]) {
  font:inherit;font-size:1rem;line-height:1.4;min-height:var(--control-height);
  max-width:100%;min-width:0;padding:12px 14px;
  color:var(--control-ink);background:var(--control-surface);
  border:1px solid var(--control-border);border-radius:var(--control-radius);
}
:root body textarea{width:100%;min-height:112px;resize:vertical}
:root body :is(select,input,textarea):hover:not(:disabled){border-color:var(--control-accent)}
:root body :is(select,input,textarea,summary,button,.button):focus-visible {
  outline:2px solid var(--control-accent);outline-offset:3px;
}
:root body :is(select,input,textarea):disabled{opacity:.55;cursor:not-allowed}
:root body :is(select,input,textarea)[aria-invalid=true]{border-color:var(--danger,var(--bad,#a53030))}
:root body input:is([type=checkbox],[type=radio]){min-height:0;width:18px;height:18px;accent-color:var(--control-accent);flex-shrink:0}
/* Match the language picker's right-aligned disclosure chevron. */
:root body details:not(.language-picker):not(.service-row-menu)>summary {
  position:relative;display:block;list-style:none;cursor:pointer;
  min-height:var(--control-height);padding:12px 42px 12px 14px;
  border:1px solid var(--control-border);border-radius:var(--control-radius);
  background:var(--control-surface);color:var(--control-ink);
  font-size:.95rem;font-weight:600;line-height:1.5;
}
:root body details:not(.language-picker):not(.service-row-menu)>summary::-webkit-details-marker{display:none}
:root body details:not(.language-picker):not(.service-row-menu)>summary::after {
  content:'';position:absolute;right:18px;top:calc(50% - 5px);
  width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);color:var(--muted,#586763);
}
:root body details[open]:not(.language-picker):not(.service-row-menu)>summary::after{transform:rotate(225deg);top:calc(50% - 1px)}
:root body details[open]:not(.language-picker):not(.service-row-menu)>summary{margin-bottom:16px;border-color:var(--control-accent)}
:root body details:not(.language-picker):not(.service-row-menu)>summary:hover{border-color:var(--control-accent)}
:root body .settings-section>summary>span{display:block;margin:4px 0 0;font-size:.85rem;font-weight:400;color:var(--muted)}
:root body .language-picker{border-radius:var(--control-radius);border-color:var(--control-border)}
:root body .language-picker>summary{min-height:var(--control-height);padding:10px 14px}
@media(forced-colors:active){:root body select:not([multiple]):not([size]),:root body select[size="1"]{appearance:auto;background-image:none;padding-right:14px}}
:root body :is(button,.button){border-radius:var(--control-radius);min-height:var(--control-height)}
:root body .card{border-radius:12px}
:root body .portal-content .intro h1{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.035em}
:root body .field>label{font-size:.9rem;line-height:1.5;margin-bottom:8px}
@media(prefers-reduced-motion:no-preference){:root body :is(select,input,textarea,summary){transition:border-color 160ms ease,background-color 160ms ease}}

/* Quiet, shared interaction language. Never animate streaming caption content,
   meters, usage values or iframe containers: live information must stay steady. */
:root body :is(.portal-content,.workflow-form,.workspace-main,.desk-input,.desk-output){min-width:0}
:root body .portal-content>.intro{margin-bottom:28px}
:root body .portal-content>.intro>p:last-child{font-size:.95rem;line-height:1.65;color:var(--muted)}
:root body :is(.field,.inline-fields,.account-grid)>*{min-width:0}
:root body :is(.card,.workflow-panel,.table-wrap){border-color:var(--control-border)}
:root body .portal-content .card>h2{font-size:1.2rem;line-height:1.3;margin-bottom:16px}
:root body .portal-content .card>p:not(.eyebrow):not(.notice){line-height:1.65}
:root body :is(.rail nav,.workspace-nav){gap:6px}
:root body .rail nav a{min-height:44px;display:flex;align-items:center;border-radius:var(--control-radius)}
:root body .table-wrap{border-radius:12px}
:root body .table-wrap :is(th,td){padding:16px 20px}
:root body .table-wrap th{font-size:.75rem;letter-spacing:.025em}
:root body .language-panel{border-radius:0 0 var(--control-radius) var(--control-radius)}
:root body :is(.language-panel,.settings-content){padding:16px}
:root body .language-panel .check{min-height:44px;border-radius:8px;padding:8px}
:root body .language-panel .check:has(input:checked){background:var(--tint,#e9f1eb)}
:root body .service-menu-items{padding:8px}
:root body .settings-section>summary{scroll-margin-top:20px}
@media(hover:hover) and (pointer:fine){
 :root body .rail nav a:hover{background:var(--tint,#e9f1eb);color:var(--brand,#176453)}
 :root body .service-row:hover{box-shadow:inset 3px 0 var(--control-accent)}
 :root body .table-wrap tbody tr:hover{background:var(--tint,#e9f1eb)}
 :root body .language-panel .check:hover{background:var(--tint,#e9f1eb)}
}
@media(max-width:600px){
 :root body .portal-content{padding-inline:18px}
 :root body .portal-content>.card{padding:20px}
 :root body .inline-fields,:root body .account-grid{grid-template-columns:minmax(0,1fr)}
 :root body .table-wrap :is(th,td){padding:14px 16px}
}
@media(prefers-reduced-motion:no-preference){
 :root body :is(button,.button,.rail nav a,.workflow-steps button,.language-panel .check,.service-row,.table-wrap tbody tr){transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
 :root body :is(button,.button):active:not(:disabled){filter:brightness(.96)}
 :root body details>summary::after,:root body .language-edit::after{transition:transform 180ms ease}
 :root body details[open]>:is(.language-panel,.settings-content,.service-menu-items){animation:control-reveal 180ms ease-out both}
 :root body :is(.settings-section,.channel-advanced,.advanced-input)[open]>:not(summary){animation:control-fade 180ms ease-out both}
 :root body .workflow-panel:not([hidden])>.workflow-panel-heading{animation:control-fade 180ms ease-out}
 :root body .rail nav a[aria-current=page]{animation:control-fade 180ms ease-out}
 @keyframes control-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 @keyframes control-fade{from{opacity:.4}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){
 :root body :is(button,.button,select,input,textarea,summary,.rail nav a,.workflow-steps button,.language-panel,.settings-content,.service-menu-items,.service-row,.workflow-panel-heading){animation:none!important;transition:none!important}
 :root body details>summary::after,:root body .language-edit::after{transition:none!important}
 :root body :is(.settings-section,.channel-advanced,.advanced-input)[open]>:not(summary){animation:none!important}
}

/* Secondary workspace screens use the same compact, responsive rhythm. */
:root body .portal-content :is(.review-columns,.split,.auth-layout)>*{min-width:0}
:root body .portal-content :is(h1,h2,h3,.transcript-text,.notice,#message){overflow-wrap:anywhere}
:root body .export-panel{max-width:800px;margin-top:24px}
:root body .review-segments .card>h2{font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
:root body .review-columns h3{font-size:.95rem;margin-top:0}
:root body .review-segments details{margin-top:20px}
:root body .topbar{flex-wrap:wrap}
:root body .topbar>a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:600px){
 :root body .topbar{padding:12px 18px;gap:8px 16px}
 :root body .portal-content :is(.split,.auth-layout,.plans){grid-template-columns:minmax(0,1fr)}
 :root body .portal-content .actions{flex-wrap:wrap}
 :root body .review-segments .card{padding:20px}
}