/* Design foundation (September 28): one dialog, one command palette, one quiet
   control vocabulary. Loaded last. Tokens come from styles.css, workspace.css
   and refinement.css (--quiet, --quiet-hover). Presentation only. */

/* ---------- Quiet controls ---------- */
.icon-btn { flex:none; width:30px; height:30px; display:inline-grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-3); cursor:pointer; }
.icon-btn:hover:not(:disabled) { background:var(--hover-2); color:var(--ink); }
.icon-btn:disabled { opacity:.3; cursor:default; }
.icon-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.icon-btn svg { width:15px; height:15px; }
/* Row overflow menus are icons, aligned to the row's right edge. */
.product-library-row .grow { flex:1; }
:root .library-options > summary.btn { width:34px; padding:0; justify-content:center; background:transparent; color:var(--ink-2); }
:root .library-options > summary.btn:hover,:root .library-options[open] > summary.btn { background:var(--hover-2); color:var(--ink); }
.topbar .btn.small svg { width:14px; height:14px; }

/* ---------- Dialogs ---------- */
.modal-scrim { background:rgba(0,0,0,.28); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
:root:not([data-theme="light"]) .modal-scrim { background:rgba(0,0,0,.6); }
.modal { border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 24px 64px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06); }
:root:not([data-theme="light"]) .modal { border-color:var(--line-2); box-shadow:0 24px 64px rgba(0,0,0,.55); }
:root .modal-head { padding:16px 16px 14px 20px; gap:12px; min-height:60px; }
.modal-head :is(h2,h3) { margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
:root .modal.dialog .dialog-body { padding:20px; }
.modal.dialog .dialog-body > :first-child { margin-top:0; }
.modal.dialog .dialog-body > :last-child { margin-bottom:0; }
:root .modal.dialog .dialog-actions { padding:0 20px 20px; gap:8px; }
/* The close control keeps its "Close" text for assistive technology; the × is drawn. */
.modal-x { flex:none; width:32px; height:32px; display:inline-grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-3); font-size:0; line-height:0; cursor:pointer; }
.modal-x::before { content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%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='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
.modal-x:hover { background:var(--hover-2); color:var(--ink); }
.modal-x:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

.modal.dialog .dialog-body > .field + .field { margin-top:14px; }
/* Detail pages: the details toggle lines up with the section text above it. */
.panel > .quiet-details { margin:0; padding:4px 20px 8px; }

/* Option cards: one icon, one label, one sentence. */
.choice-list { display:flex; flex-direction:column; gap:10px; }
.choice-card { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border:1px solid var(--line-2); border-radius:12px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.choice-card:hover { background:var(--hover); border-color:var(--line-3); }
.choice-card:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.choice-icon { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--quiet); color:var(--ink); }
.choice-icon svg { width:18px; height:18px; }
.choice-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.choice-copy strong { font-size:15px; font-weight:600; }
.choice-copy small { font-size:13px; line-height:1.45; color:var(--ink-2); }

/* Pins editor */
.pin-manage-list { display:flex; flex-direction:column; }
.pin-manage-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.pin-manage-row:last-child { border-bottom:0; }
.pin-manage-row > a { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:550; text-decoration:none; }
.pin-manage-row > a:hover { text-decoration:underline; text-underline-offset:3px; }
.pin-manage-row .em { flex:none; width:26px; height:26px; display:inline-grid; place-items:center; border-radius:8px; background:var(--gray-soft,var(--hover)); color:var(--ink-2); }
.pin-manage-row .em svg { width:14px; height:14px; }
.pin-manage-actions { display:flex; gap:2px; }
.pin-manage-actions [data-pin-op="up"] svg { transform:rotate(180deg); }
.pin-manage-title { margin:20px 0 4px; font-size:12px; font-weight:500; color:var(--ink-3); }
.pin-manage-current { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.pin-manage-current .btn svg { width:14px; height:14px; }
:is(.sb-link,.pin-manage-row) .em.em-avatar { background:transparent; overflow:visible; }
:is(.sb-link,.pin-manage-row) .em.em-avatar svg { width:100%; height:100%; }

/* ---------- Command palette ---------- */
.modal-scrim:has(.gs-modal) { align-items:flex-start; padding-top:14vh; }
:root .gs-modal { width:min(620px,92vw); max-height:min(560px,76vh); display:flex; flex-direction:column; overflow:hidden; }
:root .gs-head { padding:14px 18px; gap:12px; min-height:0; }
:root .gs-head > svg { width:18px; height:18px; color:var(--ink-3); }
:root .gs-head input { flex:1; min-width:0; padding:4px 0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; color:var(--ink); font-size:16px; }
:root .gs-head input:focus { border:0; box-shadow:none; outline:none; }
:root .gs-head input::placeholder { color:var(--ink-3); }
:root .gs-results { flex:1; max-height:none; overflow:auto; padding:6px 8px 8px; }
:root .gs-group-title { padding:10px 10px 4px; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-3); }
:root .gs-row { width:100%; display:flex; align-items:center; gap:12px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink); text-align:left; }
:root .gs-row:is(:hover,:focus-visible) { background:var(--hover-2); outline:none; }
:root .gs-row .grow { flex:1; min-width:0; }
:root .gs-row strong { font-size:14px; font-weight:550; }
:root .gs-row .sub { font-size:12px; color:var(--ink-3); }
:root .gs-row .type-ico { flex:none; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:var(--quiet); color:var(--ink-2); }
:root .gs-row .type-ico svg { width:14px; height:14px; }
.gs-when { flex:none; font-size:12px; color:var(--ink-3); }
.gs-foot { display:flex; gap:18px; padding:10px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); }
.gs-foot kbd { display:inline-grid; place-items:center; min-width:18px; margin-right:3px; padding:1px 5px; border:1px solid var(--line-2); border-radius:5px; font:600 11px/1.3 inherit; color:var(--ink-2); }
@media (pointer:coarse) { .gs-foot { display:none; } .modal-scrim:has(.gs-modal) { padding-top:8vh; } }

