/* ============================================================================
   pages.css — the sidebar destinations: Chats and tasks, Projects, Artifacts,
   Scheduled, Design Labs, the Code workspace and the Customize settings modal.
   Metrics measured off the live pages (spec §19):
     content column 832px inside an 896px container with 32px side padding
     page title 24/32 500 in the serif face, header controls h32 r8 px12
     table rows h49, td 8px 12px, 1px hsl(border/.05) separators
     project cards 404px wide, gap 24, radius 12, padding 16
   ========================================================================= */

/* ============================ page shell ================================= */
.page { flex: 1; width: 100%; padding-bottom: 64px }
.page-col { width: 100%; max-width: 896px; margin: 0 auto; padding: 0 32px }

.page-head { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-bottom: 4px }
.page-title {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--font-ui-serif); font-size: 24px; line-height: 32px; font-weight: 500;
  color: hsl(var(--text-100));
}
.page-actions { display: flex; align-items: center; gap: 8px; flex: none }
.page-sub { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: hsl(var(--text-500)) }
.page-body { margin-top: 20px }

/* control-sized buttons used in every page header (h32 r8 px12) */
.btn.ctl { height: 32px; border-radius: 8px; padding: 0 12px; font-size: 14px; line-height: 20px;
           font-weight: 500; color: hsl(var(--text-200)) }
.btn.ctl:hover { color: hsl(var(--text-100)) }
.btn.ctl.icon-only { width: 32px; padding: 0 }
.btn.ctl .caret { opacity: .7; margin-right: -4px; display: inline-flex }
.btn.solid { color: hsl(var(--bg-100)) }
.btn.solid > .fill { background: hsl(var(--text-100)) }
.btn.solid:hover > .fill { background: hsl(var(--text-200)) }
.btn.outline > .fill { box-shadow: inset 0 0 0 1px var(--cds-hairline-strong) }
.btn.outline:hover > .fill { background: var(--cds-fill-ghost-hover) }

/* inline search that replaces the header controls */
.page-search {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border-radius: 8px; background: var(--cds-fill-secondary);
  box-shadow: inset 0 0 0 .5px var(--cds-hairline); flex: 1; max-width: 360px;
}
.page-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none;
                     font-size: 14px; color: hsl(var(--text-100)) }
.page-search input::placeholder { color: hsl(var(--text-500)) }
.page-search svg.icon { color: hsl(var(--text-400)) }

/* ============================ tables ===================================== */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
              font-size: 14px }
.data-table td, .data-table th { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border-300) / .05) }
.data-table tr:last-child td { border-bottom: 0 }
.data-table th { text-align: left; font-weight: 500; font-size: 12px; color: hsl(var(--text-500));
                 padding-bottom: 6px }
.data-row { cursor: var(--cds-cursor-interactive) }
.data-row td { height: 49px; color: hsl(var(--text-200)); transition: background-color 100ms linear }
.data-row:hover td { background: var(--cds-fill-ghost-hover); color: hsl(var(--text-100)) }
.data-row:hover td:first-child { border-radius: 8px 0 0 8px }
.data-row:hover td:last-child { border-radius: 0 8px 8px 0 }
.data-row .c-main { display: flex; align-items: center; gap: 10px; min-width: 0 }
.data-row .c-main svg.icon { color: hsl(var(--text-400)) }
.data-row .c-main .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.data-row .c-when { width: 132px; text-align: right; color: hsl(var(--text-500));
                    font-size: 13px; white-space: nowrap }
.data-row .c-pick { width: 40px }
.data-row .c-end { width: 44px; text-align: right }
.data-row .row-more { opacity: 0; transition: opacity 120ms; height: 28px; width: 28px; border-radius: 6px }
.data-row:hover .row-more, .data-row:focus-within .row-more { opacity: 1 }
.data-row .badge {
  flex: none; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px;
  display: inline-flex; align-items: center; color: hsl(var(--text-400));
  border: .5px solid var(--cds-hairline-strong);
}

