/* rattib-sheet-run
 * GENERATED by tools/build-rattib.mjs from tools/rattib-sheets.json. Do not edit: change the member sheets or the list, then run npm run build:app.
 * Members in cascade order (file, bytes, first line):
 *   canvas-studio.css 32228 11
 *   ui-system.css 34180 570
 *   work-studio.css 21854 1348
 *   money-clients-unify.css 19755 1933
 *   lane-d-surfaces.css 21074 2461
 *   focus-workspace-preview.css 59175 3082
 */
/* Studio canvas. Recreates the reference dashboard density in Sarab color and type.
   Charts stay in dashboard-ui.js and only describe saved workspace records. */
@font-face { font-family: "Instrument Sans"; src: url("/_next/static/media/f06bf9da926bae75-s.p.2874ccu1_u7jf.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; unicode-range: U+0020-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0308, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "Instrument Serif"; src: url("/_next/static/media/e41d5df559864f9e-s.p.1g73gv09-xcb6.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/_next/static/media/99e609270109b47d-s.p.40sczeszzbjw1.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/_next/static/media/effe91970fc4db64-s.p.0oace-s_gkfks.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }

html[data-rattib-material="glass"] {
  --studio-canvas: var(--bg);
  --studio-card: var(--card);
  --studio-ink: var(--text);
  --studio-muted: var(--muted);
  --studio-line: color-mix(in srgb, var(--border) 70%, transparent);
  --studio-accent: var(--accent-work, var(--green));
  --studio-accent-ink: var(--accent-work-ink, var(--text));
  --studio-shadow: 0 18px 40px rgb(12 10 7 / 8%);
  --studio-radius: 28px;
  --studio-mint: var(--accent-work-soft, var(--row));
  --studio-apricot: var(--accent-business-soft, var(--row));
  --studio-lilac: var(--accent-resources-soft, var(--row));
  --studio-blue: var(--accent-planning-soft, var(--row));
  --studio-pill: var(--text);
  --studio-pill-ink: var(--bg);
  --studio-glow: none;
  --studio-display: var(--font);
  --studio-mono: var(--font);
}
html[data-rattib-material="glass"][lang="en"] .workspace-framed {
  --font: "Instrument Sans", "IBM Plex Sans Arabic", Arial, sans-serif;
  --studio-display: "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif;
  --studio-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", "Courier New", monospace;
}
html[data-rattib-material="glass"][lang="ar"] .workspace-framed {
  --font: "IBM Plex Sans Arabic", Arial, sans-serif;
  --studio-display: "IBM Plex Sans Arabic", Arial, sans-serif;
  --studio-mono: "IBM Plex Sans Arabic", Arial, sans-serif;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] {
  --studio-canvas: #efe6dc;
  --studio-card: #fffcf7;
  --studio-ink: #0c0a07;
  --studio-muted: #6d6458;
  --studio-line: rgb(12 10 7 / 8%);
  --studio-accent: #00d492;
  --studio-accent-ink: #0c0a07;
  --studio-shadow: 0 18px 40px rgb(12 10 7 / 8%);
  --studio-glow: radial-gradient(1100px 560px at 0% -12%, rgb(155 200 167 / 72%), transparent 58%), radial-gradient(920px 520px at 100% -8%, rgb(200 180 232 / 62%), transparent 56%), radial-gradient(760px 420px at 72% 110%, rgb(255 220 189 / 48%), transparent 52%);
  --studio-mint: #deead2;
  --studio-apricot: #ffdcbd;
  --studio-lilac: #e5d9ed;
  --studio-blue: #d5e4ee;
  --studio-pill: #0c0a07;
  --studio-pill-ink: #f3f0e9;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] {
  --studio-canvas: #0c0a07;
  --studio-card: #15120d;
  --studio-ink: #f3f0e9;
  --studio-muted: #b7ad9e;
  --studio-line: rgb(243 240 233 / 10%);
  --studio-accent: #00d492;
  --studio-accent-ink: #0c0a07;
  --studio-shadow: 0 18px 44px rgb(12 10 7 / 32%);
  --studio-glow: radial-gradient(840px 380px at 0% 0%, rgb(0 212 146 / 14%), transparent 58%), radial-gradient(680px 340px at 100% 0%, rgb(200 180 232 / 12%), transparent 52%);
  --studio-mint: #1c3a30;
  --studio-apricot: #3a2a1c;
  --studio-lilac: #2c2438;
  --studio-blue: #1c2a33;
  --studio-pill: #00d492;
  --studio-pill-ink: #0c0a07;
}

html[data-rattib-material="glass"] body.workspace-framed {
  background-color: var(--studio-canvas);
  background-image: var(--studio-glow);
  color: var(--studio-ink);
}
html[data-rattib-material="glass"] body.rt-route:not(#_) .workspace-framed .workspace > main {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-block-start: 4px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-header { margin-block-end: 8px; padding-block-end: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-lead { margin: 0; }

@media (min-width: 1001px) {
  html[data-rattib-material="glass"] .workspace-framed .top { margin-inline: 256px 80px; }
  html[data-rattib-material="glass"] .workspace-framed .brand { inset-inline-start: 26px; width: 196px; top: 22px; }
  html[data-rattib-material="glass"] .workspace-framed .app-shell { margin-inline: 252px 72px; }
  html[data-rattib-material="glass"] .workspace-framed #import-preview,
  html[data-rattib-material="glass"] .workspace-framed #timer-root,
  html[data-rattib-material="glass"] .workspace-framed #day1-tutorial,
  html[data-rattib-material="glass"] .workspace-framed #empty-workspace,
  html[data-rattib-material="glass"] .workspace-framed #backup-nudge,
  html[data-rattib-material="glass"] .workspace-framed #workspace-coordination,
  html[data-rattib-material="glass"] .workspace-framed #workspace-recovery,
  html[data-rattib-material="glass"] .workspace-framed .workspace-chrome-feedback,
  html[data-rattib-material="glass"] .workspace-framed .foot { margin-inline: 256px 80px; }
  html[data-rattib-material="glass"] .workspace-navigation-sidebar,
  html[data-rattib-material="glass"] .workspace-utilities {
    background: var(--studio-card);
    border: 1px solid var(--studio-line);
    border-radius: 28px;
    box-shadow: var(--studio-shadow);
  }
  html[data-rattib-material="glass"] .workspace-navigation-sidebar {
    inset-inline-start: 12px;
    inset-block: 12px;
    width: 228px;
    height: calc(100dvh - 24px);
    padding: 78px 12px 16px;
  }
}

html[data-rattib-material="glass"] .workspace-framed .workspace-group-label {
  font-family: var(--studio-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--studio-muted);
}
html[data-rattib-material="glass"][lang="ar"] .workspace-framed .workspace-group-label {
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
}
html[data-rattib-material="glass"] .workspace-framed .tabs .tab {
  border-radius: 999px;
  border-color: transparent;
  color: var(--studio-muted);
  background: transparent;
  box-shadow: none;
}
html[data-rattib-material="glass"] .workspace-framed .tabs .tab:hover { color: var(--studio-ink); background: color-mix(in srgb, var(--studio-ink) 5%, transparent); }
html[data-rattib-material="glass"] .workspace-framed .tabs .tab.active,
html[data-rattib-material="glass"] .workspace-framed .tabs .tab.active:hover {
  background: var(--studio-pill);
  color: var(--studio-pill-ink);
  border-color: transparent;
  box-shadow: none;
  font-weight: 600;
}
html[data-rattib-material="glass"] .workspace-framed .tabs .tab.active .tab-icon { color: inherit; filter: none; }
html[data-rattib-material="glass"] .workspace-framed .workspace-mobile-nav {
  background: var(--studio-card);
  border: 1px solid var(--studio-line);
  box-shadow: var(--studio-shadow);
}
@media (max-width: 1000px) {
  html[data-rattib-material="glass"] .workspace-framed.workspace-mobile-ready .workspace-mobile-nav {
    inset-inline: 10px;
    inset-block-end: 10px;
    width: auto;
    border-radius: 24px;
    padding: 6px;
  }
  html[data-rattib-material="glass"] .workspace-framed.workspace-mobile-ready { padding-block-end: calc(92px + env(safe-area-inset-bottom)); }
  html[data-rattib-material="glass"] .workspace-mobile-item { min-height: 44px; border-radius: 16px; }
  html[data-rattib-material="glass"] .workspace-mobile-item.active { background: var(--studio-pill); color: var(--studio-pill-ink); }
}

html[data-rattib-material="glass"] .workspace-framed .panel:not(#panel-focus) :is(
  .suite-header h1,.panel-head h1,.documents-head h1,.contracts-header h1,.finance-header h1,.calendar-head h1,.time-head h1,.knowledge-header h1,
  .suite-header h2,.panel-head h2
) {
  font-family: var(--studio-display);
  font-weight: 400;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--studio-ink);
}
html[data-rattib-material="glass"][lang="ar"] .workspace-framed .panel:not(#panel-focus) :is(
  .suite-header h1,.panel-head h1,.documents-head h1,.contracts-header h1,.finance-header h1,.calendar-head h1,.time-head h1,.knowledge-header h1
) { letter-spacing: 0; font-weight: 600; }

html[data-rattib-material="glass"] .workspace-framed .panel:not(#panel-focus) .suite-primary {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--studio-accent);
  color: var(--studio-accent-ink);
}
html[data-rattib-material="glass"] .workspace-framed .panel:not(#panel-focus) :is(.suite-views,.calendar-views,.documents-modes,.crm-view) {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--studio-card);
  border: 1px solid var(--studio-line);
  box-shadow: var(--studio-shadow);
}
html[data-rattib-material="glass"] .workspace-framed .panel:not(#panel-focus) :is(.suite-views,.calendar-views,.documents-modes,.crm-view) button {
  min-height: 44px;
  border-radius: 999px;
  border-color: transparent;
}
html[data-rattib-material="glass"] .workspace-framed .panel:not(#panel-focus) :is(.suite-views,.calendar-views,.documents-modes,.crm-view) button[aria-pressed="true"] {
  background: var(--studio-pill);
  color: var(--studio-pill-ink);
  border-color: transparent;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-step,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget {
  background: var(--studio-card);
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius);
  box-shadow: var(--studio-shadow);
  color: var(--studio-ink);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-step { min-block-size: 0; padding: 14px 18px; margin-block-end: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-label,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-kicker,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric span {
  font-family: var(--studio-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--studio-muted);
}
html[data-rattib-material="glass"][lang="ar"] .workspace-framed #panel-home :is(.home-next-label,.home-signal-kicker,.home-metric span) {
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-copy h2,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric strong,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-value,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-planned strong,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-task-ring bdi {
  font-family: var(--studio-display);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--studio-ink);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metrics { gap: 12px; margin-block: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric {
  min-block-size: 96px;
  padding: 14px 16px 12px;
  gap: 10px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric strong { font-size: 36px; line-height: .95; color: var(--studio-ink); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="today"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--studio-mint) 78%, var(--studio-card)), var(--studio-card));
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="projects"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--studio-blue) 70%, var(--studio-card)), var(--studio-card));
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="overdue"] {
  background: var(--studio-pill);
  color: var(--studio-pill-ink);
  border-color: transparent;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="overdue"] :is(span,strong) { color: var(--studio-pill-ink); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric-meter {
  display: block;
  height: 6px;
  margin-block-start: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-ink) 10%, transparent);
  overflow: hidden;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric-meter > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--studio-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