/* ---------- Model picker: one quiet line ---------- */
:root .chat-empty-inner .model-pick-btn { background:transparent; border:0; border-radius:8px; }
:root .chat-empty-inner .model-pick-btn:hover { background:var(--hover); }
@media (min-width:901px) { :root .chat-empty-inner .model-pick-btn { max-width:380px; } }
:root .model-pick-labels { flex-direction:row; align-items:baseline; gap:6px; min-width:0; }
/* When space runs out the funding note gives way first; the model name stays readable. */
:root .model-pick-labels .model-pick-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root .model-pick-funding { flex:0 100 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; line-height:inherit; white-space:nowrap; color:var(--ink-3); }
:root .model-pick-funding::before { content:"·"; margin-right:6px; }
:root .model-pick-head { padding:10px 12px 4px; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-3); }

/* ---------- Sidebar ---------- */
[data-sidebar-section] > summary { list-style:none; }
[data-sidebar-section] > summary::-webkit-details-marker { display:none; }
.sb-disclosure { display:inline-flex; align-items:center; gap:6px; }
.sb-disclosure > svg { width:13px; height:13px; }
.sb-caret { display:inline-grid; place-items:center; color:var(--ink-3); transition:transform .15s ease; }
.sb-caret svg { width:12px; height:12px; }
details:not([open]) > summary .sb-caret { transform:rotate(-90deg); }
@media (prefers-reduced-motion:reduce) { .sb-caret { transition:none; } }
/* Matches the ⌘K hint beside Search. */
.sb-group-edit { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 6px; border:1px solid var(--line-2); border-radius:5px; background:transparent; color:var(--ink-3); font-size:10px; font-weight:600; cursor:pointer; }
.sb-group-edit svg { width:10px; height:10px; }
.sb-group-edit:hover { border-color:var(--line-3); color:var(--ink); }
.sb-group-edit:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
@media (pointer:coarse) { .sb-group-edit { height:32px; padding:0 10px; font-size:12px; } }
.sb-bottom { display:flex; flex-direction:column; gap:6px; padding:8px 4px 0; }
.sb-bottom .item { margin:0; }
/* Avori operations mirrors New chat: the platform team's own space. */
:root .sb-btn.sb-operations { justify-content:flex-start; height:40px; padding:8px 10px; gap:10px; border:1px solid var(--ink); border-radius:8px; background:var(--ink); color:var(--bg); font-size:14px; font-weight:550; text-decoration:none; }
:root .sb-btn.sb-operations svg { width:16px; height:16px; color:inherit; opacity:1; }
:root .sb-btn.sb-operations:is(:hover,.active) { border-color:var(--ink-2); background:var(--ink-2); color:var(--bg); }

