/* Shared layout, with the header anchored independently of reading direction. */
:root{--title-display:clamp(34px,3.2vw,50px);--title-question:clamp(28px,2.5vw,42px);--title-section:clamp(22px,2vw,32px);--body:16px;--helper:14px;--small:12px;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px}
body{font-size:var(--body)}
.topbar,.top-left,.top-right,.utility-cluster{direction:ltr}
.topbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.top-left{grid-column:1;grid-row:1}.brand-stack{grid-column:2;grid-row:1}.top-right{grid-column:3;grid-row:1}
.page-title{font-size:var(--title-display);line-height:1.12;letter-spacing:-.025em;margin-block:0 var(--space-3)}
.question-title{font-size:var(--title-question);line-height:1.08;letter-spacing:-.025em;max-inline-size:26ch;overflow-wrap:break-word;margin:0}
.workspace-title{font-size:var(--title-section);line-height:1.2;letter-spacing:-.02em;margin-block:0 var(--space-2)}
.panel-title h3,.panel-head h3{font-size:clamp(20px,1.7vw,26px);line-height:1.3;margin:0}
.question-wrap{inline-size:min(800px,100%);min-block-size:0;margin-block:auto;justify-content:flex-start;padding-block:var(--space-4) var(--space-5);gap:var(--space-3);text-align:start}
.question-wrap>.section-kicker,.question-wrap>.helper,.question-wrap>.answer-area,.question-wrap>.smart-box,.question-wrap>.nav-row,.question-wrap>.status-line{margin:0}
.question-wrap>.answer-area,.question-wrap>.nav-row{margin-block-start:var(--space-1)}
.question-wrap .helper,.question-wrap .lead{max-inline-size:66ch;font-size:var(--helper);line-height:1.65}
.question-wrap .section-kicker{font-size:var(--small);line-height:1.5}
.question-wrap .smart-title,.smart-note,.suggestion-chip,.helper-mini,.choice,.field label,.category-card .label{font-size:var(--helper);line-height:1.5}
.smart-box{padding:var(--space-3)}.smart-head{margin-block-end:var(--space-2)}
.helper-actions{margin-block-start:var(--space-2)}
.suggestion-row{justify-content:flex-start;gap:var(--space-1)}
.suggestion-chip{max-inline-size:100%;white-space:normal;overflow-wrap:anywhere;text-align:start;padding:10px 14px}
.suggestion-chip[aria-pressed=true]{background:#e3ebef;border-color:var(--accent-deep);box-shadow:inset 0 0 0 1px var(--accent-deep)}
.choice{text-align:start;min-inline-size:0;overflow-wrap:anywhere}
.nav-row,.nav-actions,.status-line{flex-wrap:wrap}.nav-actions{justify-content:flex-end}
.workspace-head{gap:var(--space-4);align-items:flex-start}.workspace-head>div{min-inline-size:0}.workspace-head p{max-inline-size:65ch}
input[type=email],input[type=url],input[type=tel],input[type=number],.otp,#utmPoints,[data-ltr]{direction:ltr;text-align:start;unicode-bidi:isolate}
[data-user-content]{unicode-bidi:plaintext;overflow-wrap:anywhere}
html[dir=rtl] body{font-family:"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,"Segoe UI",Arial,sans-serif}
html[dir=rtl] :is(h1,h2,h3,h4,.eyebrow,.section-kicker,.smart-title,.brand-sub){letter-spacing:0;line-height:1.24;text-transform:none}
html[dir=rtl] :is(p,label,.choice,.suggestion-chip,.helper-mini,.top-note){line-height:1.65}
html[dir=rtl] :is(.top-note,.utility-label,.save-label,.utility-meta){direction:rtl}
.brand-sub{white-space:normal;max-inline-size:240px;line-height:1.4;font-size:10px;letter-spacing:.06em}
.topbar .utility-btn{flex:none;justify-content:center}
#aiBtn{width:150px}#langBtn{width:88px}#accountBtn{width:104px}#saveBtn{width:98px}
.utility-label,.save-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-card .label{min-block-size:3em;display:flex;align-items:center;justify-content:center}
.category-card{min-block-size:152px;height:auto}
.center-page:has(.category-grid){justify-content:flex-start;padding-block-start:clamp(12px,3vh,32px)}
.intro:has(+.category-grid){min-block-size:176px}
.locale-status{display:none}
.ai-panel .ai-input-hint{font-size:12px;line-height:1.5}
@media(max-width:1100px){.topbar .utility-btn{width:40px!important;padding:0}.utility-btn .utility-label,.utility-btn .utility-meta{display:none}#saveBtn{width:40px;padding:0}.save-label{display:none}}
@media(max-width:720px){.question-title{font-size:clamp(28px,7.2vw,34px)}.question-wrap{margin-block:0;padding-block:12px 24px;gap:16px}.category-card{min-block-size:124px}.intro:has(+.category-grid){min-block-size:160px}.nav-row{gap:12px}.nav-actions{margin-inline-start:auto}.workspace-head{flex-wrap:wrap}.brand-sub{font-size:9px;max-inline-size:150px}}
#globalBack{inline-size:104px;flex:none}.topbar button{height:40px;line-height:1.4}
@media(max-width:720px){#globalBack{inline-size:40px}#globalBack span:last-child{display:none}}
#langBtn{width:120px}#saveBtn{width:130px}
html[dir=rtl] textarea:placeholder-shown,html[dir=rtl] input[type=text]:placeholder-shown{direction:rtl;text-align:start}
@media(max-width:1100px){#saveBtn{width:40px;padding:0}}
.topbar button{flex:none;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
@media(max-width:720px){
 .shell{grid-template-rows:124px 3px 1fr}
 .topbar{grid-template-rows:60px 40px;row-gap:6px;padding:8px 14px}
 .topbar .top-left{grid-column:1;grid-row:1}
 .topbar .brand-sub{max-inline-size:200px}
 .topbar .brand-stack{grid-column:2;grid-row:1}
 .topbar .top-right{grid-column:1/-1;grid-row:2;justify-content:flex-end}
 .topbar #saveBtn{width:40px;height:40px;flex:none}
 .question-wrap .question-title{font-size:clamp(28px,7.2vw,34px)}
 .workspace-head .workspace-title{font-size:var(--title-section)}
 .intro .page-title{font-size:var(--title-display)}
 .question-wrap .nav-row{position:static;background:none;padding:0;margin-block-start:8px}
 .screen{padding-block-end:32px}
}
.action-gap,.space-top-sm{margin-block-start:12px}.space-top-md{margin-block-start:16px}
.action-full{inline-size:100%;justify-content:center;margin-block-start:12px}.action-secondary-full{inline-size:100%;margin-block-start:8px}
.text-ink{color:var(--ink)}.text-caption{font-size:12px;color:var(--muted)}.caption-gap{font-size:12px;margin-block-start:8px}
.field-spacing{margin-block:8px 16px}.center-margin{margin:auto}.center-status{justify-content:center;margin-block-start:24px}

/* Keep full control labels on a separate row before they reach the centred brand. */
@media(min-width:721px) and (max-width:1300px){
 #shell{grid-template-rows:154px 3px minmax(0,1fr) auto}
 .topbar{grid-template-rows:82px 44px;row-gap:4px}
 .topbar .top-right{grid-column:1/-1;grid-row:2;justify-content:flex-end}
 .topbar .top-left{max-width:100%;overflow-wrap:anywhere}
}
.topbar .brand-stack,.topbar .utility-cluster{min-width:0;max-width:100%}