/* focus-workspace-preview.css, the rules scoped to the projects page: loads with the first visit of that page (data-rattib-style="projects" in index.html) and sits right after the shell part in the cascade. Source order is the parent sheet's. */
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) :is(button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--preview-accent); outline-offset: 3px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header::after { display: none; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header > div:first-child { flex: 1 1 230px; min-inline-size: 0; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header h1 { font: 400 54px/1.12 var(--preview-display); color: var(--preview-ink); letter-spacing: -.025em; margin: 0 0 8px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects #projects-new { background: var(--preview-action); color: var(--preview-action-ink); border-color: transparent; white-space: nowrap; padding: 12px 20px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects #projects-templates { background: var(--preview-surface); font-size: 12px; white-space: nowrap; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-save-status:empty { display: none; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#panel-projects,#project-template-dialog) .suite-project-item[aria-pressed="true"] { border-color: var(--preview-accent); background: var(--preview-surface); box-shadow: inset 0 0 0 1px var(--preview-accent); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#panel-projects,#project-template-dialog) .suite-project-item strong { color: var(--preview-ink); font: 500 16px/1.5 var(--preview-ui); margin-block-end: 12px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#panel-projects,#project-template-dialog) .suite-project-item :is(span,small) { color: var(--preview-muted); font-size: 11px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-head h2 { font: 400 32px/1.25 var(--preview-display); color: var(--preview-ink); letter-spacing: -.01em; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-kicker { font: 400 11px/1.5 var(--preview-ui); color: var(--preview-muted); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-head .suite-task-meta { font: 400 12px/1.6 var(--preview-ui); color: var(--preview-muted); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects :is(.suite-status-chip,.suite-deadline,.suite-priority,.suite-meta-item) { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--preview-muted); font: 400 11px/1.6 var(--preview-ui); box-shadow: none; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects :is(.suite-status-chip[data-status="complete"],.suite-deadline.is-overdue,.suite-priority[data-priority="urgent"],.suite-priority[data-priority="high"]) { background: transparent; color: var(--preview-ink); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-description { font: 400 13px/1.7 var(--preview-ui); color: var(--preview-muted); margin-block: 14px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-block: 16px; border-radius: 12px; background: var(--preview-row); color: var(--preview-muted); font-size: 12px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-progress progress { flex: 1 1 120px; inline-size: 160px; max-inline-size: 220px; block-size: 7px; accent-color: var(--preview-accent); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-actions { gap: 8px; margin-block-end: 20px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-actions button { font-size: 12px; background: var(--preview-field); color: var(--preview-ink); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-section-title { font: 400 25px/1.3 var(--preview-display); color: var(--preview-ink); padding-block-start: 18px; margin: 0 0 10px; border-color: var(--preview-line); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 128px; gap: 8px 12px; align-items: start; padding: 16px 0; margin: 0; border: 0; border-block-end: 1px solid var(--preview-line); border-radius: 0; background: transparent; color: var(--preview-ink); box-shadow: none; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-row:last-child { border-block-end: 0; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-done { grid-column: 1; grid-row: 1; inline-size: 44px; block-size: 44px; padding: 8px; border: 1px solid var(--preview-line); border-radius: 13px; background: var(--preview-field); color: var(--preview-accent); font-size: 16px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-done[aria-pressed="true"] { border-color: var(--preview-accent); background: var(--preview-row); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-body { grid-column: 2; grid-row: 1 / 3; min-inline-size: 0; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-name { font: 500 14px/1.5 var(--preview-ui); min-block-size: 44px; padding: 0; border: 0; background: transparent; color: var(--preview-ink); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-facts { gap: 5px 10px; margin-block: 4px 8px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects :is(.suite-task-meta,.suite-task-parent,.suite-task-recurrence,.suite-subtask-progress) { color: var(--preview-muted); font: 400 11px/1.6 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-status + .localized-control { grid-column: 3; grid-row: 1; min-inline-size: 0; inline-size: 100%; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-status { grid-column: 3; grid-row: 1; inline-size: 100%; margin: 0; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects [data-delete-task] { grid-column: 3; grid-row: 2; font-size: 11px; border: 0; background: transparent; color: var(--preview-muted); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-time { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-time button { font-size: 11px; padding: 7px 9px; color: var(--preview-muted); background: transparent; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-empty { padding: 24px; border: 1px solid var(--preview-line); border-radius: 18px; background: var(--preview-surface); color: var(--preview-ink); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-detail > .suite-empty { border: 0; background: transparent; padding: 20px 0; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-empty h2 { font: 400 27px/1.3 var(--preview-display); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-empty p { color: var(--preview-muted); font: 400 13px/1.7 var(--preview-ui); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) .suite-field:has(input[type="checkbox"]) { min-block-size: 44px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#project-work-dialog,#project-template-dialog) .suite-primary:not(:disabled) { background: var(--preview-action); color: var(--preview-action-ink); border-color: transparent; }
@media (max-width:1000px) {
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-list { display: grid; grid-template-columns: none; scroll-behavior: auto; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 3px 3px 9px; scroll-padding-inline: 3px; scroll-snap-type: none; scrollbar-width: thin; align-items: stretch; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-item { inline-size: 100%; padding: 16px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-list { scrollbar-color: var(--preview-accent) var(--preview-row); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-list::-webkit-scrollbar { height: 7px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-list::-webkit-scrollbar-thumb { background: var(--preview-accent); border-radius: 10px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-list::-webkit-scrollbar-track { background: var(--preview-row); }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-item:focus-visible { outline-offset: -4px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-layout:has(.suite-project-item:nth-child(2))::before { content: "Scroll for more projects ↔"; inline-size: fit-content; justify-self: end; padding: 4px 10px; border-radius: 8px; background: var(--preview-dialog-surface); color: var(--preview-muted); font: 400 12px/1.7 var(--preview-ui); }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-layout:has(.suite-project-item:nth-child(2))::before { content: "مرّر لعرض مشاريع أخرى ↔"; }
}
@media (max-width:700px) {
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header { gap: 8px; margin-block-end: 12px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header > div:first-child { flex-basis: 100%; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header h1 { font-size: 42px; margin-block-end: 6px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-lead { font-size: 12px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects :is(#projects-new,#projects-templates) { inline-size: auto; flex: 0 0 auto; font-size: 12px; padding: 9px 13px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-toolbar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 14px; gap: 12px; margin-block-end: 14px; border-radius: 18px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-toolbar > label:first-child { grid-column: 1; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-toolbar > label:last-child { grid-column: 2; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects :is(input,.localized-control-input) { font-size: 16px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-save-status { margin-block-end: 10px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-project-detail { padding: 18px; border-radius: 20px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-head h2 { font-size: 27px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-row { grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px 10px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-body { grid-column: 2 / -1; grid-row: 1; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-status + .localized-control { grid-column: 2; grid-row: 2; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-status { grid-column: 2; grid-row: 2; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-task-status + .localized-control .localized-control-input { font-size: 16px; }
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects [data-delete-task] { grid-column: 3; grid-row: 2; padding-inline: 6px; }
}
html[data-theme="light"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects :is(.suite-kicker,.suite-lead) { color: var(--preview-ink); }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header h1 { font-size: 44px; letter-spacing: 0; line-height: 1.5; }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-detail-head h2 { font-size: 27px; letter-spacing: 0; line-height: 1.5; }
@media (max-width:700px) {
html[lang="ar"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed #panel-projects .suite-header h1 { font-size: 32px; }
}
@media (prefers-reduced-motion:reduce) {
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
@media (forced-colors:active) {
html[data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed :is(#panel-projects,#project-work-dialog,#project-template-dialog) { --preview-dialog-surface: Canvas; --preview-control-line: CanvasText; }
}
@media (max-width:360px) {
html[lang="ar"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed .top .brand strong { font-size: 16px; }
html[lang="ar"][data-rattib-material="glass"][data-route-surface="projects"]:not(#_) body.workspace-framed .top .workspace-create { padding-inline: 10px; font-size: 11px; }
}