/* checkbox used by the table's Select mode */
.check {
  width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--cds-hairline-strong); background: transparent;
  border: 0; cursor: var(--cds-cursor-interactive); color: transparent;
}
.check[aria-checked="true"] { background: hsl(var(--accent-brand)); box-shadow: none; color: #fff }
.check svg.icon { width: 12px; height: 12px }

.select-bar { display: flex; align-items: center; gap: 8px; height: 32px }
.select-bar .count { flex: 1; font-size: 14px; color: hsl(var(--text-300)) }

/* ============================ cards ====================================== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px;
             list-style: none; margin: 0; padding: 0 }
.card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px;
  background: hsl(var(--bg-200)); cursor: var(--cds-cursor-interactive);
  transition: background-color 120ms linear, box-shadow 120ms linear;
  box-shadow: inset 0 0 0 .5px var(--cds-hairline);
}
.card:hover { background: hsl(var(--bg-300)); box-shadow: inset 0 0 0 .5px var(--cds-hairline-strong) }
.card .c-name { font-size: 14px; line-height: 20px; font-weight: 500; color: hsl(var(--text-100)) }
.card .c-desc { font-size: 13px; line-height: 19px; color: hsl(var(--text-400));
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.card .c-meta { font-size: 13px; line-height: 17px; color: hsl(var(--text-500));
                display: flex; align-items: center; gap: 8px }
.card .c-meta .dot { opacity: .6 }
.card .c-meta svg.icon { width: 14px; height: 14px }
.card > .btn { align-self: flex-start; margin-top: 4px }

/* artifact cards lead with a preview plate */
.art-card { padding: 0; overflow: hidden; gap: 0 }
.art-preview {
  height: 132px; display: grid; place-items: center; background: hsl(var(--bg-100));
  border-bottom: .5px solid var(--cds-hairline); color: hsl(var(--text-500));
  font-family: var(--font-mono); font-size: 20px;
}
.art-card .art-text { display: flex; flex-direction: column; gap: 6px; padding: 16px }

/* tabs (Artifacts: All / Yours / Shared with you) */
.tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 8px }
.tab {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 0; background: none;
  color: hsl(var(--text-500)); font-size: 14px; cursor: var(--cds-cursor-interactive);
  transition: background-color 100ms linear, color 100ms linear;
}
.tab:hover { background: var(--cds-fill-ghost-hover); color: hsl(var(--text-200)) }
.tab[aria-selected="true"] { background: var(--cds-fill-secondary); color: hsl(var(--text-100)) }

/* ============================ empty states =============================== */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 72px 24px; text-align: center;
}
.empty .art { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
              background: var(--cds-alpha-2); color: hsl(var(--text-400)) }
.empty .art svg.icon { width: 28px; height: 28px }
.empty h2 { margin: 0; font-family: var(--font-ui-serif); font-size: 20px; line-height: 28px;
            font-weight: 500; color: hsl(var(--text-100)) }
.empty p { margin: 0; font-size: 14px; color: hsl(var(--text-500)); max-width: 44ch }
.empty .chips { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center }
.chip-btn {
  height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px;
  border: .5px solid var(--cds-hairline-strong); background: none; color: hsl(var(--text-200));
  cursor: var(--cds-cursor-interactive); display: inline-flex; align-items: center; gap: 6px;
  transition: background-color 120ms linear;
}
.chip-btn:hover { background: var(--cds-fill-ghost-hover) }

/* ============================ Code workspace ============================= */
.code-onboard { display: flex; flex-direction: column; align-items: center; padding-top: 40px }
.code-onboard h1 { margin: 0 0 6px; font-family: var(--font-ui-serif); font-size: 28px;
                   line-height: 36px; font-weight: 500 }
.code-onboard .lede { margin: 0 0 24px; font-size: 14px; color: hsl(var(--text-500)) }
.install-card {
  width: 100%; display: flex; gap: 20px; padding: 20px; border-radius: 16px;
  background: hsl(var(--bg-200)); box-shadow: inset 0 0 0 .5px var(--cds-hairline);
}
.install-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px }
.install-card h2 { margin: 0; font-size: 16px; font-weight: 600 }
.install-card p { margin: 0; font-size: 14px; color: hsl(var(--text-400)) }
.install-shot {
  width: 232px; flex: none; border-radius: 10px; overflow: hidden; padding: 10px;
  background: hsl(var(--bg-100)); box-shadow: inset 0 0 0 .5px var(--cds-hairline);
  font-family: var(--font-mono); font-size: 10px; line-height: 15px; color: hsl(var(--text-400));
}
.install-shot .add { color: hsl(var(--success-100)) }
.install-shot .del { color: hsl(var(--danger-100)) }
.surface-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; justify-content: center }
.code-foot { margin-top: 28px; text-align: center; font-size: 14px; color: hsl(var(--text-500)) }
.code-foot .link { color: hsl(var(--text-200)); text-decoration: underline;
                   text-underline-offset: 3px; cursor: var(--cds-cursor-interactive) }
.sidebar-note { padding: 12px 8px; font-size: 13px; color: hsl(var(--text-500)); text-align: center }
.slack-banner {
  margin: 0 8px 8px; padding: 10px 12px; border-radius: 10px; background: var(--cds-alpha-2);
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: hsl(var(--text-300));
}
.slack-banner .grow { flex: 1; min-width: 0 }
.row .ext { opacity: 0; transition: opacity 120ms; color: hsl(var(--text-500)); display: inline-flex }
.row:hover .ext { opacity: 1 }

/* ============================ settings modal ============================= */
/* app.css anchors dialogs near the top; the settings modal is centred instead */
.dialog-backdrop.center { align-items: center; padding-top: 0 }

