/* focus-workspace-preview.css, the rules scoped to the pricing page: loads with the first visit of that page (data-rattib-style="pricing" in index.html) and sits right after the shell part in the cascade. Source order is the parent sheet's. */
/* Pricing: quiet saved estimates, native calculations and optional controls. */
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing.active { display: block; --tool-accent: var(--preview-accent); --tool-on-accent: var(--preview-action-ink); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-head { min-block-size: 0; padding: 0 0 20px; margin: 0 0 18px; gap: 20px; align-items: center; border-color: var(--preview-line); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-title { flex: 1 1 auto; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-head h1 { font: 400 48px/1.15 var(--preview-display); letter-spacing: -.035em; color: var(--preview-ink); }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-head h1 { font: 500 34px/1.5 var(--preview-display); letter-spacing: 0; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-lead { margin: 10px 0 0; color: var(--preview-ink); font-size: 14px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing :is(button,input,select,textarea) { min-block-size: 44px; padding: 10px 12px; border: 1px solid var(--preview-control-line); border-radius: 12px; color: var(--preview-ink); background: var(--preview-field); font: 400 14px/1.6 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing button { border-color: var(--preview-line); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing :is(#add-pricing,#pricing-empty-add):not(:disabled) { background: var(--preview-action); color: var(--preview-action-ink); border-color: var(--preview-action); font-weight: 600; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing :is(.pricing-beginner-guide,.pricing-floor,.pricing-currency-strip,.pricing-setting,.pricing-package-card) { background: var(--preview-surface); border: 1px solid var(--preview-line); border-radius: 22px; box-shadow: var(--preview-shadow); backdrop-filter: none; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-beginner-guide { margin: 0 0 16px; padding: 16px 20px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-beginner-guide h2 { margin: 0 0 8px; font: 500 17px/1.5 var(--preview-ui); color: var(--preview-ink); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-beginner-guide p { margin: 0 0 8px; font: 400 13px/1.7 var(--preview-ui); color: var(--preview-muted); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor { padding: 18px 20px; margin: 0 0 16px; border-block-start-width: 1px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-top { gap: 20px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor :is(p,li) { color: var(--preview-muted); font: 400 13px/1.7 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-figures { grid-template-columns: repeat(2,minmax(100px,1fr)); gap: 12px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-stat { padding: 12px 16px; background: var(--preview-row); border: 1px solid var(--preview-line); border-radius: 14px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-stat-num { color: var(--preview-ink); font: 400 32px/1.25 var(--preview-display); }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-stat-num { font: 500 25px/1.5 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-tools { position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-setting { padding: 4px 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing summary { min-block-size: 44px; font: 400 13px/1.7 var(--preview-ui); color: var(--preview-ink); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-currency-strip { margin: 0 0 16px; padding: 16px 20px; gap: 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing :is(.currency-hint,.fx-hint,.budget-suggest,.pricing-calculation,.pricing-cell-label,.pricing-floor-stat-label,.pricing-floor-stat-unit) { font: 400 13px/1.7 var(--preview-ui); color: var(--preview-muted); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-packages-label { display: block; width: fit-content; margin: 0 0 12px; padding: 6px 10px; border-radius: 10px; background: var(--preview-dialog-surface); color: var(--preview-ink); font: 500 14px/1.6 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table tbody { grid-template-columns: repeat(auto-fit,minmax(min(100%,430px),1fr)); gap: 20px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table .pricing-package-card { padding: 20px; gap: 16px 12px; border-radius: 22px; background: var(--preview-surface); border: 1px solid var(--preview-line); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table [data-pricing-output] { background: var(--preview-row); border: 1px solid var(--preview-line); border-radius: 12px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table [data-pricing-output="price"] { background: var(--preview-row); border-color: var(--preview-accent); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table [data-pricing-output] .calc.money-fig { color: var(--preview-ink); font: 500 20px/1.5 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .quote-floor-chip { color: var(--preview-muted); background: var(--preview-row); border-color: var(--preview-line); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot { background: var(--preview-surface); border: 1px solid var(--preview-line); border-radius: 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot :is(td,.calc) { background: transparent; color: var(--preview-ink); }
/* Keep the native translated cell labels visible beside their existing totals
   at every width; the heading owns one row without a second Total prefix. */
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 20px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row > td { display: grid; align-content: start; gap: 6px; padding: 0; min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row > td::before { content: attr(data-label); display: block; color: var(--preview-muted); font: 400 12px/1.5 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row > td:first-child { display: block; grid-column: 1 / -1; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row > td:first-child::before { content: none; display: none; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row > td:last-child { display: none; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .calc { font: 500 20px/1.5 var(--preview-ui); }
@media (max-width:700px) {
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-tfoot .pricing-totals-row { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; }
}
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) { background: var(--preview-dialog-surface); color: var(--preview-ink); border: 1px solid var(--preview-line); border-radius: 24px; padding: 24px; box-shadow: var(--preview-shadow); backdrop-filter: none; max-block-size: calc(100dvh - 32px); overflow: auto; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) h2 { font: 400 32px/1.3 var(--preview-display); color: var(--preview-ink); }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) h2 { font: 500 24px/1.5 var(--preview-display); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) :is(button,input,select,textarea) { font: 400 14px/1.6 var(--preview-ui); min-block-size: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--preview-control-line); color: var(--preview-ink); background: var(--preview-field); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) :is(button[type="submit"],.primary):not(:disabled) { background: var(--preview-action); color: var(--preview-action-ink); border-color: var(--preview-action); font-weight: 600; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #create-draft-dialog :is(.create-draft-field,.pricing-field-help,.create-draft-detail-dirty) { color: var(--preview-muted); opacity: 1; font: 400 13px/1.7 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #create-draft-dialog .create-draft-actions { background: var(--preview-dialog-surface); border-color: var(--preview-line); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #pricing-proposal-choice { inline-size: min(640px,calc(100vw - 36px)); }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #pricing-proposal-choice > :is(select,.localized-control) { display: block; inline-size: 100%; margin-block: 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #pricing-proposal-choice > button { margin-block: 4px; margin-inline-end: 8px; }
@media(max-width:700px) {
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) { width: calc(100vw - 36px); padding: 18px; border-radius: 22px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed :is(#create-draft-dialog,#pricing-proposal-choice) :is(input,select,textarea,.localized-control-input) { font-size: 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-head { align-items: stretch; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-head h1 { font-size: 36px; }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-head h1 { font-size: 26px; }
html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing :is(input,select,textarea) { font-size: 16px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: 100%; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-title { flex: 0 1 auto; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-actions #add-pricing { grid-column: 1 / -1; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing :is(.pricing-beginner-guide,.pricing-floor,.pricing-currency-strip) { padding: 16px; border-radius: 20px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-top { grid-template-columns: minmax(0,1fr); gap: 12px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-studio-tools { grid-template-columns: minmax(0,1fr); gap: 8px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing .pricing-floor-stat { padding: 8px 12px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table .pricing-package-card { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; gap: 12px; }
  html[data-rattib-material="glass"][data-route-surface="pricing"]:not(#_) body.workspace-framed #panel-pricing #pricing-table .pricing-package-card > :is([data-pricing-field="hours"],[data-pricing-field="rate"],[data-pricing-field="costs"],[data-pricing-field="margin"],[data-pricing-output]) { grid-column: auto; }
}