@media (pointer:coarse) {
  .modal-x,.icon-btn { width:44px; height:44px; }
}

/* ---------- Page headings ---------- */
.topbar-heading { display:flex; flex-direction:column; gap:2px; min-width:0; }
.topbar-heading h1 { margin:0; line-height:1.2; }
.topbar-heading p { margin:0; font-size:13px; color:var(--ink-3); }
/* Search sits with the page actions on the right, never against the title. */
.topbar > .search { margin-left:auto; }

/* ---------- Collection cards (Skills, Workflows, Marketplace) ---------- */
.collection-chip { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; background:var(--quiet); color:var(--ink-2); font-size:12px; font-weight:500; white-space:nowrap; }
.market-card,.capability-card { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); transition:border-color .12s ease, box-shadow .12s ease; }
:root:not([data-theme="light"]) :is(.market-card,.capability-card) { border-color:var(--line-2); }
.market-card { cursor:pointer; overflow:hidden; }
.market-card:is(:hover,:focus-visible),.capability-card:hover { border-color:var(--line-3); box-shadow:0 6px 20px rgba(0,0,0,.06); outline:none; }
.market-card:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.market-card-preview { display:grid; place-items:center; aspect-ratio:16/9; background:var(--quiet); border-bottom:1px solid var(--line); }
.market-card-preview .workflow-icon { width:76px; height:76px; }
.market-card-body { display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; min-width:0; }
.market-card-name { font-size:15px; font-weight:600; line-height:1.35; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.market-card-name:hover { text-decoration:underline; text-underline-offset:3px; }
.market-card-by { display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:13px; color:var(--ink-3); }
.market-avatar { flex:none; width:18px; height:18px; display:inline-grid; place-items:center; border-radius:50%; background:var(--quiet); color:var(--ink-2); font-size:9px; font-weight:700; overflow:hidden; }
.market-avatar.agent { background:transparent; overflow:visible; }
.market-avatar.agent > * { width:18px; height:18px; }
.market-card-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:2px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2); }
.market-card-foot { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:10px; min-height:32px; }
.market-card-plugins { display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.market-card-plugins .integration-logo { width:20px; height:20px; }

/* Skills and Workflows */
.capability-discover { margin:4px 0 28px; }
.capability-discover-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.capability-discover-toggle { display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; }
.capability-discover-toggle h2 { margin:0; font-size:16px; font-weight:600; }
.capability-discover-toggle svg { width:14px; height:14px; color:var(--ink-3); transition:transform .15s ease; }
.capability-discover-toggle[aria-expanded="false"] svg { transform:rotate(-90deg); }
.capability-discover-head a { font-size:13px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.market-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.market-row-empty { grid-column:1/-1; display:flex; align-items:center; gap:10px; min-height:64px; padding:0 18px; border:1px dashed var(--line-3); border-radius:14px; color:var(--ink-2); font-size:14px; text-decoration:none; }
.market-row-empty strong { color:var(--ink); font-weight:600; }
.market-row-empty:hover span { text-decoration:underline; text-underline-offset:3px; }
:is([data-page="skills"],[data-page="workflows"]) .content .inner { max-width:1320px; }
.collection-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.collection-search { display:flex; align-items:center; gap:8px; width:min(100%,340px); height:36px; padding:0 12px; border-radius:9px; background:var(--quiet); color:var(--ink-3); }
.collection-search svg { width:15px; height:15px; flex:none; }
.collection-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; box-shadow:none; color:var(--ink); font-size:14px; padding:0; }
.collection-search:focus-within { box-shadow:0 0 0 2px var(--line-3); }
.collection-tools { display:flex; align-items:center; gap:8px; }
.collection-filter { position:relative; }
.collection-filter > summary { list-style:none; gap:6px; }
.collection-filter > summary::-webkit-details-marker { display:none; }
.collection-filter > summary svg { width:14px; height:14px; }
.collection-filter-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:220px; padding:6px; border:1px solid var(--line-2); border-radius:12px; background:var(--menu,var(--panel)); box-shadow:0 12px 32px rgba(0,0,0,.14); }
.collection-filter-group { display:flex; flex-direction:column; padding:4px 0; }
.collection-filter-group + .collection-filter-group { border-top:1px solid var(--line); }
.collection-filter-group > span { padding:6px 10px 4px; font-size:12px; font-weight:500; color:var(--ink-3); }
.collection-filter-group button { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:14px; text-align:left; cursor:pointer; }
.collection-filter-group button:hover { background:var(--hover-2); }
.collection-filter-group button :is(svg,i) { flex:none; width:14px; height:14px; }
.view-toggle { display:inline-flex; padding:3px; border-radius:9px; background:var(--quiet); }
.view-toggle button { width:30px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:var(--ink-3); cursor:pointer; }
.view-toggle button svg { width:15px; height:15px; }
.view-toggle button[aria-pressed="true"] { background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.capability-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.capability-card { padding:16px; gap:6px; }
.capability-card[data-capability-href] { cursor:pointer; }
.capability-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; }
.capability-icon .workflow-icon { width:44px; height:44px; }
.capability-detail { margin-left:auto; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.product-library-row .capability-icon .workflow-icon { width:36px; height:36px; }

/* Marketplace */
[data-page="discover"] .content .inner { max-width:1040px; }
.market-hero { position:relative; display:flex; align-items:center; min-height:240px; margin:4px 0 24px; padding:40px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#f6f6f6,#e9e9e9); }
:root:not([data-theme="light"]) .market-hero { background:linear-gradient(135deg,#141414,#0b0b0b); border:1px solid var(--line-2); }
.market-hero h2 { position:relative; z-index:1; margin:0; max-width:420px; font-size:clamp(28px,3.4vw,40px); font-weight:600; line-height:1.1; letter-spacing:-.03em; }
.market-hero-art { position:absolute; inset:0 0 0 45%; }
.market-hero-art img { position:absolute; width:calc(64px + var(--i) * 3px); height:auto; }
.market-hero-art img:nth-child(1) { left:4%; top:14%; } .market-hero-art img:nth-child(2) { left:22%; top:52%; }
.market-hero-art img:nth-child(3) { left:30%; top:10%; } .market-hero-art img:nth-child(4) { left:46%; top:44%; }
.market-hero-art img:nth-child(5) { left:56%; top:8%; } .market-hero-art img:nth-child(6) { left:70%; top:50%; }
.market-hero-art img:nth-child(7) { left:78%; top:14%; } .market-hero-art img:nth-child(8) { left:8%; top:66%; }
.market-hero-art img:nth-child(9) { left:88%; top:62%; } .market-hero-art img:nth-child(10) { left:40%; top:74%; }
.market-hero-art img:nth-child(11) { left:62%; top:76%; }
.market-section { margin:28px 0 8px; }
.market-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.market-section-head h2 { margin:0; font-size:18px; font-weight:600; }
.market-see-all { padding:0; border:0; background:none; color:var(--ink-2); font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.market-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.market-own { display:flex; flex-direction:column; gap:8px; }
.market-own > .btn { align-self:flex-start; }
.market-apps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.market-app { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:112px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--quiet); color:var(--ink); text-align:left; cursor:pointer; }
.market-app:hover { border-color:var(--line-3); }
.market-app .integration-logo { width:28px; height:28px; margin-bottom:auto; }
.market-app strong { font-size:15px; font-weight:600; }
.market-app span { font-size:12px; color:var(--ink-3); }
.market-filter-note { display:flex; align-items:center; gap:10px; margin:8px 0 0; font-size:14px; color:var(--ink-2); }
.market-empty { margin:28px 0 8px; padding:28px; border:1px dashed var(--line-3); border-radius:16px; text-align:center; }
.market-empty h2 { margin:0 0 6px; font-size:18px; font-weight:600; }
.market-empty p { max-width:520px; margin:0 auto; font-size:14px; line-height:1.55; color:var(--ink-2); }
@media (max-width:1100px) { .market-row,.market-grid,.market-apps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .market-row,.market-grid,.market-apps { grid-template-columns:1fr; }
  .collection-toolbar { flex-wrap:wrap; } .collection-search { width:100%; }
  .market-hero { min-height:200px; padding:28px; align-items:flex-start; } .market-hero-art { inset:45% 0 0 0; opacity:.9; }
}
@media (prefers-reduced-motion:reduce) { .capability-discover-toggle svg { transition:none; } }

/* ---------- Account menu and Settings ---------- */
.account-menu-theme { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:6px 12px; font-size:13px; color:var(--ink-2); }
/* The same sun/moon switch, scaled down: its geometry is in em of --toggle-size. */
.account-menu .theme-switch { --toggle-size:8px; flex:none; }
:is([data-page="settings"],[data-page="account"]) .content .inner { max-width:880px; }
:root .settings-group > h2 { margin:0 0 12px; font-size:13px; font-weight:500; color:var(--ink-3); }
:root .settings-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
:root .settings-card { display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); text-decoration:none; transition:border-color .12s ease, box-shadow .12s ease; }
:root .settings-card:hover { border-color:var(--line-3); background:var(--panel); box-shadow:0 6px 20px rgba(0,0,0,.06); }
:root .settings-icon { width:36px; height:36px; margin:0 0 10px; border:0; border-radius:10px; background:var(--quiet); color:var(--ink); }
:root .settings-icon svg { width:18px; height:18px; }
:root .settings-card h3 { margin:0; font-size:15px; font-weight:600; }
:root .settings-card p { margin:0; font-size:13px; line-height:1.5; color:var(--ink-3); }
.settings-back { display:inline-flex; align-items:center; gap:4px; margin-bottom:14px; font-size:13px; color:var(--ink-3); text-decoration:none; }
.settings-back svg { width:14px; height:14px; transform:rotate(90deg); }
.settings-back:hover { color:var(--ink); }
.settings-page-head h2 { margin:0; font-size:22px; font-weight:600; letter-spacing:-.01em; }
.settings-page-head p { margin:4px 0 20px; font-size:14px; color:var(--ink-3); }
.settings-panel { max-width:640px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
:root:not([data-theme="light"]) .settings-panel { border-color:var(--line-2); }
.settings-panel h3 { margin:24px 0 10px; font-size:15px; font-weight:600; }
.settings-panel h3:first-child { margin-top:0; }
.settings-panel .field { margin-top:14px; }
.settings-panel .form-actions { margin:14px 0 0; }

/* ---------- Routines ---------- */
.routine-draft-row[hidden] { display:none; }
[data-routine-drafts-more] { margin-top:10px; }

/* ---------- Home ---------- */
a.home-suggestion { text-decoration:none; }
/* No dismiss control on the connect row; keep its arrow in the same column. */
.home-suggestion-row > a.home-suggestion:only-child { margin-right:40px; }
.home-suggestion-app { display:inline-flex; align-items:center; gap:6px; }
.home-suggestion-app .integration-logo { width:16px; height:16px; flex:none; }

/* ---------- Plugins ---------- */
.integration-marketplace .connections-intro { gap:10px; }
.tc-title { display:flex; align-items:center; gap:10px; }
.tc-actions-row { display:flex; align-items:center; gap:8px; }
.tc-help { flex:none; width:24px; height:24px; display:inline-grid; place-items:center; padding:0; border:1px solid var(--line-2); border-radius:50%; background:transparent; color:var(--ink-2); font-size:13px; font-weight:600; cursor:pointer; }
.tc-help:hover { border-color:var(--line-3); color:var(--ink); }
.tc-help:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.connections-intro .btn svg { width:14px; height:14px; }

/* ---------- Library ---------- */
:is([data-page="artifacts"],[data-page="apps"]) .content .inner { max-width:1320px; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.library-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); cursor:pointer; overflow:hidden; transition:border-color .12s ease, box-shadow .12s ease; }
:root:not([data-theme="light"]) .library-card { border-color:var(--line-2); }
.library-card:hover { border-color:var(--line-3); box-shadow:0 6px 20px rgba(0,0,0,.06); }
.library-card-preview { position:relative; display:grid; place-items:center; aspect-ratio:16/10; background:var(--quiet); border-bottom:1px solid var(--line); }
.library-card-icon { position:absolute; top:10px; left:10px; color:var(--ink-3); }
.library-card-icon svg { width:16px; height:16px; }
.library-card-ext { font-size:22px; font-weight:650; letter-spacing:.04em; color:var(--ink-3); }
.library-card-body { display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; min-width:0; }
.library-card-title { display:flex; align-items:center; gap:6px; min-width:0; }
.library-card-title .market-card-name { flex:1; min-width:0; font-size:14px; }
.library-card-title .library-options > summary.btn { width:28px; height:28px; min-height:28px; }
.library-card .market-card-by { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-card .market-card-foot { padding-top:4px; min-height:0; }
@media (max-width:600px) {
  .tc-actions-row { width:100%; }
  .tc-actions-row .btn { flex:1; justify-content:center; padding:0 10px; font-size:13px; }
  .market-row-empty { flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:12px 16px; }
}