.settings-dialog {
  display: flex; width: min(974px, calc(100vw - 48px)); height: min(728px, calc(100vh - 54px));
  border-radius: 16px; overflow: hidden; background: var(--cds-surface-2);
  box-shadow: var(--cds-shadow-panel);
  animation: cds-reveal-in 160ms var(--cds-ease-out) both;
}
.settings-rail {
  width: 248px; flex: none; display: flex; flex-direction: column;
  background: hsl(var(--bg-300)); border-right: .5px solid var(--cds-hairline); padding: 12px 8px;
}
.settings-rail .rail-search {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; margin-bottom: 8px;
  border-radius: 8px; background: var(--cds-alpha-2);
}
.settings-rail .rail-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none;
                                    font-size: 13px; color: hsl(var(--text-100)) }
.settings-rail .rail-search svg.icon { color: hsl(var(--text-400)); width: 14px; height: 14px }
.rail-scroll { flex: 1; min-height: 0; overflow-y: auto }
.rail-scroll::-webkit-scrollbar { width: 8px }
.rail-scroll::-webkit-scrollbar-thumb { background: var(--cds-alpha-3); border-radius: 8px }
.rail-group { padding: 12px 8px 4px; font-size: 12px; color: hsl(var(--text-500)) }
.rail-row { height: 32px }
.rail-row[aria-current="page"] { background: var(--cds-fill-secondary); color: hsl(var(--text-100)) }

.settings-main { flex: 1; min-width: 0; display: flex; flex-direction: column }
.settings-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 14px 14px 24px; flex: none;
  border-bottom: .5px solid var(--cds-hairline);
}
.settings-head h2 { margin: 0; flex: 1; min-width: 0; font-size: 16px; font-weight: 600 }
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 32px }
.settings-scroll::-webkit-scrollbar { width: 10px }
.settings-scroll::-webkit-scrollbar-thumb { background: var(--cds-alpha-3); border-radius: 10px }

.s-sect { padding: 16px 0; border-bottom: .5px solid var(--cds-hairline) }
.s-sect:last-child { border-bottom: 0 }
.s-sect > h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: hsl(var(--text-300)) }
.s-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; min-height: 44px }
.s-row .s-label { flex: 1; min-width: 0 }
.s-row .s-label .t { display: block; font-size: 14px; color: hsl(var(--text-100)) }
.s-row .s-label .d { display: block; font-size: 13px; line-height: 18px; color: hsl(var(--text-500));
                     margin-top: 2px }
.s-row .s-ctl { flex: none; display: flex; align-items: center; gap: 8px }
.s-stack { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 }
.s-stack .s-label .t { font-size: 14px }
.s-note { font-size: 12px; color: hsl(var(--text-500)); padding: 4px 0 }
.s-note .link { text-decoration: underline; text-underline-offset: 2px }

.s-input, .s-area {
  width: 100%; background: var(--cds-alpha-2); border: 0; outline: none; color: hsl(var(--text-100));
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
  box-shadow: inset 0 0 0 .5px var(--cds-hairline);
  transition: box-shadow 120ms linear;
}
.s-input:focus, .s-area:focus { box-shadow: inset 0 0 0 1px hsl(var(--accent-100) / .7) }
.s-area { min-height: 96px; resize: vertical; line-height: 20px; font-family: var(--font-ui) }
.s-row .s-input { width: 260px }

/* toggle switch */
.switch {
  width: 36px; height: 20px; border-radius: 999px; border: 0; padding: 2px; flex: none;
  background: var(--cds-alpha-3); cursor: var(--cds-cursor-interactive); display: flex;
  transition: background-color 150ms linear;
}
.switch[aria-checked="true"] { background: hsl(var(--accent-brand)) }
.switch .knob { width: 16px; height: 16px; border-radius: 999px; background: #fff;
                transition: transform 150ms var(--cds-ease-snap) }
.switch[aria-checked="true"] .knob { transform: translateX(16px) }

/* icon segmented control (Appearance) */
.icon-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px;
            background: var(--cds-segmented-control-track) }
.icon-seg button {
  height: 28px; width: 34px; border-radius: 8px; border: 0; background: none; display: grid;
  place-items: center; color: hsl(var(--text-500)); cursor: var(--cds-cursor-interactive);
  transition: background-color 120ms linear, color 120ms linear;
}
.icon-seg button[aria-checked="true"] { background: var(--cds-segmented-control-thumb);
                                        color: hsl(var(--text-100)) }

.settings-empty { padding: 40px 0; text-align: center; color: hsl(var(--text-500)); font-size: 14px }
.approx {
  margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 17px;
  color: hsl(var(--text-500)); background: var(--cds-alpha-2);
}

/* form dialog (New project / New task) */
.form-dialog { width: min(480px, calc(100vw - 32px)); padding: 20px; display: flex;
               flex-direction: column; gap: 12px }
.form-dialog h2 { margin: 0; font-size: 16px; font-weight: 600 }
.form-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px }
.form-dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 13px;
                     color: hsl(var(--text-400)) }

@media (max-width: 720px) {
  .page-col { padding: 0 16px }
  .card-grid { grid-template-columns: 1fr }
  .settings-dialog { flex-direction: column; height: calc(100vh - 24px) }
  .settings-rail { width: 100%; height: 148px }
}