html[data-rattib-material="glass"][dir="rtl"] .workspace-framed #panel-home .home-metric-meter > span { transform-origin: 100% 50%; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="overdue"] .home-metric-meter { background: rgb(243 240 233 / 22%); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="overdue"] .home-metric-meter > span { background: var(--studio-pill-ink); }

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-block: 0 18px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal { padding: 18px 18px 14px; min-inline-size: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal[data-home-signal="deadlines"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--studio-mint) 62%, var(--studio-card)), var(--studio-card) 58%);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal[data-home-signal="focus"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--studio-lilac) 70%, var(--studio-card)), var(--studio-card) 58%);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-head { display: grid; gap: 4px; margin-block-end: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-kicker,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-note,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-aside,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-empty { margin: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-value { font-size: 40px; line-height: 1; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-note,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-empty,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-aside { color: var(--studio-muted); font-size: 12px; line-height: 1.5; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-chart { display: block; width: 100%; height: 96px; margin-block: 4px 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-line { stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-dot { fill: var(--studio-card); stroke: currentColor; stroke-width: 2.5; }
html[data-rattib-material="glass"] .workspace-framed #panel-home [data-home-signal="deadlines"] { color: #176347; }
html[data-rattib-material="glass"] .workspace-framed #panel-home [data-home-signal="focus"] { color: #6d4ea3; }
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-home [data-home-signal="deadlines"] { color: #9bc8a7; }
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-home [data-home-signal="focus"] { color: #c8b4e8; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-head,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-series,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-list,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-empty,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-aside,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-amounts { color: var(--studio-ink); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-series,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-list,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-amounts { list-style: none; margin: 0; padding: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-series { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-series li { display: grid; justify-items: center; gap: 2px; min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-day { color: var(--studio-muted); font-size: 10px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-series bdi { font-size: 11px; font-variant-numeric: tabular-nums; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-list { display: grid; gap: 8px; margin-block-start: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-list .home-avatar { width: 32px; height: 32px; font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-list li,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-amounts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--studio-canvas) 72%, var(--studio-card));
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-visual { display: flex; align-items: center; gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut { width: 132px; height: 132px; flex: 0 0 auto; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut circle { stroke-width: 14; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut-figure { fill: var(--studio-ink); font-family: var(--studio-display); font-size: 28px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut-track { stroke: color-mix(in srgb, var(--studio-ink) 8%, transparent); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut-arc.is-overdue { stroke: #d7ac78; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut-arc.is-soon { stroke: #00d492; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut-arc.is-later { stroke: #c8b4e8; }
html[data-rattib-material="glass"]:not([data-color-theme="sarab"]) .workspace-framed #panel-home .home-invoice-donut-arc.is-overdue { stroke: var(--accent-business, var(--studio-accent)); }
html[data-rattib-material="glass"]:not([data-color-theme="sarab"]) .workspace-framed #panel-home .home-invoice-donut-arc.is-soon { stroke: var(--studio-accent); }
html[data-rattib-material="glass"]:not([data-color-theme="sarab"]) .workspace-framed #panel-home .home-invoice-donut-arc.is-later { stroke: var(--accent-resources, var(--studio-accent)); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend { display: grid; gap: 8px; flex: 1; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 8px; align-self: center; background: currentColor; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend .is-overdue { color: #8a5a28; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend .is-soon { color: #176347; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-legend .is-later { color: #6d4ea3; }
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-home .home-invoice-legend .is-overdue { color: #d7ac78; }
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-home .home-invoice-legend .is-soon { color: #9bc8a7; }
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-home .home-invoice-legend .is-later { color: #c8b4e8; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-amounts { display: grid; gap: 8px; margin-block-start: 12px; }

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget { padding: 20px 20px 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head { border: 0; padding: 0; margin-block-end: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head h2 {
  font-family: var(--studio-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.02em;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head button {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--studio-line);
  background: transparent;
  color: var(--studio-ink);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-work-row,.home-project-row,.home-contact-row) {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin-block: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--studio-canvas) 70%, var(--studio-card));
  color: inherit;
  text-align: start;
  font: inherit;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--studio-mint);
  color: var(--studio-ink);
  font-weight: 650;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-work-row[data-home-status="todo"] { background: color-mix(in srgb, var(--studio-mint) 72%, var(--studio-card)); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-work-row[data-home-status="doing"] { background: color-mix(in srgb, var(--studio-lilac) 72%, var(--studio-card)); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-work-row[data-home-status="done"] { background: color-mix(in srgb, var(--studio-apricot) 72%, var(--studio-card)); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-task-ring { inline-size: 128px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-task-ring circle { stroke-width: 10; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-task-ring-arc { stroke: var(--studio-accent); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-week-chart { align-items: end; min-height: 168px; gap: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-week-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 16px;
  height: 96px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-ink) 7%, transparent);
  overflow: hidden;
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-week-fill {
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--studio-accent), var(--studio-lilac));
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-status-row progress,
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-project-row progress { accent-color: var(--studio-accent); }

html[data-rattib-material="glass"] .workspace-framed .panel:not(#panel-focus) :is(
  .suite-project-list,.suite-project-detail,.suite-board-column,.suite-task-row,.follow-card,.knowledge-library,.knowledge-detail,.knowledge-block,
  .calendar-inspector,.calendar-grid,.files-content,.files-usage,.finance-report,.finance-results,.finance-detail,.contracts-library,.contracts-detail,
  .documents-list,.documents-detail,.invoice-paper,.pricing-package-card,.pricing-floor,.week-focus,.week-money,.week-glance-card,.time-total-card,.time-list,
  .forms-library,.forms-editor,.forms-field
) {
  border-radius: 22px;
  border-color: var(--studio-line);
  box-shadow: var(--studio-shadow);
}
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column[data-task-drop-status="todo"] { background: var(--studio-mint); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column[data-task-drop-status="doing"] { background: var(--studio-lilac); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column[data-task-drop-status="done"] { background: var(--studio-apricot); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-task-row { background: var(--studio-card); border-radius: 18px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row,
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .documents-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin-block: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--studio-canvas) 55%, var(--studio-card));
  box-shadow: none;
  color: inherit;
  text-align: start;
}
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-money,
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .documents-row-meta > span:first-child {
  font-family: var(--studio-display);
  font-size: 22px;
  font-weight: 400;
}
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item,
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-block,
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card,
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row,
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row,
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .documents-row {
  border-radius: 16px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date { border-radius: 16px; min-block-size: 96px; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date[aria-pressed="true"] {
  background: var(--studio-pill);
  color: var(--studio-pill-ink);
}
html[data-rattib-material="glass"] .workspace-framed :is(#panel-finance,#panel-timesheet,#panel-proposal,#panel-pricing) :is(.table-wrap,table) { max-width: 100%; }
html[data-rattib-material="glass"] .workspace-framed :is(#panel-finance,#panel-timesheet,#panel-proposal,#panel-pricing) .table-wrap,
html[data-rattib-material="glass"] .workspace-framed :is(#panel-finance .finance-results,#panel-timesheet .time-list,#panel-proposal .invoice-items) {
  overflow-x: auto;
}
html[data-rattib-material="glass"] .workspace-framed :is(#panel-finance .finance-report td,.time-total-value,.pricing-floor-stat-num) {
  font-family: var(--studio-display);
  font-weight: 400;
}

@media (max-width: 1100px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signals { grid-template-columns: 1fr; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric strong,
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signal-value { font-size: 34px; }
}
@media (forced-colors: active) {
  html[data-rattib-material="glass"] .workspace-framed :is(.home-signal,.home-metric,.home-widget,.workspace-navigation-sidebar,.workspace-mobile-nav) {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  html[data-rattib-material="glass"] .workspace-framed .tabs .tab.active,
  html[data-rattib-material="glass"] .workspace-framed .home-metric[data-home-metric="overdue"] {
    background: Highlight;
    color: HighlightText;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-signal-line,.home-invoice-donut-arc) { stroke: CanvasText; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-signal-dot,.home-invoice-donut-figure) { fill: CanvasText; stroke: CanvasText; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric-meter,
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric-meter > span { background: CanvasText; }
}
/* Dark mode keeps documents on desert night. Printing still uses paper. */
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-proposal .invoice-paper {
  --border: rgb(243 240 233 / 16%);
  --text: #f3f0e9;
  --muted: #b7ad9e;
  --row: #1c1914;
  --card: #15120d;
  --accent: #00d492;
  --accent-business: #d7ac78;
  background: #15120d;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 16%);
  box-shadow: none;
}
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-proposal .invoice-paper .invoice-state,
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-proposal .invoice-paper :is(thead, th),
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-proposal .invoice-paper .invoice-total {
  background: #1c1914;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 16%);
}
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-proposal .invoice-paper td { color: #f3f0e9; }
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-contracts .contracts-paper {
  background: #15120d;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 16%);
  box-shadow: none;
}
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed .public-questionnaire {
  --text: #f3f0e9;
  --muted: #b7ad9e;
  --border: rgb(243 240 233 / 16%);
  --input: #1c1914;
  --card: #15120d;
  --glass-control: #1c1914;
  --glass-input-border: rgb(243 240 233 / 28%);
  --glass-option-bg: #1c1914;
  --glass-option-text: #f3f0e9;
  color: #f3f0e9;
  background: #15120d;
  border-color: rgb(243 240 233 / 16%);
}
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed .public-questionnaire p { color: #b7ad9e; }

@media (prefers-reduced-motion: reduce) {
  html[data-rattib-material="glass"] .workspace-framed .home-signal-chart { transition: none; }
}
/* Rattib shared UI. Loaded last so shell geometry and Sarab tokens win.
   Opt-in components use .rt-*. Shell rules retarget the existing frame.
   Do not set overflow, transform, filter, or contain on html, body,
   .app-shell, .workspace, main, or #panel-focus — Focus is position:fixed. */

/* --- Sarab tokens. Other palettes stay on their own blocks. --- */
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] {
  --bg: #0c0a07;
  --card: #15120d;
  --rail: #12100c;
  --row: #221e17;
  --input: #1c1914;
  --elevated: #2a261e;
  --border: #3c3428;
  --text: #f3f0e9;
  --muted: #b8afa0;
  --danger: #ff8d86;
  --warn-bg: #2a2114;
  --danger-surface: #241512;
  --danger-border: #663b32;
  --accent-work: #00d492;
  --accent-work-ink: #0c0a07;
  --accent-work-soft: #14352b;
  --accent-planning: #9ec3d6;
  --accent-planning-ink: #102028;
  --accent-planning-soft: #1a2c36;
  --accent-resources: #c8b4e8;
  --accent-resources-ink: #1b1228;
  --accent-resources-soft: #2c2438;
  --accent-business: #e4c09a;
  --accent-business-ink: #2a1c10;
  --accent-business-soft: #3a2a1c;
  --accent-sharing: #7dcec0;
  --accent-sharing-ink: #0c0a07;
  --accent-sharing-soft: #16382c;
  --glass-canvas: #0c0a07;
  --glass-panel: #12100c;
  --glass-card: #15120d;
  --glass-control: #1c1914;
  --glass-raised: #221e17;
  --glass-nav: rgb(18 16 12 / .94);
  --glass-border: #3c3428;
  --glass-input-border: #6d6458;
  --glass-rim: rgb(243 240 233 / .08);
  --glass-sheen: linear-gradient(140deg, rgb(243 240 233 / .05), transparent 65%);
  --glass-option-bg: #15120d;
  --glass-option-text: #f3f0e9;
  --glass-disabled: #221e17;
  --glass-disabled-text: #b8afa0;
  --glass-error: #ff8d86;
  --glass-ambient: radial-gradient(ellipse at 8% 0%, rgb(0 212 146 / .14), transparent 52%), radial-gradient(ellipse at 100% 0%, rgb(200 180 232 / .12), transparent 48%);
  --chrome-glass: rgb(18 16 12 / .94);
  --chrome-glint: rgb(243 240 233 / .05);
  --chrome-muted: #b8afa0;
  --studio-canvas: #0c0a07;
  --studio-card: #15120d;
  --studio-ink: #f3f0e9;
  --studio-muted: #b8afa0;
  --studio-line: rgb(243 240 233 / 10%);
  --studio-accent: #00d492;
  --studio-accent-ink: #0c0a07;
  --studio-mint: #1c3a30;
  --studio-apricot: #3a2a1c;
  --studio-lilac: #2c2438;
  --studio-blue: #1c2a33;
  --studio-pill: #00d492;
  --studio-pill-ink: #0c0a07;
  --rt-mint: #1c3a30;
  --rt-apricot: #3a2a1c;
  --rt-lilac: #2c2438;
  --rt-blue: #1c2a33;
  --rt-shadow: 0 18px 44px rgb(12 10 7 / 32%);
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] {
  --bg: #f3f0e9;
  --card: #fffdf8;
  --rail: #f7f5ee;
  --row: #efeae1;
  --input: #fffdf8;
  --elevated: #e7f3ea;
  --border: #e0d8cc;
  --text: #1b1812;
  --muted: #5c564c;
  --danger: #a42f2f;
  --warn-bg: #f5f0e0;
  --danger-surface: #f8eaea;
  --danger-border: #e2b4b4;
  --accent-work: #176347;
  --accent-work-ink: #f7f5ee;
  --accent-work-soft: #deead2;
  --accent-planning: #2f5f78;
  --accent-planning-ink: #f7f5ee;
  --accent-planning-soft: #d5e4ee;
  --accent-resources: #5c4578;
  --accent-resources-ink: #f7f5ee;
  --accent-resources-soft: #e5d9ed;
  --accent-business: #7a4e22;
  --accent-business-ink: #f7f5ee;
  --accent-business-soft: #ffdcbd;
  --accent-sharing: #1d6458;
  --accent-sharing-ink: #f7f5ee;
  --accent-sharing-soft: #deead2;
  --glass-canvas: #f3f0e9;
  --glass-panel: #f7f5ee;
  --glass-card: #fffdf8;
  --glass-control: #fffdf8;
  --glass-raised: #fffdf8;
  --glass-nav: rgb(247 245 238 / .94);
  --glass-border: #e0d8cc;
  --glass-input-border: #6d6458;
  --glass-rim: rgb(255 253 248 / .9);
  --glass-sheen: linear-gradient(140deg, rgb(255 253 248 / .7), transparent 65%);
  --glass-option-bg: #fffdf8;
  --glass-option-text: #1b1812;
  --glass-disabled: #efeae1;
  --glass-disabled-text: #5c564c;
  --glass-error: #a42f2f;
  --glass-action: #00d492;
  --glass-action-text: #0c0a07;
  --glass-focus: #176347;
  --glass-ambient: radial-gradient(ellipse at 0% 0%, rgb(155 200 167 / .45), transparent 55%), radial-gradient(ellipse at 100% 0%, rgb(200 180 232 / .35), transparent 50%);
  --chrome-glass: rgb(247 245 238 / .94);
  --chrome-glint: rgb(255 253 248 / .55);
  --chrome-muted: #5c564c;
  --studio-canvas: #f3f0e9;
  --studio-card: #fffdf8;
  --studio-ink: #1b1812;
  --studio-muted: #5c564c;
  --studio-line: rgb(12 10 7 / 8%);
  --studio-accent: #00d492;
  --studio-accent-ink: #0c0a07;
  --studio-mint: #deead2;
  --studio-apricot: #ffdcbd;
  --studio-lilac: #e5d9ed;
  --studio-blue: #d5e4ee;
  --studio-pill: #0c0a07;
  --studio-pill-ink: #f3f0e9;
  --rt-mint: #deead2;
  --rt-apricot: #ffdcbd;
  --rt-lilac: #e5d9ed;
  --rt-blue: #d5e4ee;
  --rt-shadow: 0 18px 40px rgb(12 10 7 / 8%);
}

/* Chapter fills stay on actions. Oasis is the shared primary. */
html[data-rattib-material="glass"][data-color-theme="sarab"] .workspace-framed .workspace-create {
  background: #00d492;
  color: #0c0a07;
}

/* --- Page grid and components. Adopt these; do not restyle the shell per tab. --- */
.rt-page {
  display: grid;
  gap: 16px;
  min-inline-size: 0;
}
.rt-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-inline-size: 0;
}
.rt-kicker {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
html[lang="ar"] .rt-kicker {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.rt-display {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}
html[lang="ar"] .rt-display {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
}
.rt-num { font-variant-numeric: tabular-nums; }
.rt-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}
.rt-card,
.rt-card-stat,
.rt-empty {
  min-inline-size: 0;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--rt-shadow, 0 18px 40px rgb(12 10 7 / 8%));
}
.rt-card,
.rt-card-stat { padding: 20px; }
.rt-card-stat { display: grid; gap: 8px; align-content: space-between; min-block-size: 112px; }
.rt-card-stat .rt-display { font-size: clamp(28px, 3vw, 40px); }
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--row);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.rt-btn-primary { background: #00d492; color: #0c0a07; }
.rt-btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.rt-btn-quiet { background: var(--row); color: var(--text); }
.rt-btn-danger { background: transparent; border-color: var(--danger-border, var(--danger)); color: var(--danger); }
.rt-btn-icon { inline-size: 44px; padding: 0; }
.rt-field,
.rt-select {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--input);
  color: var(--text);
  font: inherit;
}
.rt-select {
  appearance: none;
  padding-inline-end: 36px;
  background-image: 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='%23c4b8a6' stroke-width='1.75'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
html[dir="rtl"] .rt-select { background-position: left 12px center; }
html[data-theme="light"] .rt-select {
  background-image: 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='%235c564c' stroke-width='1.75'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
.rt-pill {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  max-inline-size: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--rt-mint, var(--row));
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rt-pill-mint { background: var(--rt-mint, var(--row)); }
.rt-pill-apricot { background: var(--rt-apricot, var(--row)); }
.rt-pill-lilac { background: var(--rt-lilac, var(--row)); }
.rt-pill-blue { background: var(--rt-blue, var(--row)); }
.rt-pill-signal { background: var(--danger-surface, var(--row)); color: var(--danger); }
.rt-tabs {
  display: flex;
  gap: 4px;
  max-inline-size: 100%;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  overflow-x: auto;
}
.rt-tabs button {
  min-block-size: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
}
.rt-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.rt-table-scroll { max-inline-size: 100%; overflow-x: auto; }
.rt-table { inline-size: 100%; min-inline-size: 0; border-collapse: collapse; }
.rt-table th,
.rt-table td {
  padding: 10px 12px;
  text-align: start;
  overflow-wrap: anywhere;
  border-block-end: 1px solid var(--border);
}
.rt-modal,
.rt-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 16px;
  background: rgb(12 10 7 / .64);
}
.rt-modal { display: grid; place-items: center; }
.rt-sheet { display: flex; align-items: flex-end; justify-content: center; }
.rt-modal-card,
.rt-sheet-card {
  inline-size: min(520px, 100%);
  max-block-size: min(80dvh, 720px);
  overflow: auto;
  padding: 20px;
  border-radius: 24px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.rt-sheet-card { inline-size: min(640px, 100%); border-radius: 24px 24px 0 0; }
.rt-toast {
  position: fixed;
  z-index: 90;
  inset-inline-start: auto;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  max-inline-size: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--rt-shadow, 0 18px 40px rgb(12 10 7 / 16%));
}
.rt-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 28px;
  border-style: dashed;
  box-shadow: none;
}
.rt-empty h2,
.rt-empty p { margin: 0; overflow-wrap: anywhere; }
.rt-chart { display: grid; gap: 12px; min-inline-size: 0; }
.rt-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  block-size: 140px;
  min-inline-size: 0;
}
.rt-bar {
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: calc(var(--rt-value, 40) * 1%);
  border-radius: 10px 10px 4px 4px;
  background: var(--rt-fill, #9bc8a7);
}
.rt-donut {
  inline-size: 96px;
  block-size: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--rt-fill, #00d492) calc(var(--rt-value, 0) * 1%), var(--rt-track, var(--row)) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
}
.rt-modal[hidden],
.rt-sheet[hidden],
.rt-toast[hidden] { display: none; }

@media (min-width: 768px) {
  .rt-grid-2,
  .rt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .rt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-grid .rt-span-2 { grid-column: span 2; }
}
@media (max-width: 430px) {
  .rt-page,
  .rt-grid { gap: 12px; }
  .rt-card,
  .rt-card-stat { padding: 16px; border-radius: 20px; }
}

/* --- One frame: sidebar, top, content, dock. --- */
@media (min-width: 1001px) {
  html[data-rattib-material="glass"] {
    --rt-frame: 8px;
    --rt-sidebar: 200px;
    --rt-dock: 52px;
    --rt-gap: 12px;
    --rt-content-start: calc(var(--rt-frame) + var(--rt-sidebar) + var(--rt-gap));
    --rt-content-end: calc(var(--rt-frame) + var(--rt-dock) + var(--rt-gap));
    --rt-nav-clearance: 0px;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-navigation-sidebar {
    inset-inline-start: var(--rt-frame);
    inset-block: var(--rt-frame);
    inline-size: var(--rt-sidebar);
    block-size: calc(100dvh - (2 * var(--rt-frame)));
    height: calc(100dvh - (2 * var(--rt-frame)));
    padding: 96px 12px 16px;
    z-index: 30;
    background: var(--studio-card, var(--card));
    border: 1px solid var(--studio-line, var(--border));
    border-radius: 28px;
    box-shadow: var(--rt-shadow, var(--studio-shadow));
  }
  html[data-rattib-material="glass"] .workspace-framed .brand {
    inset-inline-start: calc(var(--rt-frame) + 14px);
    inset-block-start: calc(var(--rt-frame) + 14px);
    top: calc(var(--rt-frame) + 14px);
    inline-size: calc(var(--rt-sidebar) - 28px);
    width: calc(var(--rt-sidebar) - 28px);
    z-index: 40;
  }
  html[data-rattib-material="glass"] .workspace-framed .top,
  html[data-rattib-material="glass"] .workspace-framed .app-shell,
  html[data-rattib-material="glass"] .workspace-framed :is(
    .foot,
    #import-preview,
    #timer-root,
    #day1-tutorial,
    #empty-workspace,
    #backup-nudge,
    #workspace-coordination,
    #workspace-recovery,
    .workspace-chrome-feedback
  ) {
    margin-inline: var(--rt-content-start) var(--rt-content-end);
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-utilities {
    inset-inline-end: var(--rt-frame);
    inset-block: var(--rt-frame);
    inline-size: var(--rt-dock);
    width: var(--rt-dock);
    z-index: 50;
    background: var(--studio-card, var(--card));
    border: 1px solid var(--studio-line, var(--border));
    border-radius: 20px;
    box-shadow: var(--rt-shadow, var(--studio-shadow));
  }
  body.workspace-framed.workspace-fit .workspace-notices > #first-run-root {
    margin-inline: var(--rt-content-start) var(--rt-content-end);
  }
}
@media (min-width: 1280px) {
  html[data-rattib-material="glass"] {
    --rt-frame: max(12px, calc((100vw - 1760px) / 2));
    --rt-sidebar: 228px;
    --rt-dock: 56px;
    --rt-gap: 16px;
  }
}

/* --- Phone and tablet: bottom nav, no side dock. --- */
@media (max-width: 1000px) {
  html[data-rattib-material="glass"] {
    --rt-frame: 12px;
    --rt-sidebar: 0px;
    --rt-dock: 0px;
    --rt-gap: 12px;
    --rt-content-start: 0px;
    --rt-content-end: 0px;
    --rt-nav-clearance: calc(96px + env(safe-area-inset-bottom));
  }
  html[data-rattib-material="glass"] body.workspace-framed.workspace-mobile-ready {
    padding-block-end: var(--rt-nav-clearance);
  }
  html[data-rattib-material="glass"] .workspace-framed .brand {
    position: static;
    inline-size: auto;
    width: auto;
    min-inline-size: 0;
  }
  html[data-rattib-material="glass"] .workspace-framed .brand-copy { min-inline-size: 0; }
  html[data-rattib-material="glass"] .workspace-framed .brand strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-rattib-material="glass"] .workspace-framed.workspace-mobile-ready .workspace-mobile-nav {
    inset-inline: 10px;
    inset-block-end: max(10px, env(safe-area-inset-bottom));
    z-index: 80;
    background: var(--studio-card, var(--card));
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-mobile-item {
    min-block-size: 44px;
    min-inline-size: 0;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools-body {
    position: fixed;
    inset-inline: 12px;
    inset-block-start: 72px;
    inline-size: auto;
    width: auto;
    max-block-size: calc(100dvh - 160px);
    z-index: 100;
  }
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
  }
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-toast { inset-block-end: calc(96px + env(safe-area-inset-bottom)); inset-inline: 12px; }
}
@media (max-width: 1000px) and (min-height: 561px) {
  html[data-rattib-material="glass"] .workspace-framed .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(44px, 148px) auto auto;
    column-gap: 8px;
    row-gap: 4px;
  }
  html[data-rattib-material="glass"] .workspace-framed .top > .brand { grid-column: 1; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open { grid-column: 2; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-create { grid-column: 3; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-tools { grid-column: 4; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-context {
    grid-column: 1 / -1;
    grid-row: 2;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 1000px) and (max-height: 560px) and (min-width: 601px) {
  html[data-rattib-material="glass"] .workspace-framed .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(44px, 132px) auto auto;
    gap: 8px;
  }
  html[data-rattib-material="glass"] .workspace-framed .top > .brand { grid-column: 1; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-context { grid-column: 2; grid-row: 1; min-inline-size: 0; }
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open { grid-column: 3; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-create { grid-column: 4; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-tools { grid-column: 5; grid-row: 1; }
}
@media (max-width: 1000px) and (max-height: 560px) {
  html[data-rattib-material="glass"] {
    --rt-nav-clearance: calc(76px + env(safe-area-inset-bottom));
  }
  html[data-rattib-material="glass"] body.workspace-framed.workspace-mobile-ready {
    padding-block-end: var(--rt-nav-clearance);
  }
  /* The welcome notice is in the shell flow. On a short phone it must scroll
     so the workspace keeps a strip above the bottom nav. */
  body.workspace-framed.workspace-fit > .workspace-notices,
  body.workspace-framed.workspace-fit > .workspace-notices:has(.first-run-welcome[data-open="true"]) {
    max-block-size: min(32dvh, 140px);
  }
  html[data-rattib-material="glass"] body.workspace-framed.workspace-fit > .app-shell {
    min-block-size: min(128px, 32dvh);
  }
  html[data-rattib-material="glass"] body.workspace-framed.workspace-fit .workspace > main {
    min-block-size: 0;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-mobile-item {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
  html[data-rattib-material="glass"] .workspace-framed.workspace-mobile-ready .workspace-mobile-nav {
    inset-block-end: max(8px, env(safe-area-inset-bottom));
    padding-block: 4px;
  }
  .rt-toast { inset-block-end: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
  html[data-rattib-material="glass"] .workspace-framed .top { margin-inline: 8px; }
  html[data-rattib-material="glass"] .workspace-framed .top {
    grid-template-columns: auto minmax(44px, 1fr) minmax(0, max-content) auto;
  }
  html[data-rattib-material="glass"] .workspace-framed .brand,
  html[data-rattib-material="glass"] .workspace-framed .brand-copy {
    flex: none;
    min-inline-size: max-content;
  }
  html[data-rattib-material="glass"] .workspace-framed .brand .mark { flex: none; }
  html[data-rattib-material="glass"] .workspace-framed .brand strong {
    overflow: visible;
    text-overflow: clip;
  }
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open {
    justify-self: start;
    inline-size: auto;
    max-inline-size: 100%;
    justify-content: center;
    padding-inline: 12px;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace { padding-inline: 10px; }
  html[data-rattib-material="glass"] .workspace-framed .workspace > main { padding: 14px; }
}
@media (max-width: 400px) {
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open { position: relative; }
  html[data-rattib-material="glass"] .workspace-framed .top > #rattib-reminders-open span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
  }
}

/* Reading surfaces wrap. Invoice and contract paper keep their column width. */
html[data-rattib-material="glass"] .workspace-framed .workspace > main {
  min-inline-size: 0;
}
html[data-rattib-material="glass"] .workspace-framed .workspace > main .panel:not(#panel-focus) {
  min-inline-size: 0;
  overflow-wrap: break-word;
}
html[data-rattib-material="glass"] .workspace-framed .workspace > main table { min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed .workspace > main :is(.invoice-paper, .contracts-paper, .print-root, #print-root) table {
  min-width: 900px;
}
html[data-rattib-material="glass"] .workspace-framed .workspace > main .panel:not(#panel-focus) :is(td, th, pre) {
  overflow-wrap: anywhere;
}
html[data-rattib-material="glass"] .workspace-framed .workspace > main .panel:not(#panel-focus) pre {
  white-space: pre-wrap;
  max-inline-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .rt-btn,
  .rt-toast,
  .rt-modal,
  .rt-sheet { transition: none; animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-theme] .workspace-framed :is(.workspace-navigation-sidebar, .workspace-utilities, .workspace-mobile-nav) {
    background: var(--rail);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .rt-modal,
  .rt-sheet { background: Canvas; }
}
@media (forced-colors: active) {
  html[data-theme] .workspace-framed :is(.workspace-navigation-sidebar, .workspace-utilities, .workspace-mobile-nav) {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .rt-card,
  .rt-card-stat,
  .rt-btn,
  .rt-pill,
  .rt-toast,
  .rt-modal-card,
  .rt-sheet-card,
  .rt-empty {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .rt-btn-primary { background: ButtonFace; color: ButtonText; }
}

/* --- Kit (Today round 2, spec §3): iOS-27 proportions in Sarab material. Geometry and states live here;
   Atrium tints live in presentation.css (KIT). Every control keeps a 44px hit area and a non-colour cue. --- */
.rt-switch { display: inline-flex; align-items: center; gap: 12px; min-block-size: 44px; padding-block: 6px; cursor: pointer; touch-action: manipulation; }
.rt-switch-input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rt-switch-track { --sw-dir: 1; position: relative; flex: none; inline-size: 52px; block-size: 32px; border-radius: 16px; background: var(--at-fill-3, #d9ded9); box-shadow: inset 0 0 0 1px var(--at-line-strong, #8a948e); transition: background-color 200ms ease; }
[dir="rtl"] .rt-switch-track { --sw-dir: -1; }
.rt-switch-thumb { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 28px; block-size: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .18); transform: translateX(0); transition: transform 320ms var(--at-spring, cubic-bezier(.34, 1.56, .64, 1)), scale 120ms ease; }
.rt-switch-input:checked + .rt-switch-track { background: var(--at-green, #00d492); box-shadow: inset 0 0 0 1px var(--at-green-edge, transparent); }
.rt-switch-input:checked + .rt-switch-track .rt-switch-thumb { transform: translateX(calc(20px * var(--sw-dir))); }
.rt-switch-input:checked + .rt-switch-track .rt-switch-thumb::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 12px; block-size: 12px; background: var(--at-green-ink, #06281a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.rt-switch:active .rt-switch-input:not(:disabled) + .rt-switch-track .rt-switch-thumb { scale: 1.15 1; }
.rt-switch-input:focus-visible + .rt-switch-track { outline: 2px solid var(--at-green, #00d492); outline-offset: 2px; box-shadow: 0 0 0 6px var(--at-green-soft, rgb(0 212 146 / .2)); }
.rt-switch-input:disabled + .rt-switch-track { opacity: .45; outline: 1px dashed var(--at-ink-3, #6b746f); outline-offset: -1px; }
.rt-switch:has(.rt-switch-input:disabled) { cursor: not-allowed; }
.rt-switch[aria-busy="true"] { pointer-events: none; }
.rt-switch[aria-busy="true"] .rt-switch-thumb::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid var(--at-ink-3, #6b746f); border-inline-end-color: transparent; animation: at-spin 800ms linear infinite; }

.rt-seg { --seg-count: 2; --seg-index: 0; position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-block-size: 52px; box-sizing: border-box; padding: 4px; border-radius: 14px; background: var(--at-glass-2, rgb(0 0 0 / .05)); box-shadow: inset 0 0 0 1px var(--at-line, rgb(0 0 0 / .1)); }
.rt-seg::before { content: ""; position: absolute; z-index: -1; inset-block: 4px; inset-inline-start: 4px; inline-size: calc((100% - 8px) / var(--seg-count)); border-radius: 10px; background: var(--at-glass-strong, #fff); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transform: translateX(calc(var(--seg-index) * 100%)); transition: transform 200ms var(--at-ease-out, cubic-bezier(.16, 1, .3, 1)); }
[dir="rtl"] .rt-seg::before { transform: translateX(calc(var(--seg-index) * -100%)); }
.rt-seg > .rt-seg-item { min-block-size: 44px; min-inline-size: 0; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--at-ink-2, inherit); font: 500 14px/1.2 var(--at-sans, inherit); cursor: pointer; transition: color 150ms ease, transform 100ms ease; touch-action: manipulation; }
.rt-seg > .rt-seg-item[aria-pressed="true"] { color: var(--at-ink, inherit); font-weight: 600; }
.rt-seg > .rt-seg-item:active { transform: scale(.96); }

.rt-stepper { display: inline-flex; align-items: center; min-block-size: 44px; border-radius: 12px; background: var(--at-glass-2, transparent); box-shadow: inset 0 0 0 1px var(--at-line, rgb(0 0 0 / .1)); }
.rt-stepper > button { inline-size: 44px; block-size: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--at-ink-2, inherit); cursor: pointer; }
.rt-stepper > button:hover:not(:disabled) { background: var(--at-fill-2, rgb(0 0 0 / .06)); }
.rt-stepper > button:disabled { color: var(--at-ink-4, GrayText); cursor: not-allowed; }
.rt-stepper > output { min-inline-size: 44px; text-align: center; font: 600 15px/1 var(--at-sans, inherit); font-variant-numeric: tabular-nums; }

.rt-slider { --val: 50%; appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 44px; margin: 0; background: transparent; cursor: pointer; }
.rt-slider::-webkit-slider-runnable-track { block-size: 4px; border-radius: 2px; background: linear-gradient(to right, var(--at-green, #00d492) var(--val), var(--at-fill-3, #d9ded9) var(--val)); }
[dir="rtl"] .rt-slider::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--at-green, #00d492) var(--val), var(--at-fill-3, #d9ded9) var(--val)); }
.rt-slider::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 24px; block-size: 24px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .18); }
.rt-slider::-moz-range-track { block-size: 4px; border-radius: 2px; background: var(--at-fill-3, #d9ded9); }
.rt-slider::-moz-range-progress { block-size: 4px; border-radius: 2px; background: var(--at-green, #00d492); }
.rt-slider::-moz-range-thumb { inline-size: 24px; block-size: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .18); }
.rt-slider:focus-visible { outline: none; }
.rt-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--at-green, #00d492); outline-offset: 2px; }

.rt-check, .rt-radio { position: relative; display: inline-flex; align-items: center; gap: 12px; min-block-size: 44px; font-size: 14px; cursor: pointer; }
.rt-check > input, .rt-radio > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.rt-check > .rt-box, .rt-radio > .rt-box { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; box-sizing: border-box; border: 1.5px solid var(--at-line-strong, #8a948e); border-radius: 7px; transition: background-color 160ms ease, border-color 160ms ease; }
.rt-radio > .rt-box { border-radius: 50%; }
.rt-check > input:checked + .rt-box { background: var(--at-green, #00d492); border-color: var(--at-green-edge, var(--at-green, #00d492)); }
.rt-check > input:checked + .rt-box::after { content: ""; inline-size: 12px; block-size: 12px; background: var(--at-green-ink, #06281a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.rt-check > input:indeterminate + .rt-box::after { content: ""; inline-size: 10px; block-size: 2px; border-radius: 1px; background: var(--at-ink, currentColor); }
.rt-radio > input:checked + .rt-box { border-color: var(--at-green, #00d492); }
.rt-radio > input:checked + .rt-box::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--at-green, #00d492); }
:is(.rt-check, .rt-radio) > input:focus-visible + .rt-box { outline: 2px solid var(--at-green, #00d492); outline-offset: 2px; }
:is(.rt-check, .rt-radio)[aria-invalid="true"] > .rt-box { border-color: var(--at-rose, #b3261e); box-shadow: 0 0 0 4px var(--at-rose-soft, rgb(179 38 30 / .15)); }

.rt-avatar { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 11px; overflow: hidden; font: 600 12px/1 var(--at-sans, inherit); color: var(--at-ink, inherit); background: var(--at-fill-2, rgb(0 0 0 / .06)); box-shadow: inset 0 0 0 1px var(--at-line, rgb(0 0 0 / .1)); }
.rt-avatar.is-24 { inline-size: 24px; block-size: 24px; border-radius: 8px; }
.rt-avatar.is-40 { inline-size: 40px; block-size: 40px; border-radius: 13px; }
.rt-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.rt-drawer { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; background: rgb(3 8 6 / .4); }
.rt-drawer[hidden] { display: none; }
.rt-drawer > .rt-drawer-panel { display: flex; flex-direction: column; inline-size: min(420px, 100%); block-size: 100%; background: var(--at-glass-strong, Canvas); border-start-start-radius: 20px; border-end-start-radius: 20px; box-shadow: var(--at-shadow, 0 24px 60px rgb(0 0 0 / .3)); animation: rt-drawer-in 240ms cubic-bezier(.25, .46, .45, .94) backwards; }
[dir="rtl"] .rt-drawer > .rt-drawer-panel { animation-name: rt-drawer-in-rtl; }
@keyframes rt-drawer-in { from { transform: translateX(100%); } }
@keyframes rt-drawer-in-rtl { from { transform: translateX(-100%); } }
@keyframes rt-sheet-in { from { transform: translateY(100%); } }
@media (max-width: 700px) {
  .rt-drawer { align-items: flex-end; }
  .rt-drawer > .rt-drawer-panel { inline-size: 100%; block-size: auto; max-block-size: 88vh; border-radius: 24px 24px 0 0; animation-name: rt-sheet-in; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-switch-thumb, .rt-seg::before, .rt-seg > .rt-seg-item { transition: none; }
  .rt-switch:active .rt-switch-input:not(:disabled) + .rt-switch-track .rt-switch-thumb { scale: none; }
  .rt-seg > .rt-seg-item:active { transform: none; }
  .rt-drawer > .rt-drawer-panel { animation: none; }
  .rt-switch[aria-busy="true"] .rt-switch-thumb::before { animation: none; }
}
@media (forced-colors: active) {
  .rt-switch-track { background: ButtonFace; box-shadow: inset 0 0 0 1px ButtonText; }
  .rt-switch-thumb { background: ButtonText; box-shadow: none; }
  .rt-switch-input:checked + .rt-switch-track { background: Highlight; }
  .rt-seg::before { background: Highlight; box-shadow: none; }
  .rt-seg > .rt-seg-item[aria-pressed="true"] { color: HighlightText; }
  :is(.rt-check, .rt-radio) > .rt-box { border-color: ButtonText; }
  .rt-check > input:checked + .rt-box, .rt-radio > input:checked + .rt-box::after { background: Highlight; }
}
/* chip (from settings kit) */
.rt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px; border-radius: 7px; background: var(--at-fill-2, rgb(255 255 255 / .08)); color: var(--at-ink-2, inherit); font: 500 12px/1.5 var(--at-sans, inherit); white-space: nowrap; }
[dir="rtl"] .rt-chip { font-size: 13px; }
/* Today, Tasks, Projects, and Calendar.
   Loaded after ui-system.css. Uses Sarab tokens from that sheet
   (--studio-*, --rt-*, --card, --text). Glass material only, so the
   historical light bento fixture keeps its own measurements.
   Every selector names one of the four work panels. */

html[data-rattib-material="glass"] .workspace-framed :is(#panel-home, #panel-tasks, #panel-projects, #panel-calendar) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-home, #panel-tasks, #panel-projects) .suite-header,
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-header > div:first-child,
html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-header-copy,
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-head > div {
  flex: 1 1 16rem;
  min-inline-size: 0;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-home, #panel-tasks, #panel-projects, #panel-calendar) :is(h1, h2, p, button, a, li, span, strong, small) {
  overflow-wrap: anywhere;
}

/* Today: greeting is the display line. The h1 stays "Today". */
html[data-rattib-material="glass"] .workspace-framed #panel-home .work-greeting {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--studio-ink);
}

html[data-rattib-material="glass"][lang="ar"] .workspace-framed #panel-home .work-greeting {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .work-greeting-date {
  margin: 6px 0 0;
  color: var(--studio-muted);
  font-size: 14px;
  line-height: 1.5;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home.panel .suite-header h1 {
  margin: 14px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--studio-muted);
}

html[data-rattib-material="glass"][lang="ar"] .workspace-framed #panel-home.panel .suite-header h1 {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-inline-size: 0;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric {
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
  border: 0;
  border-radius: 28px;
  text-align: start;
  color: var(--studio-ink);
  box-shadow: none;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="open"] { background: var(--studio-mint); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="today"] { background: var(--studio-blue); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="overdue"] { background: var(--studio-apricot); }
/* Canvas paints this label with pill ink, which is the inverse of the apricot card in both themes. */
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="overdue"] :is(span, strong) {
  color: var(--studio-ink);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric[data-home-metric="projects"] { background: var(--studio-lilac); }

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--studio-ink);
}

html[data-rattib-material="glass"][lang="ar"] .workspace-framed #panel-home .home-metric strong {
  font-family: inherit;
  font-weight: 650;
  letter-spacing: 0;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-signals, .home-widgets, .home-signal, .home-widget, .home-next-step) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-widget, .home-signal, .home-next-step) {
  border-radius: 28px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-visual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-inline-size: 0;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-invoice-donut {
  flex: 0 1 132px;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-invoice-legend, .home-invoice-amounts, .home-signal-list, .home-signal-series) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-invoice-legend li, .home-invoice-amounts li, .home-signal-list li, .home-work-row, .home-project-row, .home-contact-row) {
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-work-row {
  border-radius: 18px;
}

/* Tasks and projects */
html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-block: 0 16px;
  padding: 12px;
  border: 1px solid var(--studio-line);
  border-radius: 20px;
  background: var(--studio-card);
  background-image: none;
  box-shadow: none;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-toolbar .suite-field {
  flex: 1 1 140px;
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-views {
  flex: 1 1 auto;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) :is(.suite-primary, .suite-views button, .suite-task-status, .suite-done, .suite-task-drag) {
  min-block-size: 44px;
  min-inline-size: 44px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="board"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-inline-size: 0;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column {
  min-inline-size: 0;
  min-block-size: 0;
  border: 0;
  border-radius: 28px;
  padding: 14px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column[data-task-drop-status="todo"] { background: var(--studio-mint); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column[data-task-drop-status="doing"] { background: var(--studio-lilac); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column[data-task-drop-status="done"] { background: var(--studio-apricot); }

html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-heading {
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-task-row {
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
  background: var(--studio-card);
  color: var(--studio-ink);
  border: 1px solid var(--studio-line);
  border-radius: 18px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="list"] .suite-task-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-task-body,
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-task-name {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="list"] .suite-task-status,
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column .suite-task-status {
  grid-column: 1 / -1;
  margin-inline-start: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100%;
  box-sizing: border-box;
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-priority {
  border: 0;
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] body.workspace-framed :is(#panel-tasks, #panel-projects) .suite-priority[data-priority="urgent"]:not(:disabled),
html[data-rattib-material="glass"] body.workspace-framed :is(#panel-tasks, #panel-projects) .suite-priority[data-priority="high"]:not(:disabled) {
  background: var(--rt-apricot, var(--studio-apricot));
  background-color: var(--rt-apricot, var(--studio-apricot));
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-priority[data-priority="normal"] {
  background: var(--rt-lilac, var(--studio-lilac));
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-priority[data-priority="low"] {
  background: var(--rt-blue, var(--studio-blue));
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-layout {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-list {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  border: 0;
  border-radius: 22px;
  color: var(--studio-ink);
  text-align: start;
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item:nth-child(4n+1) { background: var(--studio-mint); }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item:nth-child(4n+2) { background: var(--studio-blue); }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item:nth-child(4n+3) { background: var(--studio-lilac); }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item:nth-child(4n+4) { background: var(--studio-apricot); }

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item[aria-pressed="true"] {
  background-image: none;
  box-shadow: inset 0 0 0 2px #00d492;
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-detail {
  min-inline-size: 0;
  max-inline-size: 100%;
  border-radius: 28px;
  background: var(--studio-card);
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-progress {
  border-radius: 16px;
  background: color-mix(in srgb, var(--studio-ink) 6%, var(--studio-card));
  color: var(--studio-ink);
}

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-progress progress {
  flex: 1 1 100%;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 10px;
  accent-color: #00d492;
}

/* Calendar: ink cards in the dark theme, paper in the light theme. No cool washes. */
html[data-rattib-material="glass"] .workspace-framed #panel-calendar :is(.calendar-toolbar, .calendar-filters, .calendar-weekdays, .calendar-inspector, .calendar-board, .calendar-content, .calendar-date) {
  background-image: none;
  box-shadow: none;
}

html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-calendar :is(.calendar-toolbar, .calendar-filters, .calendar-weekdays, .calendar-inspector, .calendar-board, .calendar-content) {
  background-color: var(--studio-card);
  color: var(--studio-ink);
}

html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-calendar .calendar-date {
  background-color: var(--studio-card);
  color: var(--studio-ink);
}

html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-calendar .calendar-date.is-outside {
  background-color: var(--studio-canvas);
  color: var(--studio-muted);
}

html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-calendar .calendar-date:nth-child(7n+6),
html[data-rattib-material="glass"][data-theme="dark"] .workspace-framed #panel-calendar .calendar-date:nth-child(7n) {
  background-color: var(--studio-lilac);
}

html[data-rattib-material="glass"][data-theme="light"] .workspace-framed #panel-calendar :is(.calendar-toolbar, .calendar-filters, .calendar-inspector, .calendar-content) {
  background-color: var(--studio-card);
  color: var(--studio-ink);
}

html[data-rattib-material="glass"][data-theme="light"] .workspace-framed #panel-calendar .calendar-weekdays,
html[data-rattib-material="glass"][data-theme="light"] .workspace-framed #panel-calendar .calendar-date {
  background-color: var(--studio-card);
  color: var(--studio-ink);
}

html[data-rattib-material="glass"][data-theme="light"] .workspace-framed #panel-calendar .calendar-date:nth-child(7n+6),
html[data-rattib-material="glass"][data-theme="light"] .workspace-framed #panel-calendar .calendar-date:nth-child(7n) {
  background-color: var(--studio-lilac);
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-content {
  min-inline-size: 0;
  min-block-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar :is(.calendar-grid, .calendar-weekdays) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-inline-size: 0;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date {
  min-inline-size: 0;
  overflow: hidden;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-weekdays span,
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-cell-item {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-period h2 {
  flex: 1 1 8rem;
  min-inline-size: 0;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date[aria-current="date"] .calendar-date-number,
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date[aria-pressed="true"] .calendar-date-number {
  background: #00d492;
  color: #0c0a07;
  border-radius: 999px;
  min-inline-size: 28px;
  min-block-size: 28px;
  line-height: 28px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date[aria-pressed="true"] {
  outline: 2px solid #00d492;
  outline-offset: -2px;
  background-image: none;
}

html[data-rattib-material="glass"] body.workspace-framed :is(#panel-home, #panel-tasks, #panel-projects) .suite-primary:not(:disabled),
html[data-rattib-material="glass"] body.workspace-framed #panel-calendar .calendar-primary:not(:disabled),
html[data-rattib-material="glass"] .workspace-framed #panel-home #home-next-action:not(:disabled) {
  background: #00d492;
  background-color: #00d492;
  color: #0c0a07;
  border-color: transparent;
  border-radius: 999px;
  min-block-size: 44px;
  min-inline-size: 44px;
  font-weight: 650;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views {
  display: flex;
  flex-wrap: wrap;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views button,
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-icon-button,
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-button {
  min-block-size: 44px;
  min-inline-size: 44px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-filters {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-field {
  flex: 1 1 140px;
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"] :is(#project-work-dialog, #home-layout-dialog) {
  max-inline-size: min(640px, calc(100vw - 24px));
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  color: var(--text);
}

@media (min-width: 1200px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="board"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="board"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="list"] .suite-task-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(9rem, 14rem);
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks #tasks-results[data-view="list"] .suite-task-status {
    grid-column: auto;
  }
}

@media (max-width: 1279px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-list {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    grid-auto-columns: auto;
    max-block-size: none;
    overflow: visible;
    min-inline-size: 0;
  }
}

@media (max-width: 1024px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metrics,
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-signals {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-header > .suite-primary,
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-primary {
    inline-size: 100%;
  }
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks, #panel-projects) .suite-toolbar .suite-field,
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-field {
    flex-basis: 100%;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-cell-previews {
    display: none;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date {
    min-block-size: 44px;
    padding: 4px;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-content {
    min-block-size: 0;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric {
    min-block-size: 72px;
    padding: 10px;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column {
    min-block-size: 0;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-content,
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date {
    min-block-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-home, #panel-tasks, #panel-projects, #panel-calendar) :is(.home-metric, .home-widget, .suite-task-row, .suite-board-column, .suite-project-item, .calendar-date) {
    transition: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-home, #panel-tasks, #panel-projects, #panel-calendar) :is(.home-metric, .home-widget, .home-signal, .home-work-row, .suite-task-row, .suite-board-column, .suite-project-item, .suite-project-detail, .calendar-date, .calendar-toolbar, .work-greeting) {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    background-image: none;
  }
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-home, #panel-tasks, #panel-projects, #panel-calendar) :is(.suite-primary, .calendar-primary),
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date[aria-pressed="true"] .calendar-date-number {
    background: Highlight;
    color: HighlightText;
  }
}
/* Money and clients lane, loaded after ui-system.css.
   Clients, pricing floor, proposals, invoices, contracts, finance,
   monthly report overflow, and forms. Shared cards, type, and actions
   come from the .rt-* system. This sheet only lays out the existing markup.
   Numbers stay in that markup. Paper stays readable when printed.
   Sarab surfaces use the shared ink and paper. Oasis is the main action. */

@media screen {
  html[data-rattib-material="glass"] .workspace-framed :is(
    #panel-crm,
    #panel-pricing,
    #panel-proposal,
    #panel-contracts,
    #panel-finance,
    #panel-forms
  ) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[lang="en"][data-rattib-material="glass"] .workspace-framed :is(
    #panel-crm,
    #panel-pricing,
    #panel-proposal,
    #panel-contracts,
    #panel-finance,
    #panel-forms
  ) :is(.panel-head h1, .contracts-header h1, .finance-header h1, .forms-builder > h2) {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-block: 0 8px;
  }

  html[lang="ar"][data-rattib-material="glass"] .workspace-framed :is(
    #panel-crm,
    #panel-pricing,
    #panel-proposal,
    #panel-contracts,
    #panel-finance,
    #panel-forms
  ) :is(.panel-head h1, .contracts-header h1, .finance-header h1, .forms-builder > h2) {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.35;
    letter-spacing: 0;
    margin-block: 0 8px;
  }

  html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal) .panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 20px;
    min-inline-size: 0;
  }

  html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal) .panel-head > div:first-child {
    flex: 1 1 16rem;
    min-inline-size: 0;
  }

  html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal) .panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(button, summary, .chip) {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  /* Beat the glass primary rule. Its :is() list contains an id, so a panel id alone is not enough. */
  html[data-rattib-material="glass"] body.workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(.action-main, .finance-primary, .contracts-primary, .forms-primary, .documents-primary):not(:disabled) {
    background: #00d492;
    color: #0c0a07;
    border-color: #00d492;
    font-weight: 600;
  }

  html[data-rattib-material="glass"] body.workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(.action-main, .finance-primary, .contracts-primary, .forms-primary, .documents-primary):not(:disabled):hover {
    filter: brightness(0.96);
  }

  html[data-rattib-material="glass"] body.workspace-framed #panel-forms .forms-library > button:first-child,
  html[data-rattib-material="glass"] body.workspace-framed #panel-forms .forms-editor > .forms-actions [data-action="save"]:not(:disabled) {
    background: #00d492;
    color: #0c0a07;
    border-color: #00d492;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .fx :is(input, select) {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  /* Clients */
  html[data-rattib-material="glass"] .workspace-framed #panel-crm :is(.crm-view, .crm-filters, .crm-tag-filters) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-search,
  html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-search-wrap,
  html[data-rattib-material="glass"] .workspace-framed #panel-crm .table-wrap {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-crm .table-wrap {
    overflow-x: auto;
    border-radius: 18px;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card {
    border-radius: 22px;
    padding: 20px;
    min-inline-size: 0;
    box-shadow: none;
  }

  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card {
    background: #fffdf8;
    border-color: #e4dfd4;
  }

  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card.due-today,
  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card.is-soon {
    background: #f7eddc;
  }

  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card.is-ok {
    background: #f3f7ef;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card {
    background: #15120d;
    border-color: #40392e;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card.overdue,
  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card.is-overdue {
    background: #241512;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-crm .chip.chip-late.active {
    background: #3a1c18;
    color: #ffb4ae;
    border-color: #f05751;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-crm .chip.chip-today.active {
    background: #163228;
    color: #c8ead4;
    border-color: #00d492;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-crm .chip.chip-none.active {
    background: #3a2e1c;
    color: #f0d7a8;
    border-color: #d7ac78;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-name {
    overflow-wrap: anywhere;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #client-profile-dialog {
    max-inline-size: min(680px, calc(100vw - 24px));
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
  }

  #client-profile-dialog :is(input, select, textarea, button, summary) {
    min-block-size: 44px;
    max-inline-size: 100%;
  }

  /* Pricing and price floor */
  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor {
    border-radius: 24px;
    padding: 22px;
    gap: 14px;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    min-inline-size: 0;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-stat {
    min-inline-size: 0;
    border-radius: 18px;
    padding: 14px 16px;
  }

  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-stat:nth-child(4n + 3) { background: #e5d9ed; }
  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-stat:nth-child(4n + 4) { background: #d7e6ef; }

  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-stat-num {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-studio-tools,
  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-board-wrap,
  html[data-rattib-material="glass"] .workspace-framed #panel-pricing #pricing-table {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-setting,
  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-package-card {
    border-radius: 20px;
    min-inline-size: 0;
  }

  /* Proposals and invoices */
  html[data-rattib-material="glass"] .workspace-framed #panel-proposal :is(.documents-split, .invoice-workspace, .documents-library, .documents-detail, .invoice-editor, .invoice-preview-wrap) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-proposal :is(.invoice-essentials, .invoice-line, .proposal-bento-card, .documents-library, .invoice-preview-wrap) {
    border-radius: 20px;
  }

  html[data-color-theme="sarab"][data-theme="light"][data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-preview-wrap {
    background: #f3f0e9;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-preview-wrap {
    background: #17140f;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-paper {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-paper :is(table, .invoice-paper-parties, .invoice-summary) {
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-paper table {
    display: block;
    overflow-x: auto;
  }

  /* Contracts */
  html[data-rattib-material="glass"] .workspace-framed #panel-contracts :is(.contracts-workspace, .contracts-library, .contracts-detail, .contracts-paper) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row,
  html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-detail,
  html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-library {
    border-radius: 20px;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-paper {
    overflow-wrap: anywhere;
  }

  /* Finance */
  html[data-rattib-material="glass"] .workspace-framed #panel-finance :is(.finance-suite, .finance-report, .finance-workspace, .finance-results, .finance-detail, .finance-table-scroll, .finance-filter-bar) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-table-scroll {
    overflow-x: auto;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-report {
    background: transparent;
    border: 0;
    padding: 0;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-cash-table {
    border-collapse: separate;
    border-spacing: 10px;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-cash-table :is(td, th) {
    border-radius: 16px;
    padding: 16px 14px;
    overflow-wrap: anywhere;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 4px 0 0;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    padding: 14px 16px;
    min-inline-size: 0;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row .finance-money,
  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-detail-amount {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-detail {
    border-radius: 22px;
    min-inline-size: 0;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-filter-bar > .finance-field {
    min-inline-size: 0;
    flex: 1 1 160px;
  }

  /* Monthly report: keep its palette, stop the client split from forcing a page scroll. */
  html[data-rattib-material="glass"] .workspace-framed #panel-monthly-report {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-monthly-report :is(.mr-grid, .mr-card, .mr-hero, .mr-best-split, .mr-table, .mr-bar) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-monthly-report .mr-table {
    display: block;
    overflow-x: auto;
  }

  /* Forms */
  html[data-rattib-material="glass"] .workspace-framed #panel-forms :is(.forms-builder, .forms-layout, .forms-library, .forms-editor, .forms-local-preview, .public-questionnaire) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-editor,
  html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-library,
  html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-field,
  html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-local-preview {
    border-radius: 20px;
  }

  html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-primary,
  html[data-rattib-material="glass"] .workspace-framed #panel-forms .public-questionnaire button[type="submit"] {
    background: #00d492;
    color: #0c0a07;
    border-color: #00d492;
  }

  html[data-color-theme="sarab"][data-theme="dark"][data-rattib-material="glass"] .workspace-framed #panel-forms .public-questionnaire {
    background: #15120d;
    color: #f3f0e9;
    border-color: rgb(243 240 233 / 16%);
  }

  @media (max-width: 1024px) {
    html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-workspace,
    html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-workspace,
    html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-workspace,
    html[data-rattib-material="glass"] .workspace-framed #panel-proposal .documents-split,
    html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 768px) {
    html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal) .panel-head {
      flex-direction: column;
      align-items: stretch;
    }

    html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-studio-tools,
    html[data-rattib-material="glass"] .workspace-framed #panel-pricing .buffer-fields {
      grid-template-columns: minmax(0, 1fr);
    }

    html[data-rattib-material="glass"] .workspace-framed #panel-monthly-report .mr-best-split,
    html[data-rattib-material="glass"] .workspace-framed #panel-monthly-report .mr-bar {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 430px) {
    html[lang="en"][data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(.panel-head h1, .contracts-header h1, .finance-header h1) {
      font-size: 32px;
    }

    html[data-rattib-material="glass"] .workspace-framed #panel-pricing #pricing-table .pricing-package-card,
    html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-form,
    html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-entry-fields,
    html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-filter-fields {
      grid-template-columns: minmax(0, 1fr);
    }

    html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-list {
      grid-template-columns: minmax(0, 1fr);
    }

    html[data-rattib-material="glass"] .workspace-framed #panel-monthly-report .mr-title {
      font-size: 34px;
    }
  }

  @media (max-height: 500px) and (orientation: landscape) {
    html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(.panel-head h1, .finance-header h1, .contracts-header h1) {
      font-size: 28px;
    }
  }

  @media (forced-colors: active) {
    html[data-rattib-material="glass"] .workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(.follow-card, .pricing-floor, .pricing-floor-stat, .pricing-package-card, .finance-row, .finance-detail, .finance-cash-table td, .contracts-detail, .forms-editor) {
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
      box-shadow: none;
    }

    html[data-rattib-material="glass"] body.workspace-framed :is(#panel-crm, #panel-pricing, #panel-proposal, #panel-contracts, #panel-finance, #panel-forms) :is(.action-main, .finance-primary, .contracts-primary, .forms-primary, .documents-primary, .forms-library > button:first-child, .forms-actions [data-action="save"]) {
      background: ButtonFace;
      color: ButtonText;
      border-color: ButtonText;
    }
  }
}

@media print {
  html, body, .workspace, main {
    background: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  #panel-proposal .invoice-paper,
  #panel-proposal .invoice-paper *,
  #panel-contracts .contracts-paper,
  #panel-contracts .contracts-paper *,
  #panel-finance.finance-suite,
  #panel-finance.finance-suite *,
  #panel-forms .public-questionnaire,
  #panel-forms .public-questionnaire * {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  #panel-proposal .invoice-paper,
  #panel-contracts .contracts-paper {
    border: 1px solid #bbb !important;
    overflow: visible !important;
  }

  #panel-proposal .invoice-paper table,
  #panel-finance .finance-cash-table,
  #panel-monthly-report .mr-table {
    display: table !important;
    overflow: visible !important;
    border-spacing: 0 !important;
    inline-size: 100%;
  }

  #panel-proposal .invoice-paper table :is(thead, tbody, tfoot),
  #panel-finance .finance-cash-table :is(thead, tbody, tfoot) {
    display: table-row-group !important;
  }

  #panel-proposal .invoice-paper table tr,
  #panel-finance .finance-cash-table tr,
  #panel-monthly-report .mr-table tr {
    display: table-row !important;
  }

  #panel-proposal .invoice-paper table :is(td, th),
  #panel-finance .finance-cash-table :is(td, th),
  #panel-monthly-report .mr-table :is(td, th) {
    display: table-cell !important;
    border-radius: 0 !important;
  }

  #panel-finance .finance-table-scroll,
  #panel-proposal .invoice-paper,
  #panel-contracts .contracts-paper,
  #panel-monthly-report .mr-table {
    overflow: visible !important;
  }
}
/* Lane D surfaces. Loaded after ui-system.css. Knowledge, files, appointments,
   portal, collaboration, reminders, timesheet, work week, settings, account,
   and the first-run guide use the shared Sarab tokens (.rt-* / --studio-*).
   Focus keeps its scenic stage and the shipped CC0 recordings. This sheet only
   rounds the sound and tool tiles around that stage. */

html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-knowledge,
  #panel-files,
  #panel-scheduling,
  #panel-portal,
  #panel-collaboration,
  #panel-automations,
  #panel-timesheet,
  #panel-week
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-rattib-material="glass"][lang="en"] .workspace-framed :is(
  #panel-knowledge .knowledge-header h1,
  #panel-timesheet .time-head h1,
  #panel-week .panel-head h1,
  #panel-files > h2,
  #panel-scheduling > h2,
  #panel-collaboration > h2,
  #panel-portal :is(#client-portal-host, #portal-approvals-host) > h2,
  #panel-automations :is(#automations-reminders-host, #operations-studio-host) > h2,
  .knowledge-detail > h2,
  .first-run-guide h2
) {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

html[data-rattib-material="glass"][lang="ar"] .workspace-framed :is(
  #panel-knowledge .knowledge-header h1,
  #panel-timesheet .time-head h1,
  #panel-week .panel-head h1,
  #panel-files > h2,
  #panel-scheduling > h2,
  #panel-collaboration > h2,
  #panel-portal :is(#client-portal-host, #portal-approvals-host) > h2,
  #panel-automations :is(#automations-reminders-host, #operations-studio-host) > h2,
  .knowledge-detail > h2,
  .first-run-guide h2
) {
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
}

html[data-rattib-material="glass"] .workspace-framed :is(
  .knowledge-kicker,
  .time-head p,
  .scheduling-local-note,
  .first-run-eyebrow,
  .first-run-step
) {
  font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-rattib-material="glass"][lang="ar"] .workspace-framed :is(
  .knowledge-kicker,
  .first-run-eyebrow,
  .first-run-step
) {
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

/* Shared cards */
html[data-rattib-material="glass"] .workspace-framed :is(
  .knowledge-library,
  .knowledge-detail,
  .knowledge-block,
  .files-usage,
  .files-content,
  .files-toolbar,
  .files-upload,
  .files-editor,
  .scheduling-editor,
  .scheduling-preview,
  #scheduling-bookings,
  .scheduling-booking,
  .collaboration-library,
  .collaboration-thread,
  .collaboration-inbox,
  #client-portal-host,
  #portal-approvals-host,
  .portal-delivery-editor,
  .portal-approval-receipt,
  #automations-reminders-host,
  #operations-studio-host,
  .operations-section,
  .time-total-card,
  .time-list,
  .time-filters,
  .week-glance-card,
  .week-focus,
  .week-money,
  .week-board-wrap
) {
  border-radius: 28px;
  min-inline-size: 0;
}

html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed :is(
  .knowledge-library,
  .knowledge-detail,
  .knowledge-block,
  .files-usage,
  .files-content,
  .files-toolbar,
  .files-editor,
  .scheduling-editor,
  .scheduling-preview,
  #scheduling-bookings,
  .scheduling-booking,
  .collaboration-library,
  .collaboration-thread,
  .collaboration-comment,
  #client-portal-host,
  #portal-approvals-host,
  .portal-delivery-editor,
  #automations-reminders-host,
  #operations-studio-host,
  .operations-section,
  .time-total-card,
  .time-list,
  .time-filters,
  .week-glance-card,
  .week-focus,
  .week-money,
  .week-board-wrap,
  .knowledge-filters
) {
  background: var(--studio-card, #15120d);
  color: var(--studio-ink, #f3f0e9);
  border-color: var(--studio-line, rgb(243 240 233 / 12%));
  box-shadow: none;
}

html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed :is(
  .knowledge-detail,
  .files-content,
  .scheduling-editor,
  .collaboration-thread,
  #client-portal-host,
  #operations-studio-host,
  .time-list,
  .week-board-wrap
) {
  background: var(--studio-card, #fffdf8);
  color: var(--studio-ink, #1b1812);
  border-color: var(--studio-line, rgb(12 10 7 / 8%));
  box-shadow: var(--rt-shadow, 0 18px 40px rgb(12 10 7 / 8%));
}

html[data-rattib-material="glass"] .workspace-framed :is(.time-total-value, .week-glance-card strong, .files-usage strong) {
  font-family: "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

html[data-rattib-material="glass"][lang="ar"] .workspace-framed :is(.time-total-value, .week-glance-card strong) {
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

/* Knowledge */
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-header {
  align-items: flex-end;
  gap: 16px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-page-row {
  border-radius: 16px;
  min-block-size: 44px;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed #panel-knowledge .knowledge-page-row:nth-child(3n + 1) { background: #fffcf7; }
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed #panel-knowledge .knowledge-page-row:nth-child(3n + 2) { background: #e5d9ed; }
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed #panel-knowledge .knowledge-page-row:nth-child(3n) { background: #ffdcbd; }
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed #panel-knowledge .knowledge-page-row { background: #1c1914; color: #f3f0e9; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-page-row[aria-current="page"] {
  box-shadow: inset 0 0 0 2px #00d492;
}
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-primary,
html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-primary,
html[data-rattib-material="glass"] .workspace-framed #account-sign-in,
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling :is(#scheduling-save, #scheduling-book) {
  background: #00d492;
  color: #0c0a07;
  border-color: #00d492;
  border-radius: 999px;
  min-block-size: 44px;
  font-weight: 600;
}

/* Files */
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-list > li {
  border-radius: 18px;
  min-inline-size: 0;
  flex-wrap: wrap;
}
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-row-actions {
  flex-wrap: wrap;
}
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-usage meter {
  block-size: 10px;
  border-radius: 999px;
  accent-color: #00d492;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed #panel-files .files-list > li {
  background: #1c1914;
  border-color: rgb(243 240 233 / 12%);
  color: #f3f0e9;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed #panel-files .files-list > li {
  background: #fffcf7;
  border-color: transparent;
}

/* Appointments */
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-slots button {
  border-radius: 999px;
  min-block-size: 44px;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed #panel-scheduling :is(input, select, .scheduling-weekday, .scheduling-local-note) {
  background: #1c1914;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 16%);
}

/* Collaboration */
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration .collaboration-library nav button {
  border-radius: 999px;
  min-block-size: 44px;
  text-align: start;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed #panel-collaboration .collaboration-comment {
  background: #1c1914;
  color: #f3f0e9;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed #panel-collaboration .collaboration-comment {
  background: #f7f5ee;
  border-color: transparent;
}

/* Reminders center inside the automations tab */
html[data-rattib-material="glass"] .workspace-framed #panel-automations article {
  border: 0;
  border-radius: 22px;
  padding: 16px 18px;
  margin-block: 10px;
}

html[data-rattib-material="glass"] .workspace-framed #panel-automations button.primary {
  background: #00d492;
  color: #0c0a07;
  border-color: #00d492;
  border-radius: 999px;
}

/* Timesheet and week tables stay inside their cards */
html[data-rattib-material="glass"] .workspace-framed :is(#panel-timesheet .time-list, #panel-week .week-board-wrap, #panel-week .table-wrap) {
  overflow-x: auto;
  max-inline-size: 100%;
}
html[data-rattib-material="glass"] .workspace-framed :is(#panel-timesheet, #panel-week) :is(th, td) {
  overflow-wrap: anywhere;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed :is(#panel-timesheet, #panel-week) :is(table, th, td) {
  background: transparent;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 12%);
}

/* Settings and account. Grouped sheet, same family as a billing page. */
html[data-rattib-material="glass"] .workspace-framed .workspace-tools > summary {
  border-radius: 999px;
  min-block-size: 44px;
}
html[data-rattib-material="glass"] .workspace-framed .workspace-tools-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: 16px 20px;
  width: min(860px, calc(100vw - 24px));
  max-block-size: min(80dvh, 760px);
  overflow: auto;
  padding: 22px;
  border-radius: 28px;
  z-index: 120;
}
html[data-rattib-material="glass"] .workspace-framed .workspace-tools .brand-meta {
  grid-column: 1;
  margin: 0;
  min-inline-size: 0;
}
html[data-rattib-material="glass"] .workspace-framed .workspace-tools .shell-utils {
  grid-column: 2;
  grid-row: 1;
  align-content: start;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
}
html[data-rattib-material="glass"] .workspace-framed .workspace-tools #workspace-backup-note {
  grid-column: 1 / -1;
  margin: 0;
}
html[data-rattib-material="glass"] .workspace-framed .account-session,
html[data-rattib-material="glass"] .workspace-framed .account-session-panel,
html[data-rattib-material="glass"] .workspace-framed .cloud-account-panel {
  width: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}
html[data-rattib-material="glass"] .workspace-framed .account-session-panel,
html[data-rattib-material="glass"] .workspace-framed .cloud-account-panel {
  border-radius: 22px;
  padding: 16px;
}
html[data-rattib-material="glass"] .workspace-framed .account-sync-chip,
html[data-rattib-material="glass"] .workspace-framed .workspace-tools .brand-access,
html[data-rattib-material="glass"] .workspace-framed .workspace-tools .shell-utils > button,
html[data-rattib-material="glass"] .workspace-framed .lang-btn,
html[data-rattib-material="glass"] .workspace-framed .theme-btn {
  border-radius: 999px;
  min-block-size: 44px;
  min-inline-size: 44px;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed :is(.workspace-tools-body, .account-session-panel, .cloud-account-panel, .workspace-tools .shell-utils) {
  background: var(--studio-card, #15120d);
  background-image: none;
  color: var(--studio-ink, #f3f0e9);
  border-color: var(--studio-line, rgb(243 240 233 / 12%));
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed :is(.workspace-tools-body, .account-session-panel, .cloud-account-panel) {
  background: var(--studio-card, #fffdf8);
  background-image: none;
  color: var(--studio-ink, #1b1812);
  border-color: var(--studio-line, rgb(12 10 7 / 8%));
}

html[data-rattib-material="glass"] .workspace-framed .cloud-account-panel h3,
html[data-rattib-material="glass"] .workspace-framed #account-sync-status {
  font-family: "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.02em;
}
html[data-rattib-material="glass"][lang="ar"] .workspace-framed :is(.cloud-account-panel h3, #account-sync-status) {
  font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

/* First-run guide, the path used when the welcome card is not open. */
html[data-rattib-material="glass"] .workspace-framed .first-run-guide:not([data-collapsed="true"]) {
  border-radius: 28px;
  padding: 24px;
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed .first-run-guide:not([data-collapsed="true"]) {
  background: #15120d;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 12%);
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed .first-run-guide:not([data-collapsed="true"]) {
  background: #fffcf7;
  color: #0c0a07;
  border-color: rgb(12 10 7 / 8%);
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed .first-run-choice:nth-child(odd) { background: #deead2; }
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="light"] .workspace-framed .first-run-choice:nth-child(even) { background: #e5d9ed; }
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed .first-run-choice {
  background: #1c1914;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 14%);
}
html[data-rattib-material="glass"] .workspace-framed .first-run-guide .first-run-primary {
  background: #00d492;
  color: #0c0a07;
  border-color: #00d492;
  border-radius: 999px;
}
html[data-rattib-material="glass"] .workspace-framed #day1-tutorial:not([hidden]) {
  border-radius: 28px;
  margin: 8px 0 16px;
  border: 1px solid var(--border);
}
html[data-rattib-material="glass"][data-color-theme="sarab"][data-theme="dark"] .workspace-framed #day1-tutorial:not([hidden]) {
  background: #15120d;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 12%);
}

/* Reminders dialog. Night stays night; light stays sand paper. */
html #rattib-reminders-dialog {
  border-radius: 28px;
}
html[data-theme="dark"] #rattib-reminders-dialog {
  background: #15120d;
  background-image: none;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 14%);
}
html[data-theme="dark"] #rattib-reminders-dialog :is(.rattib-reminders__note, .rattib-reminders__card, .rattib-reminders__later, .rattib-reminders__snooze) {
  background: #1c1914;
  color: #f3f0e9;
  border-color: rgb(243 240 233 / 14%);
}
html[data-theme="light"] #rattib-reminders-dialog {
  background: #f7f5ee;
  background-image: none;
  color: #0c0a07;
}

/* Focus: scenic stage and recordings stay. Tiles around them match the quiet cards. */
#panel-focus :is(.focus-sound-preset, .focus-sound-active, .focus-sound-layer-active, .focus-tool-dialog, .focus-card) {
  border-radius: 28px;
}
#panel-focus .focus-sound-preset {
  min-block-size: 44px;
}

@media (max-width: 1023px) {
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools-body {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools .shell-utils {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 1000px) {
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools[open] > summary {
    position: relative;
    z-index: 160;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools[open] > .workspace-tools-body {
    position: fixed;
    inset: 8px;
    width: auto;
    max-block-size: none;
    overflow: auto;
    z-index: 140;
  }
}

@media (max-width: 767px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-filters,
  html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-advanced-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-range,
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  html[data-rattib-material="glass"] .workspace-framed :is(
    .knowledge-library,
    .knowledge-detail,
    .files-content,
    .scheduling-editor,
    .collaboration-thread,
    #client-portal-host,
    #automations-reminders-host,
    .time-list,
    .week-board-wrap,
    .workspace-tools-body,
    .first-run-guide:not([data-collapsed="true"])
  ) {
    border-radius: 20px;
    padding: 14px;
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"] .workspace-framed #panel-files .files-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"][lang="en"] .workspace-framed :is(
    #panel-knowledge .knowledge-header h1,
    #panel-timesheet .time-head h1,
    #panel-week .panel-head h1,
    #panel-files > h2
  ) {
    font-size: 32px;
  }
}

@media (min-width: 1440px) {
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-knowledge, #panel-files, #panel-collaboration, #panel-timesheet) {
    max-inline-size: 1120px;
  }
}

@media (min-width: 1920px) {
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-knowledge, #panel-files, #panel-collaboration, #panel-timesheet, #panel-scheduling, #panel-week) {
    max-inline-size: 1280px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools[open] > summary {
    position: relative;
    z-index: 160;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools[open] > .workspace-tools-body {
    position: fixed;
    inset: 8px;
    width: auto;
    max-block-size: none;
    overflow: auto;
    z-index: 140;
  }
  html[data-rattib-material="glass"] .workspace-framed .first-run-guide:not([data-collapsed="true"]) {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-rattib-material="glass"] .workspace-framed :is(
    .knowledge-page-row,
    .workspace-tools-body,
    .first-run-choice,
    #rattib-reminders-dialog
  ) {
    transition: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  html[data-rattib-material="glass"] .workspace-framed :is(
    .knowledge-library,
    .knowledge-detail,
    .knowledge-block,
    .knowledge-page-row,
    .files-content,
    .files-list > li,
    .time-total-card,
    .week-glance-card,
    .scheduling-editor,
    .collaboration-thread,
    .collaboration-comment,
    #automations-reminders-host,
    #operations-studio-host,
    .workspace-tools-body,
    .account-session-panel,
    .cloud-account-panel,
    .first-run-guide,
    .first-run-choice
  ) {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  html[data-rattib-material="glass"] .workspace-framed :is(
    .knowledge-primary,
    .time-primary,
    #account-sign-in,
    .first-run-primary,
    #scheduling-save,
    #scheduling-book
  ) {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  html #rattib-reminders-dialog,
  html[data-theme="dark"] #rattib-reminders-dialog,
  html[data-theme="light"] #rattib-reminders-dialog {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
}

/* Settings on desktop: the preferences block (.shell-utils) is nested inside
   .brand-meta, so `grid-column: 2` above opened an implicit narrow column there
   and squeezed the colour-theme cards into one-letter lines. Let the account
   block span the sheet and give preferences a full-width first row. */
@media (min-width: 1024px) {
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools-body {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools .brand-meta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    align-items: start;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools .brand-meta > .shell-utils {
    grid-column: 1 / -1;
    grid-row: 1;
    align-items: flex-start;
  }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools .workspace-palette-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  }
}
/* Approved Focus materials. Today/Tasks, then individually reviewed app screens.
   Shared canvas/chrome activate only for the screens explicitly listed below.
   Existing controllers, IDs, navigation, data, money and Focus remain intact.
   Dark scene and typography reuse current live Focus assets. The light
   scene is the Atrium mint-sage sky; Sarab itself paints the Soft Board flat room (soft-board.css). */
/* The rules scoped to one tool page live in focus-workspace-preview-<page>.css: parked behind that page and placed right after this sheet in index.html, in the order their rules had here. Keep a rule in this file when it is shared or ties with a later rule. */
html[data-rattib-material="glass"].rt-route:not(#_) {
  --preview-ink: #f7f5ee;
  --preview-muted: #cbc5d2;
  --preview-line: rgb(246 240 249 / .16);
  --preview-control-line: #887c93;
  --preview-surface: rgb(22 18 31 / .88);
  --preview-dialog-surface: rgb(22 18 31 / .98);
  --preview-soft: rgb(28 22 39 / .72);
  --preview-field: rgb(255 251 255 / .045);
  --preview-row: rgb(255 251 255 / .04);
  --preview-accent: #9bc8a7;
  --preview-action: #00d492;
  --preview-action-ink: #0c0a07;
  --preview-display: "Instrument Serif", Georgia, serif;
  --preview-ui: "Instrument Sans", "IBM Plex Sans Arabic", sans-serif;
  --preview-mono: "IBM Plex Mono", monospace;
  --preview-shadow: inset 0 1px 0 rgb(255 255 255 / .055), 0 12px 36px rgb(10 7 20 / .12);
  --preview-wash: rgb(10 7 20 / .2);
  --preview-scene: url("assets/focus-scenes/violet-peach.webp");
  color-scheme: dark;
}
html[data-rattib-material="glass"][data-theme="light"].rt-route:not(#_) {
  --preview-ink: #10201a;
  --preview-muted: #51635a;
  --preview-line: rgb(16 32 26 / .11);
  --preview-control-line: #8c9d94;
  --preview-surface: rgb(255 255 255 / .74);
  --preview-dialog-surface: #fbfdfb;
  --preview-soft: rgb(255 255 255 / .56);
  --preview-field: rgb(255 255 255 / .62);
  --preview-row: rgb(16 32 26 / .045);
  --preview-accent: #0b7a4a;
  --preview-action: #14d17a;
  --preview-action-ink: #06281a;
  --preview-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 24px 60px rgb(30 60 45 / .14), 0 2px 6px rgb(30 60 45 / .06);
  --preview-wash: rgb(255 255 255 / .22);
  --preview-scene: url("assets/workspace-scenes/sarab-light-mint-sage.webp");
  color-scheme: light;
}
@media (max-width: 800px) {
  html[data-rattib-material="glass"][data-theme="light"].rt-route:not(#_) {
    --preview-scene: url("assets/workspace-scenes/sarab-light-mint-sage-phone.webp");
  }
}
html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) {
  --preview-display: "IBM Plex Sans Arabic", sans-serif;
  --preview-ui: "IBM Plex Sans Arabic", "Instrument Sans", sans-serif;
  --preview-mono: "IBM Plex Sans Arabic", sans-serif;
}
html.rt-route:not(#_) body.workspace-framed {
  --font: var(--preview-ui);
  --text: var(--preview-ink);
  --muted: var(--preview-muted);
  --border: var(--preview-line);
  --card: var(--preview-surface);
  --row: var(--preview-row);
  --input: var(--preview-field);
  --elevated: var(--preview-row);
  --green: var(--preview-accent);
  --green-dim: var(--preview-row);
  --tool-accent: var(--preview-accent);
  --tool-on-accent: var(--preview-action-ink);
  --tool-surface: var(--preview-row);
  --tool-line: var(--preview-line);
  --studio-ink: var(--preview-ink);
  --studio-muted: var(--preview-muted);
  --studio-line: var(--preview-line);
  --studio-card: var(--preview-surface);
  --studio-accent: var(--preview-accent);
  --rt-ink: var(--preview-ink);
  --rt-muted: var(--preview-muted);
  --rt-card: var(--preview-surface);
  --rt-line: var(--preview-line);
  --glass-card: var(--preview-surface);
  --glass-panel: var(--preview-soft);
  --glass-control: var(--preview-field);
  --glass-raised: var(--preview-surface);
  --glass-border: var(--preview-line);
  --glass-input-border: var(--preview-control-line);
  --glass-action: var(--preview-action);
  --glass-action-text: var(--preview-action-ink);
  --glass-focus: var(--preview-accent);
  --glass-option-bg: var(--preview-surface);
  --glass-option-text: var(--preview-ink);
  --glass-shadow: var(--preview-shadow);
  --glass-backdrop: none;
  --glass-sheen: none;
  background: linear-gradient(var(--preview-wash),var(--preview-wash)), var(--preview-scene) center / cover no-repeat;
  font-family: var(--preview-ui);
  color: var(--preview-ink);
}
html.rt-route:not(#_) .workspace-framed :is(.workspace, .workspace > main) {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html.rt-route:not(#_) .workspace-framed .workspace { padding: 0; }
html.rt-route:not(#_) .workspace-framed .workspace > main {
  padding: 14px 8px 44px;
  scrollbar-width: thin;
  scrollbar-color: var(--preview-line) transparent;
}
html.rt-route:not(#_) .workspace-framed .top {
  color: var(--preview-ink);
  padding: 0;
  min-block-size: 72px;
  background: none;
  gap: 12px;
}
html.rt-route:not(#_) .workspace-framed #rattib-reminders-open { position: static; min-block-size: 44px; padding: 8px 12px; font-size: 12px; color: var(--preview-ink); border-color: var(--preview-line); border-radius: 12px; }
html.rt-route:not(#_) .workspace-framed #rattib-reminders-open img { content: url("assets/focus-icons/clock.svg"); filter: brightness(0) invert(1); opacity: .8; }
html[data-theme="light"].rt-route:not(#_) .workspace-framed #rattib-reminders-open img { filter: brightness(0); }
html.rt-route:not(#_) .workspace-framed .workspace-context {
  font-size: 12px;
  font-weight: 400;
  color: var(--preview-muted);
}
html[data-preview-data="synthetic"].rt-route:not(#_) .workspace-framed .workspace-context::after {
  content: "Design preview";
  display: inline-block;
  margin-inline-start: 12px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--preview-line);
  font-size: 11px;
}
html[data-preview-data="synthetic"].rt-route:not(#_) .workspace-framed .workspace-context::after { content: "Design preview · Synthetic data"; }
html[lang="ar"][data-preview-data="synthetic"].rt-route:not(#_) .workspace-framed .workspace-context::after { content: "معاينة التصميم · بيانات تجريبية"; }
/* One primary per screen. The existing global create launcher stays available. */
html.rt-route:not(#_) .workspace-framed :is(.workspace-create, .workspace-pin, #workspace-tools-trigger) {
  min-block-size: 44px;
  border: 1px solid var(--preview-line);
  border-radius: 12px;
  background: var(--preview-soft);
  color: var(--preview-ink);
  box-shadow: none;
  font-size: 12px;
  padding-inline: 15px;
}
html.rt-route:not(#_) .workspace-framed .brand {
  inset-inline-start: 44px;
  top: 36px;
  inline-size: 168px;
  gap: 10px;
  color: #f7f5ee;
}
html.rt-route:not(#_) .workspace-framed .brand strong {
  font: 400 34px/1.15 var(--preview-display);
  letter-spacing: -.045em;
  color: #f7f5ee;
}
html[lang="ar"].rt-route:not(#_) .workspace-framed .brand strong { font-size: 27px; letter-spacing: 0; }
html.rt-route:not(#_) .workspace-framed .brand .mark { inline-size: 28px; block-size: 28px; border-radius: 8px; }
/* Single floating navigation material, with labels and existing disclosures. */
html.rt-route:not(#_) .workspace-framed :is(.workspace-navigation-sidebar, .workspace-utilities, .workspace-mobile-nav) {
  --text: #f7f5ee;
  --muted: #c4bcca;
  --chrome-muted: #c4bcca;
  --green: #9bc8a7;
  --tool-accent: #9bc8a7;
  --preview-accent: #9bc8a7;
  --tool-surface: rgb(155 200 167 / .12);
  --tool-line: rgb(246 240 249 / .16);
  --tool-on-accent: #0c0a07;
  --card: #191320;
  --row: rgb(247 245 238 / .075);
  --elevated: rgb(155 200 167 / .14);
  --border: rgb(246 240 249 / .16);
  color: var(--text);
  background: rgb(16 12 23 / .8);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .075), 0 18px 45px rgb(10 7 20 / .2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="light"].rt-route:not(#_) .workspace-framed :is(.workspace-navigation-sidebar, .workspace-utilities, .workspace-mobile-nav) { background-color: rgb(12 29 21 / .8); }
html.rt-route:not(#_) .workspace-framed .workspace-navigation-sidebar {
  inset-inline-start: 24px;
  inset-block: 24px;
  inline-size: 220px;
  block-size: calc(100dvh - 48px);
  padding: 92px 14px 14px;
}
html.rt-route:not(#_) .workspace-framed .workspace-navigation-sidebar .tabs {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html.rt-route:not(#_) .workspace-framed .workspace-nav-group + .workspace-nav-group {
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-color: rgb(246 240 249 / .08);
}
html.rt-route:not(#_) .workspace-framed .workspace-group-label {
  color: #bfb5c9;
  font-size: 11px;
  font-weight: 500;
  padding-inline: 12px;
  min-block-size: 44px;
}
html.rt-route:not(#_) .workspace-framed .tabs .tab {
  min-block-size: 46px;
  margin-block: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #ddd6e1;
  font-size: 13px;
  font-weight: 400;
  gap: 12px;
  background: transparent;
}
html.rt-route:not(#_) .workspace-framed .tabs .tab.active {
  background: rgb(155 200 167 / .14);
  border-color: rgb(155 200 167 / .24);
  color: #d5ebda;
  font-weight: 600;
  box-shadow: none;
}
html.rt-route:not(#_) .workspace-framed .tabs .tab .tab-icon { color: currentColor; opacity: .85; inline-size: 18px; block-size: 18px; flex-basis: 18px; background: transparent; box-shadow: none; filter: none; }
html.rt-route:not(#_) .workspace-framed :is(.tabs .tab, .workspace-mobile-item) .tab-icon svg { inline-size: 18px; block-size: 18px; stroke: currentColor; }
html.rt-route:not(#_) .workspace-framed :is(.workspace-all-tools, .workspace-pinned-destination) { color: #ddd6e1; background: transparent; border-color: rgb(246 240 249 / .14); font-size: 12px; min-block-size: 44px; border-radius: 12px; }
html.rt-route:not(#_) .workspace-framed .workspace-utilities { inset-inline-end: 24px; inset-block: 24px; inline-size: 54px; block-size: calc(100dvh - 48px); padding: 8px 4px; border-radius: 20px; }
html.rt-route:not(#_) .workspace-framed .workspace-utility { color: #ddd6e1; border-radius: 12px; }
html.rt-route:not(#_) .workspace-framed .workspace-utility[data-workspace-write] { color: #d5ebda; background: rgb(155 200 167 / .14); }
html.rt-route:not(#_) .workspace-framed :is(.workspace-utility-label, .workspace-tools-body) { background: var(--preview-surface); color: var(--preview-ink); border-color: var(--preview-line); }
html.rt-route:not(#_) .workspace-framed .foot { color: var(--preview-muted); background: none; }
html.rt-route:not(#_) .workspace-framed :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--preview-accent); outline-offset: 4px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(.workspace-navigation-sidebar, .workspace-utilities, .workspace-mobile-nav) :is(button, a, summary, [tabindex]) { --glass-focus: #9bc8a7; }
/* Reading surfaces use opacity, not repeated blur. Only navigation samples sky. */
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) { --tool-accent: var(--preview-accent); --tool-surface: var(--preview-row); --tool-line: var(--preview-line); color: var(--preview-ink); font-family: var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) :is(.home-next-step, .home-widget, .home-signal, .home-metric, .suite-toolbar, .suite-task-row, .suite-board-column) {
  background: var(--preview-surface);
  background-image: none;
  color: var(--preview-ink);
  border: 1px solid var(--preview-line);
  border-radius: 22px;
  box-shadow: var(--preview-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) :is(h1, h2, h3, p) { color: inherit; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-header { margin-block: 6px 24px; padding: 0; min-block-size: 0; align-items: center; border: 0; gap: 20px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-header::after,
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-lead::after { display: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-lead { color: var(--preview-muted); font-size: 13px; line-height: 1.65; max-inline-size: 58ch; margin: 10px 0 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-kicker { font-family: var(--preview-mono); color: var(--preview-muted); font-size: 10px; letter-spacing: .1em; font-weight: 400; text-transform: uppercase; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) :is(.suite-primary, #home-next-action):not(:disabled) {
  min-block-size: 46px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: var(--preview-action);
  background-image: none;
  color: var(--preview-action-ink);
  padding: 12px 20px;
  font: 600 13px/1.5 var(--preview-ui);
  box-shadow: none;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) :is(.suite-primary, #home-next-action):hover:not(:disabled) { filter: brightness(1.08); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) :is(input, select, textarea) {
  min-block-size: 44px;
  color: var(--preview-ink);
  background: var(--preview-field);
  background-image: none;
  border: 1px solid var(--preview-control-line);
  border-radius: 10px;
  font: 400 13px/1.5 var(--preview-ui);
  box-shadow: none;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) option { background: var(--card); color: var(--preview-ink); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .localized-control-input {
  min-block-size: 44px; padding: 10px 12px; background: var(--preview-field);
  color: var(--preview-ink); border: 1px solid var(--preview-control-line);
  border-radius: 10px; font: 400 13px/1.5 var(--preview-ui); box-shadow: none;
  word-break: normal; overflow-wrap: normal;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-save-status:empty { display: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-save-status { margin: 0 0 16px; font-size: 11px; color: var(--preview-muted); }
/* Today: a useful work queue alongside the signals, not a clock imitation. */
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home.active {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(270px, 1fr);
  grid-template-areas: "head head" "next next" "metrics metrics" "overview overview" "widgets signals";
  gap: 18px;
  align-items: start;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home > .suite-header { grid-area: head; margin-block: 0 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header-copy { display: flex; flex-direction: column; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header h1 { order: -1; margin: 0 0 12px; font: 400 10px/1.5 var(--preview-mono); color: var(--preview-muted); letter-spacing: .14em; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-greeting { color: var(--preview-ink); font: 400 clamp(44px,4.2vw,62px)/1.06 var(--preview-display); letter-spacing: -.03em; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-greeting-date { font-size: 12px; color: var(--preview-muted); margin-block: 10px 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header .suite-lead { margin-block: 4px 0; font-size: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-customization > summary { min-block-size: 44px; border-radius: 12px; background: var(--preview-soft); color: var(--preview-muted); border: 1px solid var(--preview-line); padding: 10px 16px; font-size: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-step { grid-area: next; margin: 0; padding: 24px 28px; min-block-size: 128px; border-inline-start: 1px solid var(--preview-line); display: flex; align-items: center; gap: 24px; background: var(--preview-soft); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-copy { flex: 1; min-inline-size: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-label { font: 400 10px/1.5 var(--preview-mono); letter-spacing: .04em; color: var(--preview-accent); margin: 0 0 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-copy h2 { font: 400 30px/1.18 var(--preview-display); letter-spacing: -.01em; margin: 0 0 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-next-detail { color: var(--preview-muted); font-size: 12px; line-height: 1.5; margin: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metrics { grid-area: metrics; gap: 12px; margin: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 20px; min-block-size: 84px; border-radius: 18px; background: var(--preview-soft); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric::before { display: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric span { color: var(--preview-muted); font-size: 12px; font-weight: 400; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric strong { color: var(--preview-ink); font: 400 36px/1 var(--preview-display); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric[data-home-metric="overdue"] :is(span, strong) { color: var(--preview-ink); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric-meter { display: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-overview { grid-area: overview; border: 0; margin: 0; background: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-overview > summary { min-block-size: 44px; padding: 10px 14px; inline-size: fit-content; max-inline-size: 100%; font-size: 12px; color: var(--preview-muted); border: 1px solid var(--preview-line); background: var(--preview-surface); border-radius: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-overview .suite-toolbar { margin: 8px 0 0; padding: 18px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widgets { grid-area: widgets; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget { padding: 22px; border-radius: 22px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget.is-wide { grid-column: 1 / -1; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head { gap: 12px; padding-block-end: 14px; margin-block-end: 4px; border-color: var(--preview-line); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head h2 { color: var(--preview-ink); font: 400 26px/1.2 var(--preview-display); letter-spacing: -.01em; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head button { color: var(--preview-accent); min-block-size: 44px; padding: 7px 10px; font-size: 11px; background: transparent; border: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home :is(.home-work-row, .home-project-row, .home-contact-row) { color: var(--preview-ink); background: transparent; border: 0; border-block-end: 1px solid var(--preview-line); border-radius: 0; padding: 15px 0; min-block-size: 74px; gap: 16px; box-shadow: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-work-row:last-child { border-block-end: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-row-copy strong { font-size: 13px; font-weight: 500; line-height: 1.45; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home :is(.home-row-copy small, .home-row-end, .home-contact-row small, .home-project-row small) { color: var(--preview-muted); font-size: 11px; font-weight: 400; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-row-end { flex-shrink: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-row-end.is-overdue { color: var(--preview-ink); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signals { grid-area: signals; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal { padding: 20px; border-radius: 22px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-kicker { color: var(--preview-muted); font-size: 12px; font-weight: 400; margin-block: 0 10px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-value { color: var(--preview-ink); font: 400 36px/1.1 var(--preview-display); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-note { color: var(--preview-muted); font-size: 11px; line-height: 1.65; margin-block: 9px 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-chart { block-size: 65px; margin-block: 12px 0; color: var(--preview-accent); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-series { gap: 4px; margin: 0; padding-block: 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-series li { color: var(--preview-muted); background: transparent; font-size: 10px; border: 0; padding: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-list { padding: 0; margin-block: 12px 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-list li { padding-block: 9px; gap: 10px; font-size: 10px; border-color: var(--preview-line); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-list li { background: transparent; border-radius: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal-list strong { font-size: 11px; font-weight: 400; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-avatar { inline-size: 26px; block-size: 26px; flex: 0 0 26px; color: var(--preview-accent); background: var(--preview-row); border: 1px solid var(--preview-line); font-weight: 400; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-invoice-visual { gap: 10px; margin-block: 14px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-invoice-donut { inline-size: 94px; flex-basis: 94px; block-size: 94px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home :is(.home-invoice-legend, .home-invoice-amounts) { font-size: 11px; color: var(--preview-muted); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-invoice-amounts li { background: var(--preview-row); border-color: var(--preview-line); border-radius: 10px; padding: 10px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-invoice-amounts bdi { color: var(--preview-ink); font-size: 15px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-toolbar { display: grid; grid-template-columns: minmax(160px,1.55fr) repeat(3,minmax(110px,1fr)) auto; align-items: end; padding: 20px; gap: 14px; margin: 0 0 22px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-field { min-inline-size: 0; gap: 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-views { display: flex; align-items: center; gap: 2px; padding: 3px; min-block-size: 44px; border: 1px solid var(--preview-line); border-radius: 12px; background: var(--preview-field); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-task-name { font: 500 15px/1.5 var(--preview-ui); color: var(--preview-ink); padding: 0; min-block-size: 44px; border: 0; background: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-task-facts { gap: 10px; font-size: 11px; color: var(--preview-muted); margin-block: 6px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-task-meta { color: var(--preview-muted); font-size: 11px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks :is(.suite-priority, .suite-deadline, .suite-task-project, .suite-meta-item) { background: transparent; border: 0; color: var(--preview-muted); font-size: 11px; padding: 0; border-radius: 0; font-weight: 400; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-done { inline-size: 44px; block-size: 44px; border: 1px solid var(--preview-line); border-radius: 13px; background: var(--preview-field); color: var(--preview-accent); font-size: 16px; padding: 10px; box-shadow: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-task-status { font-size: 11px; min-block-size: 44px; border-radius: 10px; inline-size: 132px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks [data-delete-task] { color: var(--preview-muted); font-size: 11px; background: transparent; border: 0; min-block-size: 44px; padding-inline: 10px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-task-time { display: flex; flex-wrap: wrap; margin: 4px 0 0; gap: 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-board-column { padding: 18px; background: var(--preview-surface); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-board-heading { font-size: 13px; font-weight: 500; border-color: var(--preview-line); padding-block-end: 16px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-board-count { background: var(--preview-row); color: var(--preview-muted); border: 1px solid var(--preview-line); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-board-hint { font-size: 11px; color: var(--preview-muted); }
html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) :is(h1,h2,#home-greeting,.home-widget-head h2) { letter-spacing: 0; line-height: 1.5; }
html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home #home-greeting { font-size: 48px; font-weight: 400; }
html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-copy h2 { font-size: 25px; }
html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head h2 { font-size: 22px; }
html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header h1 { font-size: 12px; }
@media(min-width:1001px) {
  html.rt-route:not(#_) .workspace-framed :is(.top,.app-shell,.workspace-notices,.foot) { margin-inline: 276px 110px; }
  html.rt-route:not(#_) .workspace-framed .top { flex: 0 0 72px; }
}
@media(min-width:1001px) and (max-width:1250px) {
  html.rt-route:not(#_) .workspace-framed .workspace-navigation-sidebar { inline-size: 196px; inset-inline-start: 16px; }
  html.rt-route:not(#_) .workspace-framed .brand { inset-inline-start: 32px; inline-size: 160px; }
  html.rt-route:not(#_) .workspace-framed :is(.top,.app-shell,.workspace-notices,.foot) { margin-inline: 236px 96px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home.active { grid-template-columns: minmax(0,1.65fr) minmax(250px,1fr); }
}
@media(max-width:1000px) {
  html.rt-route:not(#_) body.workspace-framed { padding-block-end: 0; }
  html.rt-route:not(#_) .workspace-framed :is(.top,.app-shell,.workspace-notices,.foot) { margin-inline: 20px; }
  html.rt-route:not(#_) .workspace-framed .top { padding-block: 16px 12px; min-block-size: 112px; grid-template-columns: minmax(0,1fr) auto 44px; gap: 6px 8px; }
  html.rt-route:not(#_) .workspace-framed .top > .workspace-tools { grid-column: 3; grid-row: 1; }
  html.rt-route:not(#_) .workspace-framed .top > .workspace-create { grid-column: 2; grid-row: 1; }
  html.rt-route:not(#_) .workspace-framed .top > #rattib-reminders-open { grid-column: 2 / -1; grid-row: 2; justify-self: end; min-inline-size: 0; block-size: 44px; padding: 8px; border-radius: 12px; background: var(--preview-soft); }
  html.rt-route:not(#_) .workspace-framed #rattib-reminders-open > span { display: inline; font-size: 10px; }
  html.rt-route:not(#_) .workspace-framed #rattib-reminders-open > img { inline-size: 16px; block-size: 16px; }
  html.rt-route:not(#_) .workspace-framed #rattib-reminders-open::after { content: "Reminders"; font-size: 10px; }
  html[lang="ar"].rt-route:not(#_) .workspace-framed #rattib-reminders-open::after { content: "التذكيرات"; }
  html.rt-route:not(#_) .workspace-framed .brand { position: static; inline-size: auto; gap: 9px; color: var(--preview-ink); }
  html.rt-route:not(#_) .workspace-framed .brand strong { font-size: 31px; color: var(--preview-ink); }
  html[lang="ar"].rt-route:not(#_) .workspace-framed .brand strong { font-size: 20px; letter-spacing: 0; white-space: nowrap; }
  html.rt-route:not(#_) .workspace-framed .brand small { display: none; }
  html.rt-route:not(#_) .workspace-framed .workspace-context { font-size: 10px; line-height: 1.5; color: var(--preview-ink); }
  html.rt-route:not(#_) .workspace-framed .workspace-context::after { border: 0; margin: 2px 0 0; padding: 0; display: block; font-size: 9px; }
  html.rt-route:not(#_) .workspace-framed .workspace-pin { display: none; }
  html.rt-route:not(#_) .workspace-framed #workspace-tools-trigger { padding-inline: 12px; font-size: 10px; }
  html.rt-route:not(#_) .workspace-framed .workspace-create { padding-inline: 14px; font-size: 12px; }
  html.rt-route:not(#_) .workspace-framed .workspace > main { padding: 12px 0 34px; scroll-padding-block: 12px; }
  html.rt-route:not(#_) .workspace-framed .workspace-mobile-nav { inset-inline: 16px; inset-block-end: calc(12px + env(safe-area-inset-bottom)); inline-size: auto; border-radius: 20px; padding: 6px; gap: 4px; }
  html.rt-route:not(#_) .workspace-framed .workspace-mobile-item { color: #d5cddc; font-size: 10px; min-block-size: 52px; gap: 4px; border-radius: 13px; }
  html.rt-route:not(#_) .workspace-framed .workspace-mobile-item .tab-icon { color: currentColor; inline-size: 18px; block-size: 18px; background: transparent; box-shadow: none; filter: none; }
  html.rt-route:not(#_) .workspace-framed .workspace-mobile-item.active { color: #d5ebda; background: rgb(155 200 167 / .16); }
  html.rt-route:not(#_) .workspace-framed .app-shell { margin-block-end: calc(88px + env(safe-area-inset-bottom)); }
  html.rt-route:not(#_) .workspace-framed .foot { display: none; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home.active { grid-template-columns: minmax(0,1fr); grid-template-areas: "head" "next" "metrics" "overview" "widgets" "signals"; gap: 14px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signals { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
  html.rt-route:not(#_) .workspace-framed :is(.top,.app-shell,.workspace-notices) { margin-inline: 20px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home, #panel-tasks) .suite-header { align-items: start; gap: 12px; margin-block: 0 16px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home > .suite-header { margin-block-end: 6px; flex-wrap: nowrap; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header h1 { font-size: 9px; margin-block-end: 9px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-greeting { font-size: 41px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-greeting-date { font-size: 11px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header .suite-lead { font-size: 11px; line-height: 1.6; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-customization > summary { font-size: 10px; padding: 8px 10px; min-block-size: 44px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .suite-header-actions { align-self: start; margin-block-start: 26px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-step { flex-direction: column; align-items: stretch; padding: 20px; gap: 18px; min-block-size: 0; border-radius: 20px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-label { font-size: 9px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-copy h2 { font-size: 25px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-next-detail { font-size: 11px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-step #home-next-action { align-self: flex-start; min-block-size: 44px; font-size: 12px; padding: 10px 17px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric { min-block-size: 72px; padding: 15px; border-radius: 16px; gap: 8px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric span { font-size: 10px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-metric strong { font-size: 30px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home #home-overview > summary { font-size: 11px; min-block-size: 44px; padding-block: 10px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widgets { grid-template-columns: minmax(0,1fr); gap: 14px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget { padding: 18px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head h2 { font-size: 23px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head button { font-size: 10px; padding-inline: 3px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-work-row { min-block-size: 78px; gap: 10px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-row-copy strong { font-size: 14px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home :is(.home-row-copy small, .home-row-end) { font-size: 11px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signals { grid-template-columns: minmax(0,1fr); }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-home .home-signal { padding: 20px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-kicker { font-size: 9px; letter-spacing: .04em; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-tasks .suite-lead { font-size: 11px; line-height: 1.6; max-inline-size: 23ch; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-home,#panel-tasks) :is(input,select,textarea,.localized-control-input) { font-size: 16px; min-block-size: 44px; }
  html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home #home-greeting { font-size: 33px; line-height: 1.5; }
  html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home .home-next-copy h2 { font-size: 22px; }
  html[data-rattib-material="glass"][lang="ar"].rt-route:not(#_) body.workspace-framed #panel-home .home-widget-head h2 { font-size: 20px; }
}
/* Stable fallback and user preferences. No canvas/filter motion in this preview. */
@supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  html.rt-route:not(#_) .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav) { background: #17121e; }
}
html[data-transparency="reduce"].rt-route:not(#_) body.workspace-framed { --preview-surface: #211b2a; --preview-soft: #211b2a; background-image: none; background-color: #15101e; }
html[data-transparency="reduce"][data-theme="light"].rt-route:not(#_) body.workspace-framed { --preview-surface: #fdfdf9; --preview-soft: #fdfdf9; background-color: #edf2ec; }
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  html.rt-route:not(#_) body.workspace-framed { --preview-surface: #211b2a; --preview-soft: #211b2a; --preview-line: #a49aa8; background-image: none; background-color: #15101e; }
  html[data-theme="light"].rt-route:not(#_) body.workspace-framed { --preview-surface: #fdfdf9; --preview-soft: #fdfdf9; --preview-line: #627968; background-color: #edf2ec; }
  html.rt-route:not(#_) .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav) { background: #17121e; backdrop-filter: none; }
}
@media(prefers-reduced-motion:reduce) {
  html.rt-route:not(#_) .workspace-framed :is(#panel-home, #panel-tasks, .top, .workspace-navigation-sidebar, .workspace-mobile-nav) *,
  html.rt-route:not(#_) .workspace-framed :is(#panel-home, #panel-tasks, .top, .workspace-navigation-sidebar, .workspace-mobile-nav) *::before { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
@media(forced-colors:active) {
  html.rt-route:not(#_) body.workspace-framed { --preview-ink: CanvasText; --preview-muted: CanvasText; --preview-line: CanvasText; --preview-surface: Canvas; --preview-soft: Canvas; --preview-field: Field; --preview-accent: LinkText; --preview-action: ButtonFace; --preview-action-ink: ButtonText; --preview-shadow: none; background: Canvas; }
  html.rt-route:not(#_) .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav) { background: Canvas; color: CanvasText; backdrop-filter: none; box-shadow: none; border-color: CanvasText; }
  html.rt-route:not(#_) .workspace-framed :is(.brand strong,.tab,.tab.active,.workspace-group-label,.workspace-all-tools,.workspace-utility,.workspace-mobile-item,.workspace-mobile-item.active) { color: CanvasText; }
}
html[data-rattib-material="glass"][data-route="crm"]:not(#_) body.workspace-framed .foot { color: var(--preview-ink); background: var(--preview-dialog-surface); padding: 4px 12px; border-radius: 8px; }
html[data-rattib-material="glass"][data-route="crm"]:not(#_) body.workspace-framed #rattib-reminders-open .rattib-reminders__count { color: var(--preview-action-ink); background: var(--preview-accent); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#client-profile-save,#create-draft-dialog button[type="submit"]):not(:disabled) { color: var(--preview-action-ink); background: var(--preview-action); border-color: transparent; }
/* Projects: native master/detail, linked task controls and template editors. */
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) { --suite-bg: var(--preview-surface); --suite-soft: var(--preview-row); --suite-line: var(--preview-line); --suite-text: var(--preview-ink); --suite-muted: var(--preview-muted); --suite-action: var(--preview-accent); color: var(--preview-ink); font-family: var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) button { min-block-size: 44px; padding: 9px 13px; border: 1px solid var(--preview-line); border-radius: 12px; background: var(--preview-field); color: var(--preview-ink); font: 500 13px/1.5 var(--preview-ui); box-shadow: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) :is(input,textarea,.localized-control-input) { min-block-size: 44px; padding: 10px 12px; border: 1px solid var(--preview-control-line); border-radius: 12px; background: var(--preview-field); color: var(--preview-ink); font: 400 14px/1.5 var(--preview-ui); box-shadow: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) .localized-control { min-inline-size: 0; max-inline-size: 100%; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) :is(select,option) { background: var(--preview-surface); color: var(--preview-ink); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) .suite-field { color: var(--preview-muted); font: 400 12px/1.5 var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0; margin-block-end: 16px; border: 0; background: transparent; box-shadow: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-kicker { font: 400 10px/1.5 var(--preview-mono); color: var(--preview-muted); margin: 0 0 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-lead { font: 400 13px/1.6 var(--preview-ui); color: var(--preview-muted); max-inline-size: 58ch; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-save-status { inline-size: fit-content; min-block-size: 0; margin: 0 0 16px; padding: 5px 9px; border: 1px solid var(--preview-line); border-radius: 8px; color: var(--preview-muted); background: var(--preview-dialog-surface); font: 400 11px/1.5 var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,230px); align-items: end; gap: 16px; margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--preview-line); border-radius: 20px; background: var(--preview-surface); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-project-layout { grid-template-columns: minmax(220px,260px) minmax(0,1fr); gap: 22px; align-items: start; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-projects .suite-project-list { gap: 12px; padding: 0; border: 0; background: transparent; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-template-dialog) .suite-project-item { padding: 18px; border: 1px solid var(--preview-line); border-radius: 18px; background: var(--preview-surface); background-image: none; color: var(--preview-ink); box-shadow: var(--preview-shadow); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-template-dialog) .suite-project-count { margin-block-start: 12px; padding-block-start: 10px; border-color: var(--preview-line); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#panel-projects,#project-template-dialog) .suite-project-detail { padding: 24px; border: 1px solid var(--preview-line); border-radius: 22px; color: var(--preview-ink); background: var(--preview-surface); background-image: none; box-shadow: var(--preview-shadow); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) { padding: 24px; border: 1px solid var(--preview-line); border-radius: 24px; background: var(--preview-dialog-surface); color: var(--preview-ink); box-shadow: var(--preview-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) h2 { color: var(--preview-ink); font: 400 32px/1.3 var(--preview-display); margin-block-end: 20px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) :is(input,textarea,.localized-control-input) { font-size: 16px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) :is(.suite-task-meta,.suite-editor-details > summary small,.template-preview-tasks) { color: var(--preview-muted); font-size: 13px; line-height: 1.7; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) :is(.suite-editor-details,.suite-recurrence-editor,.suite-task-blockers,.template-task-editor,.suite-recurrence-weekdays) { background: var(--preview-row); color: var(--preview-ink); border-color: var(--preview-line); border-radius: 14px; padding: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) input[type="checkbox"] { inline-size: 20px; min-block-size: 20px; block-size: 20px; padding: 0; accent-color: var(--preview-accent); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) .suite-error { color: var(--preview-ink); background: var(--preview-row); border: 1px solid var(--preview-control-line); border-radius: 12px; padding: 12px; font-size: 13px; }
html[data-rattib-material="glass"][data-route="projects"]:not(#_) body.workspace-framed .foot { inline-size: fit-content; align-self: center; padding: 8px 14px; border-radius: 10px; color: var(--preview-muted); background: var(--preview-dialog-surface); }
html[data-rattib-material="glass"][data-route="projects"]:not(#_) body.workspace-framed #rattib-reminders-open .rattib-reminders__count { background: var(--preview-accent); color: var(--preview-action-ink); }
@media (max-width:700px) {
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) { padding: 18px; }
}
html[data-rattib-material="glass"][data-route="calendar"]:not(#_) body.workspace-framed .foot { inline-size: fit-content; align-self: center; border: 0; background: var(--preview-dialog-surface); color: var(--preview-muted); border-radius: 10px; padding: 8px 14px; font-size: 10px; }
html[data-rattib-material="glass"][data-route="calendar"]:not(#_) body.workspace-framed #rattib-reminders-open .rattib-reminders__count { background: var(--preview-accent); color: var(--preview-action-ink); }
html[data-rattib-material="glass"][data-route="finance"]:not(#_) body.workspace-framed .foot { inline-size: fit-content; align-self: center; border: 0; border-radius: 10px; padding: 8px 14px; background: var(--preview-dialog-surface); color: var(--preview-muted); font-size: 10px; }
/* Review the native Today layout and Tasks composers as opaque reading surfaces. */
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) { padding: 24px; border: 1px solid var(--preview-line); border-radius: 24px; background: var(--preview-dialog-surface); color: var(--preview-ink); box-shadow: var(--preview-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) h2 { color: var(--preview-ink); font: 400 32px/1.3 var(--preview-display); margin-block-end: 16px; }
html[lang="ar"][data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) h2 { font-size: 25px; line-height: 1.5; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) :is(.suite-field,.home-layout-row > label) { color: var(--preview-muted); font: 400 13px/1.7 var(--preview-ui); min-block-size: 44px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) :is(input,select,textarea,.localized-control-input) { font-size: 16px; background: var(--preview-field); color: var(--preview-ink); border-color: var(--preview-control-line); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) input[type="checkbox"] { inline-size: 20px; min-block-size: 20px; block-size: 20px; padding: 0; accent-color: var(--preview-accent); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) :is(.suite-task-meta,.suite-editor-details > summary small,.home-caption) { color: var(--preview-muted); font-size: 13px; line-height: 1.7; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) :is(.suite-editor-details,.suite-recurrence-editor,.suite-task-blockers,.suite-recurrence-weekdays,.home-layout-row) { background: var(--preview-row); color: var(--preview-ink); border-color: var(--preview-line); border-radius: 14px; padding: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) button { min-block-size: 44px; color: var(--preview-ink); border: 1px solid var(--preview-line); background: var(--preview-row); font: 400 13px/1.6 var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) :is(button[type="submit"],.suite-primary):not(:disabled) { background: var(--preview-action); color: var(--preview-action-ink); border-color: transparent; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) .suite-error { color: var(--preview-ink); background: var(--preview-row); border: 1px solid var(--preview-control-line); border-radius: 12px; padding: 12px; font-size: 13px; }
@media (max-width:700px) {
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed :is(#project-work-dialog,#home-layout-dialog) { padding: 18px; border-radius: 22px; max-height: calc(100dvh - 32px); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #home-layout-dialog .home-layout-row { grid-template-columns: minmax(0,1fr) minmax(100px,.8fr); gap: 10px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #home-layout-dialog .home-layout-moves { grid-column: 1 / -1; display: flex; gap: 8px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #home-layout-dialog .home-layout-moves button { flex: 1 1 0; }
}
/* Reserve the phone context track for its native label and preview marker;
   Reminders keeps a separate 44px control at the inline end. */
@media (max-width:700px) {
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top > .workspace-context {
    grid-column: 1 / -1;
    grid-row: 2;
    max-inline-size: calc(100% - 108px);
    min-inline-size: 0;
  }
  html[data-rattib-material="glass"][data-preview-data="synthetic"].rt-route:not(#_) body.workspace-framed .workspace-context::after {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    white-space: normal;
    font-size: 9px;
  }
}
/* Tablet and landscape retain full native action labels without sharing a track. */
@media (min-width:601px) and (max-width:1000px) {
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top { display: grid; grid-template-columns: minmax(0,1fr) max-content max-content; align-items: center; gap: 6px 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top > .brand { grid-column: 1; grid-row: 1; min-inline-size: 0; max-inline-size: 100%; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top > .workspace-create { grid-column: 2; grid-row: 1; white-space: nowrap; min-block-size: 44px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top > .workspace-tools { grid-column: 3; grid-row: 1; inline-size: auto; justify-self: end; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #workspace-tools-trigger { inline-size: max-content; min-block-size: 44px; padding: 10px 14px; white-space: nowrap; font-size: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top > .workspace-context { grid-column: 1; grid-row: 2; min-inline-size: 0; max-inline-size: 100%; position: static; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top > #rattib-reminders-open { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #rattib-reminders-open::after { content: none; }
}
@media (min-width:601px) and (max-width:1000px) and (max-height:500px) {
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed .top { min-block-size: 100px; padding-block: 8px; }
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #rattib-reminders-open .rattib-reminders__count { background: #87433e; color: #ffffff; }
html[data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .workspace-navigation-sidebar .tab:focus-visible { outline-offset: -4px !important; }
html[data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .foot { width: fit-content; max-inline-size: 100%; padding: 8px 12px; border: 1px solid var(--preview-line); border-radius: 12px; background: var(--preview-dialog-surface); color: var(--preview-muted); }
html[data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .localized-picker[open] { background: var(--preview-dialog-surface); color: var(--preview-ink); border-color: var(--preview-line); box-shadow: var(--preview-shadow); backdrop-filter: none; }
html[data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .localized-picker :is(input,button) { font: 400 14px/1.6 var(--preview-ui); border-color: var(--preview-control-line); background: var(--preview-field); color: var(--preview-ink); }
@media(max-width:700px) {
  html[data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .top > .workspace-context { grid-column: 1 / -1; grid-row: 2; max-inline-size: calc(100% - 108px); min-inline-size: 0; }
  html[data-preview-data="synthetic"][data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .workspace-context::after { display: block !important; border: 0 !important; margin: 2px 0 0 !important; padding: 0 !important; white-space: normal; font-size: 9px; }
html[data-rattib-material="glass"]:is([data-route="contracts"]:not(#_),[data-route="pricing"]:not(#_)) body.workspace-framed .localized-picker input { font-size: 16px; }
}
/* AA over bright scene areas in dark mode: empty states and loose notes get a
   readable backing or full-ink text instead of sitting straight on the scene. */
html[data-rattib-material="glass"]:not([data-theme="light"]) body.workspace-framed .panel.active :is(.suite-empty, .empty-hint) {
  background: rgb(22 18 31 / .88) !important;
}
html[data-rattib-material="glass"]:not([data-theme="light"]) body.workspace-framed .panel.active :is(.suite-empty, .empty-hint) :is(h2, h3, p) {
  color: #f7f5ee !important;
}
html[data-rattib-material="glass"]:not([data-theme="light"]) body.workspace-framed :is(#panel-timesheet .time-note, #panel-scheduling > p) {
  color: #f7f5ee !important;
}
/* Student checkpoint/status and block actions keep readable native spacing. */
#panel-student #student-saved-work li{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#panel-student [data-student-block]>button{margin-inline-end:8px;margin-block-end:8px}
#panel-student [data-student-note] p{overflow-wrap:anywhere;white-space:pre-wrap}