diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e94ddef..36f3c38 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -22,6 +22,12 @@ Issues and pull requests are welcome. Before opening one: `docker/t3-client/setup-bridge.js`, and prints a pairing link. `scripts/setup-bridge-audit.js` checks those pages in a browser, through the same router. + It also checks full native appearance synchronization, including custom colors, + contrast, fonts, size, legacy fallback and unsaved-draft preservation. + `node scripts/appearance-ui-audit.js URL KEY` checks standalone role parity + against the pinned native reference, offline Inter delivery and forced-color + focus at phone, tablet and desktop widths. See the + [design system](docker/setup/design/README.md) for source mapping and sync rules. It covers grouped Settings navigation, its compact phone rail, native search, the older sidebar sheet, and opening/closing Setup with focus restored. Set `T3_BRIDGE_UI_OUTPUT=/tmp/t3-bridge-ui` to save desktop and phone diff --git a/Dockerfile b/Dockerfile index 56e4013..ed49ee8 100644 --- a/Dockerfile +++ b/Dockerfile @@ -208,7 +208,7 @@ COPY --from=t3-build-node /usr/local/bin/node /usr/local/bin/node COPY docker/runtime/ /src/docker/runtime/ COPY scripts/build-t3-runtime.mjs /src/scripts/build-t3-runtime.mjs # The one bundled version pin; scripts/bump-versions.sh refreshes it. -ARG T3_VERSION=0.1.3 +ARG T3_VERSION=0.1.5 ARG TARGETARCH ENV npm_config_store_dir=/var/cache/pnpm RUN --mount=type=cache,target=/var/cache/pnpm set -eux; \ diff --git a/docker/setup/app.js b/docker/setup/app.js index 65d047a..ef3601c 100644 --- a/docker/setup/app.js +++ b/docker/setup/app.js @@ -1593,8 +1593,9 @@ const checking = check.checking || ui.runtimeChecking; const failures = !checking ? check.failures : []; const lastChecked = s.updates && s.updates.checkedAt ? M.relTime(s.updates.checkedAt, n) : null; + const idleCheckLabel = html`${icon('refresh-cw')}Check for updates`; const headActions = html` - + ${view.due.length ? html`` : ''}`; return html` ${pageHead('updates', { actions: headActions })} @@ -1902,6 +1903,16 @@ const s = state.status; const n = now(); document.body.dataset.consoleRoute = state.route; + const pageInfo = T3Routes.page(state.route); + const title = pageInfo?.title || titleOf(state.route); + if ($('current-page').textContent !== title) $('current-page').textContent = title; + const guide = $('page-guide'); + guide.hidden = !pageInfo?.doc; + if (pageInfo?.doc) { + const href = T3Routes.docUrl(pageInfo.doc, s?.image?.version); + if (guide.getAttribute('href') !== href) guide.setAttribute('href', href); + guide.setAttribute('aria-label', pageInfo.title + ' guide'); + } if (s) renderShell(s, n); const route = state.route; const el = $('page-' + route); @@ -4053,7 +4064,10 @@ window.addEventListener('message', (e) => { const m = e.data; if (e.source !== window.parent || e.origin !== location.origin || !m || m.source !== 't3-code') return; - if (m.type === 'theme' && (m.theme === 'light' || m.theme === 'dark') && m.theme !== themeMode()) setTheme(m.theme); + if (m.type === 'theme' && (m.theme === 'light' || m.theme === 'dark')) { + if (m.theme !== themeMode()) setTheme(m.theme); + if (!T3Appearance.apply(document.documentElement, m.appearance)) T3Appearance.clear(document.documentElement); + } }); // Escape closes the dialog once nothing on this page wants it: an open // menu, sheet or palette takes it first (Kit stops it there). diff --git a/docker/setup/client/appearance.js b/docker/setup/client/appearance.js new file mode 100644 index 0000000..a40c117 --- /dev/null +++ b/docker/setup/client/appearance.js @@ -0,0 +1,60 @@ +// Native T3 appearance messages carry semantic colors, never arbitrary CSS. +// Keep local component names here so the bridge does not depend on Kit internals. +const T3Appearance = (() => { + 'use strict'; + const COLORS = Object.freeze({ + '--bg': 'background', '--surface': 'card', '--surface-raised': 'popover', + '--surface-sunken': 'muted', '--fg': 'foreground', '--fg-muted': 'muted-foreground', + '--fg-subtle': 'placeholder', '--border': 'border', '--border-strong': 'input', + '--accent': 'primary', '--on-accent': 'primary-foreground', '--accent-text': 'update-foreground', + '--focus': 'ring', '--hover': 'accent', '--pressed': 'accent', + '--sidebar': 'sidebar', '--sidebar-fg': 'sidebar-foreground', + '--sidebar-fg-muted': 'sidebar-muted-foreground', '--sidebar-border': 'sidebar-border', + '--sidebar-row-hover': 'sidebar-row-hover', '--sidebar-row-active': 'sidebar-row-active', + '--sidebar-row-selected': 'sidebar-row-selected', '--sidebar-control': 'sidebar-control-surface', + '--warn': 'warning', '--warn-text': 'warning-foreground', '--warn-soft': 'warning-surface', + '--danger': 'destructive', '--danger-text': 'destructive-foreground', '--danger-soft': 'error-surface', + '--ok': 'success', '--ok-text': 'success-foreground', '--info': 'info', '--info-text': 'info-foreground', + }); + const FONTS = Object.freeze({ '--font-sans': 'sans', '--font-mono': 'mono' }); + const OWNED = [...Object.keys(COLORS), ...Object.keys(FONTS), '--control-radius', '--font-smoothing']; + const record = value => value !== null && typeof value === 'object' && !Array.isArray(value); + const literal = (value, property, supports) => typeof value === 'string' && value.length > 0 && value.length <= 512 + && !/[;{}<>]/.test(value) && !/\b(?:url|var|env)\s*\(/i.test(value) && supports(property, value); + + const normalize = (value, supports) => { + if (!record(value) || value.version !== 1 || !record(value.colors) || typeof supports !== 'function') return null; + const properties = {}; + for (const [token, role] of Object.entries(COLORS)) { + const color = Object.hasOwn(value.colors, role) ? value.colors[role] : null; + if (literal(color, 'color', supports)) properties[token] = color; + } + if (record(value.fonts)) for (const [token, role] of Object.entries(FONTS)) { + const font = Object.hasOwn(value.fonts, role) ? value.fonts[role] : null; + if (literal(font, 'font-family', supports)) properties[token] = font; + } + if (record(value.fonts) && ['auto', 'antialiased', 'subpixel-antialiased'].includes(value.fonts.smoothing)) properties['--font-smoothing'] = value.fonts.smoothing; + if (typeof value.radius === 'string' && /^(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem))$/.test(value.radius) + && value.radius.length <= 16 && parseFloat(value.radius) <= (value.radius.endsWith('rem') ? 2 : 32) + && supports('border-radius', value.radius)) properties['--control-radius'] = value.radius; + const size = typeof value.fontSize === 'string' && /^(?:\d+(?:\.\d+)?)px$/.test(value.fontSize) ? parseFloat(value.fontSize) : null; + return { properties, fontSize: size !== null && size >= 12 && size <= 20 ? `${size}px` : null }; + }; + + const clear = (root) => { + for (const token of OWNED) root.style.removeProperty(token); + root.style.removeProperty('font-size'); + }; + const apply = (root, value) => { + const result = normalize(value, (property, text) => CSS.supports(property, text)); + if (!result) return false; + // A palette can lose a role when switching to an older host. Remove its + // previous override so the current light/dark default takes over cleanly. + clear(root); + for (const [token, color] of Object.entries(result.properties)) root.style.setProperty(token, color); + if (result.fontSize) root.style.fontSize = result.fontSize; + else root.style.removeProperty('font-size'); + return true; + }; + return { COLORS, FONTS, normalize, apply, clear }; +})(); diff --git a/docker/setup/client/files-transfers.js b/docker/setup/client/files-transfers.js index 8fb3c13..e0683f4 100644 --- a/docker/setup/client/files-transfers.js +++ b/docker/setup/client/files-transfers.js @@ -4,7 +4,8 @@ const T3FilesTransfers=(()=>{ const activeStates=new Set(['queued','starting','uploading','retrying','finishing']); const create=({api,request,context,refresh,dialogs,go,extract=()=>{},freeSpace=()=>go('storage'),onActive=()=>{}})=>{ const rows=new Map(),uploaded=new Map(),dismissed=new Set(),PHONE=matchMedia('(max-width: 639.98px)'); - let active=0,folded=false,visible=true,dragging=false,previousFold=false,sheet=null,timer=null,frame=null,picker=null,transferPage=0; + // Restored history stays compact; enqueue and notifyJob open new work. + let active=0,folded=true,visible=true,dragging=false,previousFold=false,sheet=null,timer=null,frame=null,picker=null,transferPage=0; const workRows=()=>[...rows.values()]; const hasUploads=()=>workRows().some(row=>row.file&&activeStates.has(row.phase)); const hasJobs=()=>workRows().some(row=>!row.file&&['running','queued'].includes(row.phase)); @@ -13,16 +14,16 @@ const T3FilesTransfers=(()=>{ const sample=(row,value)=>{row.sent=value;row.samples=(row.samples||[]).filter(sample=>sample.at>Date.now()-5000);row.samples.push({at:Date.now(),bytes:value});}; const label=row=>({queued:row.file||row.kind==='upload'?'Waiting to upload':'Waiting for another transfer',starting:'Starting upload…',uploading:'Uploading',retrying:row.code==='busy'?'Waiting for T3 Code’s update':'Reconnecting',paused:'Paused',conflict:'Already here. Waiting for your choice.',finishing:'Finishing…',done:row.skipped?'Skipped':({zip:'ZIP ready',compress:'Compressed',extract:'Extracted',clean:'Space freed',delete:'Deleted',copy:'Copied',move:'Moved'})[row.kind]||'Uploaded',failed:'Couldn’t finish',cancelled:'Cancelled',uncertain:'Check the folder before retrying',running:'On the server'})[row.phase]||row.phase; const control=(row,action,glyph,title)=>html``; - const body=()=>{ + const body=(expanded=!folded)=>{ const all=workRows(),cancelable=all.filter(row=>!['done','cancelled','uncertain','finishing'].includes(row.phase)&&row.cancellable!==false),live=all.filter(row=>activeStates.has(row.phase)||['running','queued'].includes(row.phase)),attention=all.filter(row=>['paused','conflict','failed','uncertain'].includes(row.phase)),total=all.reduce((sum,row)=>sum+(row.total||0),0),done=all.reduce((sum,row)=>sum+(row.sent??row.received??row.done??0),0); const ordered=[...all.filter(row=>['starting','uploading','retrying','finishing','running'].includes(row.phase)),...attention,...all.filter(row=>row.phase==='queued'),...all.filter(row=>['done','cancelled'].includes(row.phase))];transferPage=Math.min(transferPage,Math.max(0,Math.ceil(ordered.length/100)-1)); - return html`
Transfers${live.length?M.plural(live.length,'running'):attention.length?attention.length+' '+(attention.length===1?'needs':'need')+' your attention':'Transfers complete'}${attention.length&&live.length?' · '+attention.length+' need you':''}
${!folded||PHONE.matches&&sheet?html`
${ordered.slice(transferPage*100,(transferPage+1)*100).map(row=>{const percent=progress(row),speed=rate(row),left=speed>0?(row.total-(row.sent||row.received||0))/speed:null;return html`
${icon(row.phase==='done'?'circle-check':['failed','conflict','paused','uncertain'].includes(row.phase)?'triangle-alert':row.file?'upload':({zip:'download',compress:'archive',extract:'file-archive',clean:'eraser',delete:'trash-2',move:'folder-input'})[row.kind]||'copy')}
${row.label}${!['done','cancelled','conflict','failed','uncertain'].includes(row.phase)?html`
`:''}${row.error||label(row)}${row.phase==='done'&&(row.file||row.kind==='upload')&&row.path&&F.basename(row.path)!==F.basename(row.relative||row.label)?html`Saved as ${F.basename(row.path)}`:''}${row.space?html`${M.formatBytes(row.space.requiredBytes||row.total)} needed · ${M.formatBytes(row.space.availableBytes)} available`:''}${row.file&&['uploading','retrying','paused'].includes(row.phase)?html`${M.formatBytes(row.received||0)} of ${M.formatBytes(row.total)}${speed?' · '+M.formatBytes(speed)+'/s':''}${left!==null&&left>0?' · '+Math.ceil(left)+' s left':''}${row.retryAt?' · retry in '+Math.max(0,Math.ceil((row.retryAt-Date.now())/1000))+' s':''}`:!row.file&&Number.isFinite(row.done)&&row.phase==='running'?html`${row.done.toLocaleString()}${Number.isFinite(row.total)?' of '+row.total.toLocaleString():''} ${row.unit||'files'}`:''}${row.kind==='clean'&&Number.isFinite(row.freedBytes)?html`${M.formatBytes(row.freedBytes)} freed`:''}${row.phase==='done'&&!row.skipped&&/\.zip$/i.test(row.path||'')&&(row.file||row.kind==='upload')?html``:''}${row.path&&row.phase==='done'?html``:''}
${row.phase==='conflict'?html``:row.phase==='uncertain'?control(row,'show','folder-open','Check destination'):row.file&&row.phase==='finishing'?html``:row.file&&activeStates.has(row.phase)?html`${control(row,'pause','pause','Pause '+row.label)}${control(row,'cancel','x','Cancel '+row.label)}`:row.file&&['paused','failed'].includes(row.phase)?html`${control(row,'retry','play','Resume '+row.label)}${control(row,'cancel','x','Cancel '+row.label)}`:!row.file&&['running','queued'].includes(row.phase)&&row.cancellable!==false?control(row,'cancel','x','Cancel '+row.label):control(row,'dismiss','x','Dismiss '+row.label)}
`;})}
${ordered.length>100?html`
${transferPage*100+1}–${Math.min((transferPage+1)*100,ordered.length)} of ${ordered.length}
`:''}${PHONE.matches?html`
${icon('info')}
Keep Files open until they finishPhones may pause uploads in the background. Received bytes are kept, and uploads resume when you return.
`:html``}`:''}`; + return html`
Transfers${live.length?M.plural(live.length,'running'):attention.length?attention.length+' '+(attention.length===1?'needs':'need')+' your attention':'Transfers complete'}${attention.length&&live.length?' · '+attention.length+' need you':''}
${expanded?html`
${ordered.slice(transferPage*100,(transferPage+1)*100).map(row=>{const percent=progress(row),speed=rate(row),left=speed>0?(row.total-(row.sent||row.received||0))/speed:null;return html`
${icon(row.phase==='done'?'circle-check':['failed','conflict','paused','uncertain'].includes(row.phase)?'triangle-alert':row.file?'upload':({zip:'download',compress:'archive',extract:'file-archive',clean:'eraser',delete:'trash-2',move:'folder-input'})[row.kind]||'copy')}
${row.label}${!['done','cancelled','conflict','failed','uncertain'].includes(row.phase)?html`
`:''}${row.error||label(row)}${row.phase==='done'&&(row.file||row.kind==='upload')&&row.path&&F.basename(row.path)!==F.basename(row.relative||row.label)?html`Saved as ${F.basename(row.path)}`:''}${row.space?html`${M.formatBytes(row.space.requiredBytes||row.total)} needed · ${M.formatBytes(row.space.availableBytes)} available`:''}${row.file&&['uploading','retrying','paused'].includes(row.phase)?html`${M.formatBytes(row.received||0)} of ${M.formatBytes(row.total)}${speed?' · '+M.formatBytes(speed)+'/s':''}${left!==null&&left>0?' · '+Math.ceil(left)+' s left':''}${row.retryAt?' · retry in '+Math.max(0,Math.ceil((row.retryAt-Date.now())/1000))+' s':''}`:!row.file&&Number.isFinite(row.done)&&row.phase==='running'?html`${row.done.toLocaleString()}${Number.isFinite(row.total)?' of '+row.total.toLocaleString():''} ${row.unit||'files'}`:''}${row.kind==='clean'&&Number.isFinite(row.freedBytes)?html`${M.formatBytes(row.freedBytes)} freed`:''}${row.phase==='done'&&!row.skipped&&/\.zip$/i.test(row.path||'')&&(row.file||row.kind==='upload')?html``:''}${row.path&&row.phase==='done'?html``:''}
${row.phase==='conflict'?html``:row.phase==='uncertain'?control(row,'show','folder-open','Check destination'):row.file&&row.phase==='finishing'?html``:row.file&&activeStates.has(row.phase)?html`${control(row,'pause','pause','Pause '+row.label)}${control(row,'cancel','x','Cancel '+row.label)}`:row.file&&['paused','failed'].includes(row.phase)?html`${control(row,'retry','play','Resume '+row.label)}${control(row,'cancel','x','Cancel '+row.label)}`:!row.file&&['running','queued'].includes(row.phase)&&row.cancellable!==false?control(row,'cancel','x','Cancel '+row.label):control(row,'dismiss','x','Dismiss '+row.label)}
`;})}
${ordered.length>100?html`
${transferPage*100+1}–${Math.min((transferPage+1)*100,ordered.length)} of ${ordered.length}
`:''}${PHONE.matches?html`
${icon('info')}
Keep Files open until they finishPhones may pause uploads in the background. Received bytes are kept, and uploads resume when you return.
`:html``}`:''}`; }; const paint=()=>{ if(frame)return;frame=requestAnimationFrame(()=>{frame=null;const mount=document.getElementById('files-transfers');if(mount)Kit.patch(mount,content());sheet?.render();}); }; const content=()=>!visible||!rows.size?'':PHONE.matches?html``:html`
${body()}
`; - const openSheet=()=>{if(sheet)return;sheet=Kit.open({kind:'bottom',panel:{class:'tc-sheet tc-sheet--bottom tc-files-transfer-sheet',role:'dialog','aria-label':'Transfers'},render:()=>body(),onClose:()=>{sheet=null;}});}; + const openSheet=()=>{if(sheet)return;sheet=Kit.open({kind:'bottom',panel:{class:'tc-sheet tc-sheet--bottom tc-files-transfer-sheet',role:'dialog','aria-label':'Transfers'},render:()=>body(true),onClose:()=>{sheet=null;}});}; const changed=()=>{paint();clearTimeout(timer);if(rows.size&&visible)timer=setTimeout(tick,1000);}; const tick=()=>{const finished=workRows().filter(row=>row.finishedAt).sort((a,b)=>b.finishedAt-a.finishedAt);for(const [index,row]of finished.entries())if(index>=100||Date.now()-row.finishedAt>10*60_000){dismissed.add(row.serverId||row.id);rows.delete(row.id);}while(dismissed.size>512)dismissed.delete(dismissed.values().next().value);for(const [path,at]of uploaded)if(Date.now()-at>60_000)uploaded.delete(path);changed();}; const pump=()=>{if(!visible)return;for(const row of rows.values()){if(active>=3)break;if(!row.file||row.phase!=='queued')continue;active++;row.phase='starting';void upload(row).finally(()=>{active--;changed();pump();});}changed();}; diff --git a/docker/setup/client/kit.js b/docker/setup/client/kit.js index e5ce9ca..5869106 100644 --- a/docker/setup/client/kit.js +++ b/docker/setup/client/kit.js @@ -305,8 +305,9 @@ const Kit = (() => { if(event.type==='scroll'){ if(layer.panel.contains(event.target))return; const target=event.target===document?window:event.target,prior=layer.scrollOffsets?.get(target),current=target===window?[window.scrollX,window.scrollY]:[target.scrollLeft,target.scrollTop]; - // A scroll queued before a pointer opened the menu is not a new move. - if(prior&&prior[0]===current[0]&&prior[1]===current[1])return; + // Independent scrollers cannot move this anchor. An ancestor's scroll + // queued before the menu opened is not a new move either. + if(!prior||prior[0]===current[0]&&prior[1]===current[1])return; } layer.close('moved'); }; diff --git a/docker/setup/client/skills.js b/docker/setup/client/skills.js index 06cd6cb..bd15dbe 100644 --- a/docker/setup/client/skills.js +++ b/docker/setup/client/skills.js @@ -155,7 +155,7 @@ const T3SkillsUI = (() => { if (!plugin?.hooks.length) return ''; return html``; }; - const table = filtered => html`
+ const table = filtered => html`
Skill
${columns().map((provider, index) => html`
${mark(provider.id)}${provider.name}${errors[provider.id] ? html`` : ''}${loading.has(provider.id) ? 'Reading…' : installed.includes(provider.id) ? provider.control : 'Not detected'}${!showAll && installed.length < S.providers.length && index === columns().length - 1 ? html`` : ''}
`)}
${S.groups(filtered).map(group => html`
${S.displayPath(group.root.path, library().home)}·${group.rows.length}·${readersLabel(group.root)}${hookChip(group)}${groupClosed(group) ? html`${group.rows.map(row => row.name).join(', ')}` : !pluginOf(group) && installed.some(id => !(group.root.readers || []).includes(id)) ? html`` : ''}
${groupClosed(group) ? '' : group.rows.map(skill => html`
${skillBadges(skill)}

${skill.description}

${columns().map(provider => html`
${availability(skill, provider.id)}
`)}
`)}
`)} diff --git a/docker/setup/client/unlock.js b/docker/setup/client/unlock.js index 91b7aee..50ab489 100644 --- a/docker/setup/client/unlock.js +++ b/docker/setup/client/unlock.js @@ -72,6 +72,7 @@ if (m.type === 'theme' && (m.theme === 'light' || m.theme === 'dark')) { document.documentElement.setAttribute('data-theme', m.theme); document.documentElement.setAttribute('data-theme-mode', m.theme); + if (!T3Appearance.apply(document.documentElement, m.appearance)) T3Appearance.clear(document.documentElement); } }); window.parent.postMessage({ source: 't3-setup', type: 'ready' }, location.origin); diff --git a/docker/setup/console.css b/docker/setup/console.css index b49b7e5..27a6282 100644 --- a/docker/setup/console.css +++ b/docker/setup/console.css @@ -23,8 +23,8 @@ body.tc-root { min-height: 100vh; min-height: 100dvh; } .tc-root button { -webkit-tap-highlight-color: transparent; } :root { - --tabbar-h: 58px; - --phonebar-h: 52px; + --tabbar-h: 3.625rem; + --phonebar-h: 3.25rem; } /* While a modal overlay is open, the page behind it does not scroll. */ @@ -34,7 +34,7 @@ html.tc-locked { overflow: hidden; } .tc-app { min-height: 100vh; min-height: 100dvh; } /* The sidebar stays put while the page scrolls under the top bar. */ .tc-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; } -.tc-sidebar-foot .tc-server { margin-bottom: 4px; } +.tc-sidebar-foot .tc-server { margin-bottom: 0.25rem; } /* Full-width runtime metadata keeps long Nightly builds clear of the status. */ .tc-server-version { overflow-wrap: anywhere; } .tc-sidebar-row { display: flex; align-items: center; gap: var(--space-1); } @@ -45,50 +45,50 @@ html.tc-locked { overflow: hidden; } /* The sidebar's pages, in groups. A mark beside a page is either a count of what needs the person or a quiet sign: work running, a port out on the internet. Never a plain count. */ -.tc-nav-group { display: flex; flex-direction: column; gap: 2px; } -.tc-nav-group + .tc-nav-group { margin-top: var(--space-2); } -.tc-nav-group > .tc-nav-label { padding: 6px 10px 4px; } +.tc-nav-group { display: flex; flex-direction: column; gap: var(--space-1); } +.tc-nav-group + .tc-nav-group { margin-top: var(--space-4); } +.tc-nav-group > .tc-nav-label { padding: 0.375rem 0.625rem 0.25rem; } .tc-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-nav-badge { flex: none; margin-left: auto; } [data-theme="light"] .tc-nav-badge.tc-badge--warn { color: color-mix(in oklab, var(--warn-text), black 28%); } [data-theme="light"] .tc-nav-badge.tc-badge--info { color: color-mix(in oklab, var(--info-text), black 18%); } -.tc-nav-mark { width: 16px; height: 16px; display: inline-grid; place-items: center; } -.tc-nav-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--info); } -.tc-nav-mark--running::before { width: 10px; height: 10px; background: none; border: 1.5px solid var(--info); border-right-color: transparent; animation: tc-spin 0.75s linear infinite; } +.tc-nav-mark { width: 1rem; height: 1rem; display: inline-grid; place-items: center; } +.tc-nav-mark::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--info); } +.tc-nav-mark--running::before { width: 0.625rem; height: 0.625rem; background: none; border: 1.5px solid var(--info); border-right-color: transparent; animation: tc-spin 0.75s linear infinite; } .tc-nav-mark--live::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent); } /* Inside T3 Code the console is a dialog: its close button holds the top right corner of the page at a desk, and the end of the phone's bar. */ -.tc-embed-corner { position: fixed; top: 28px; right: 16px; z-index: var(--z-sticky); } +.tc-embed-corner { display: flex; align-items: center; } .tc-embed-corner .tc-embed-close { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.14); backdrop-filter: blur(12px) saturate(1.14); } .tc-embed-corner .tc-embed-close:hover { background: var(--hover); } /* Every page opens with its title, one line on what it is for, and its main action. */ -.tc-page { padding-top: 28px; --_gap: var(--space-8); } +.tc-page { padding-top: 1.75rem; --_gap: var(--space-8); } /* Notices one after another read as one stack, not as separate sections. */ .tc-page > .tc-notice + .tc-notice { margin-top: calc(var(--space-2) - var(--_gap)); } .tc-page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-6); min-width: 0; padding: 0 var(--space-4); } .tc-page-head-text { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } -.tc-page-title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; } -.tc-page-sub { color: var(--fg-muted); font-size: 14px; line-height: 20px; max-width: 72ch; text-wrap: pretty; } +.tc-page-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; } +.tc-page-sub { color: var(--fg-muted); font-size: 0.875rem; line-height: 1.25rem; max-width: 72ch; text-wrap: pretty; } .tc-page-learn { color: var(--fg); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 2px; } .tc-page-learn:hover { color: var(--accent-text); text-decoration-color: currentColor; } -.tc-page-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); min-height: 28px; } +.tc-page-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); min-height: 1.75rem; } /* Inside T3 Code the close button holds the top right corner: the head keeps clear of it only as far as the page's own margin does not already. */ -[data-embed] .tc-page-head { padding-right: max(var(--space-4), calc(68px - max(0px, (100vw - var(--sidebar-w) - var(--content)) / 2) - var(--space-6))); } +[data-embed] .tc-page-head { padding-right: var(--space-4); } /* A line under everything else on a page: what is there but not managed here. */ -.tc-page-foot { padding: 0 var(--space-4); font-size: 12px; line-height: 18px; color: var(--fg-muted); text-wrap: pretty; } +.tc-page-foot { padding: 0 var(--space-4); font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); text-wrap: pretty; } /* First start, in progress: a line above the page it affects. */ .tc-notice--progress { align-items: center; } .tc-notice--progress > .tc-spinner { margin: 0 2px; } .tc-notice--progress .tc-notice-desc { opacity: 1; color: var(--fg-muted); } .tc-notice--progress .tc-notice-desc strong { color: var(--fg); font-weight: 500; } -.tc-notice--progress > .tc-progress { width: 96px; flex: none; } +.tc-notice--progress > .tc-progress { width: 6rem; flex: none; } .tc-notice--progress > .tc-op-pct { flex: none; } /* On a phone the bar goes under the words, which keep the whole width. */ @media (max-width: 639.98px) { @@ -98,15 +98,15 @@ html.tc-locked { overflow: hidden; } } /* Overview, once set up: Updates and Recent side by side where there is room. */ -.tc-overview-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--_gap) var(--space-6); align-items: start; } +.tc-overview-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--_gap) var(--space-6); align-items: start; } /* A problem's icon carries its tone. */ .tc-tile--icon[data-tone="danger"] { color: var(--danger); } .tc-tile--icon[data-tone="warn"] { color: var(--warn); } /* "2 more updates", at the foot of a short list. */ -.tc-group-more { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-4); - font-size: 12px; color: var(--fg-muted); text-decoration: none !important; border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px); } +.tc-group-more { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 2.5rem; padding: 0 var(--space-4); + font-size: 0.75rem; color: var(--fg-muted); text-decoration: none !important; border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px); } .tc-group-more:hover { color: var(--fg); background: var(--hover); } -.tc-group-more .tc-icon { width: 14px; height: 14px; } +.tc-group-more .tc-icon { width: 0.875rem; height: 0.875rem; } /* A version moving to the next one, under a row's name. */ .tc-row-main > .tc-version { min-width: 0; overflow-wrap: anywhere; } .tc-empty--compact > .tc-icon { align-self: center; } @@ -125,10 +125,10 @@ html.tc-locked { overflow: hidden; } .tc-tile--port-state[data-live] { color: var(--info-text); } /* The phone's top bar: brand, the server's health in a word, search. */ -.tc-phonebar { display: none; align-items: center; gap: 8px; height: var(--phonebar-h); padding: 0 12px 0 16px; flex: none; +.tc-phonebar { display: none; align-items: center; gap: 0.5rem; height: var(--phonebar-h); padding: 0 0.75rem 0 1rem; flex: none; position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.14); backdrop-filter: blur(12px) saturate(1.14); } -.tc-phone-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; } +.tc-phone-status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; } .tc-tabbar { display: none; } @@ -137,10 +137,10 @@ html.tc-locked { overflow: hidden; } .tc-sidebar, .tc-embed-corner { display: none; } .tc-phonebar { display: flex; } .tc-tabbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); } - .tc-page { padding: 8px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 24px); gap: var(--space-6); --_gap: var(--space-6); } - .tc-page .tc-section-head, .tc-page-head, .tc-page-foot { padding: 0 4px; } - .tc-page-title { font-size: 20px; } - [data-embed] .tc-page-head { padding-right: 4px; } + .tc-page { padding: 0.5rem 1rem calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.5rem); gap: var(--space-6); --_gap: var(--space-6); } + .tc-page .tc-section-head, .tc-page-head, .tc-page-foot { padding: 0 0.25rem; } + .tc-page-title { font-size: 1.25rem; } + [data-embed] .tc-page-head { padding-right: 0.25rem; } .tc-desk-only { display: none !important; } } @media (min-width: 1024px) { @@ -161,47 +161,47 @@ html.tc-locked { overflow: hidden; } } /* Touch density raises every button to 16px text; an extra-small one (a section's link, a card's Refresh) stays a step below the page's text. */ -.tc-root[data-density="touch"] .tc-btn--xs { --_h: 30px; font-size: 13px; padding: 0 9px; } -.tc-root[data-density="touch"] .tc-btn--xs .tc-icon { width: 15px; height: 15px; } +.tc-root[data-density="touch"] .tc-btn--xs { --_h: 1.875rem; font-size: 0.8125rem; padding: 0 0.5625rem; } +.tc-root[data-density="touch"] .tc-btn--xs .tc-icon { width: 0.9375rem; height: 0.9375rem; } /* A 28px input, for inline values beside small buttons. */ -.tc-input--sm { height: var(--control-sm); font-size: 13px; } +.tc-input--sm { height: var(--control-sm); font-size: 0.8125rem; } /* Storage: the disk, then what can be cleared, each a section like any page's. One wrapper holds them, so the page's rhythm carries on inside it. */ .tc-storage { display: flex; flex-direction: column; gap: var(--_gap); min-width: 0; } .tc-storage-disk { padding: var(--space-4); display: grid; gap: var(--space-3); } .tc-storage-disk-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); } -.tc-storage-number { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } -.tc-storage-of { font-size: 14px; color: var(--fg-muted); } +.tc-storage-number { font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } +.tc-storage-of { font-size: 0.875rem; color: var(--fg-muted); } .tc-storage .tc-hint, .tc-storage-settings .tc-hint { margin: 0; } .tc-storage-meter > span { background: var(--storage-tone); } -.tc-storage-size { font-size: 12px; line-height: 18px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } -.tc-storage-empty { display: flex; align-items: center; gap: 8px; padding: var(--space-4); color: var(--fg-muted); font-size: 13px; } +.tc-storage-size { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } +.tc-storage-empty { display: flex; align-items: center; gap: 0.5rem; padding: var(--space-4); color: var(--fg-muted); font-size: 0.8125rem; } .tc-storage-last { display: flex; align-items: center; gap: var(--space-2); } -.tc-storage-disclosure { appearance: none; border: 0; background: none; width: 100%; padding: 12px var(--space-4); color: var(--fg); font: inherit; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; border-radius: inherit; } +.tc-storage-disclosure { appearance: none; border: 0; background: none; width: 100%; padding: 0.75rem var(--space-4); color: var(--fg); font: inherit; font-size: 0.875rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; cursor: pointer; border-radius: inherit; } .tc-storage-disclosure:hover { background: var(--hover); } .tc-storage-disclosure:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; } .tc-storage-disclosure > .tc-icon { color: var(--fg-muted); transition: rotate var(--dur-fast); } .tc-storage-disclosure[aria-expanded="true"] > .tc-icon { rotate: 180deg; } -.tc-storage-data { border-top: 1px solid var(--hairline); padding: 0 var(--space-4); } +.tc-storage-data { container-type: inline-size; border-top: 1px solid var(--hairline); padding: 0 var(--space-4); } .tc-storage-data[hidden] { display: none; } -.tc-storage-data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 10px 0; } +.tc-storage-data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 0.625rem 0; } .tc-storage-data-row + .tc-storage-data-row { border-top: 1px solid var(--hairline); } -.tc-storage-data-row > div { min-width: 0; display: grid; gap: 3px; } -.tc-storage-path { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 16px; color: var(--fg-muted); } -.tc-storage-data-note { padding: 12px 0; border-top: 1px solid var(--hairline); } -.tc-storage-review { width: 480px; max-width: calc(100vw - 32px); } +.tc-storage-data-row > div { min-width: 0; display: grid; gap: 0.1875rem; } +.tc-storage-path { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; line-height: 1rem; color: var(--fg-muted); } +.tc-storage-data-note { padding: 0.75rem 0; border-top: 1px solid var(--hairline); } +.tc-storage-review { width: 30rem; max-width: calc(100vw - 32px); } .tc-layer.tc-layer--center > .tc-storage-review { display: flex; flex-direction: column; overflow: hidden; } .tc-storage-review > .tc-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .tc-storage-review > .tc-dialog-foot { flex: none; } .tc-storage-review::before { flex: none; } -.tc-storage-toggle { display: grid; place-items: center; width: 44px; height: 44px; } -.tc-storage-budgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0 8px; } +.tc-storage-toggle { display: grid; place-items: center; width: var(--touch); height: var(--touch); } +.tc-storage-budgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0 0.5rem; } .tc-storage-input { position: relative; } -.tc-storage-input > input { width: 100%; padding-right: 38px; font-variant-numeric: tabular-nums; } -.tc-storage-input > span { position: absolute; top: 50%; right: 12px; translate: 0 -50%; font-size: 12px; color: var(--fg-muted); pointer-events: none; } -.tc-storage-review-loading { display: flex; align-items: center; gap: 8px; margin-top: var(--space-4); font-size: 13px; color: var(--fg-muted); } -.tc-storage-review-summary { display: grid; gap: 3px; margin: var(--space-4) 0; } +.tc-storage-input > input { width: 100%; padding-right: 2.375rem; font-variant-numeric: tabular-nums; } +.tc-storage-input > span { position: absolute; top: 50%; right: 0.75rem; translate: 0 -50%; font-size: 0.75rem; color: var(--fg-muted); pointer-events: none; } +.tc-storage-review-loading { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-4); font-size: 0.8125rem; color: var(--fg-muted); } +.tc-storage-review-summary { display: grid; gap: 0.1875rem; margin: var(--space-4) 0; } .tc-storage-review-summary > strong { font-weight: 500; } .tc-storage-previous { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; } .tc-storage-previous > span { min-width: 0; display: grid; gap: var(--space-1); } @@ -211,166 +211,166 @@ html.tc-locked { overflow: hidden; } .tc-storage-previous[data-danger] .tc-checkbox { accent-color: var(--danger); } .tc-storage-review-error { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-4); } .tc-storage-version-list { border: 1px solid var(--border); border-radius: var(--radius-md); } -.tc-storage-version { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; } +.tc-storage-version { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.625rem 0.75rem; } .tc-storage-version + .tc-storage-version { border-top: 1px solid var(--hairline); } .tc-storage-version > div { min-width: 0; display: grid; gap: 2px; } .tc-storage-version > div > span { overflow-wrap: anywhere; } .tc-storage-version > span { text-align: right; } .tc-storage-removable { color: var(--accent-text); } @media (max-width: 639.98px) { - .tc-storage-number { font-size: 21px; line-height: 28px; } + .tc-storage-number { font-size: 1.3125rem; line-height: 1.75rem; } } /* Storage keeps decisions on the page and detail in bounded reviews. The action footer never scrolls away with cache inventories or policy limits. */ -.tc-storage-disk-head { justify-content: space-between; gap: 8px 20px; } +.tc-storage-disk-head { justify-content: space-between; gap: 0.5rem 1.25rem; } .tc-storage-layout, .tc-storage-secondary { min-width: 0; display: grid; align-items: start; gap: var(--_gap); } @media (min-width: 1200px) { - .tc-storage-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; } + .tc-storage-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.5rem; } .tc-storage-secondary .tc-row { grid-template-columns: max-content minmax(0, 1fr); align-items: start; } .tc-storage-secondary .tc-row-actions { grid-column: 2; justify-content: flex-start; } .tc-storage-secondary .tc-row-name { white-space: normal; } } -.tc-storage-disk-head > div { display: flex; align-items: baseline; gap: 6px; } -.tc-storage-disk-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--fg-muted); font-size: 12px; line-height: 18px; } -.tc-storage-disk-warning { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12px; line-height: 18px; color: var(--warn-text); } +.tc-storage-disk-head > div { display: flex; align-items: baseline; gap: 0.375rem; } +.tc-storage-disk-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; } +.tc-storage-disk-warning { display: flex; align-items: flex-start; gap: 0.4375rem; margin: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--warn-text); } .tc-storage-disk-warning[data-tone="danger"] { color: var(--danger-text); } .tc-storage-disk-warning > .tc-icon { flex: none; margin-top: 2px; } -.tc-storage-cache-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--fg-muted); } -.tc-storage-cache-row { grid-template-columns: max-content minmax(0, 1fr) max-content auto; column-gap: 12px; padding: 13px 16px; } +.tc-storage-cache-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hairline); font-size: 0.75rem; color: var(--fg-muted); } +.tc-storage-cache-row { grid-template-columns: max-content minmax(0, 1fr) max-content auto; column-gap: 0.75rem; padding: 0.8125rem 1rem; } .tc-storage-cache-row .tc-row-name { white-space: normal; } -.tc-storage-cache-caption { display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; color: var(--fg-muted); font-size: 12px; line-height: 18px; } +.tc-storage-cache-caption { display: flex; align-items: flex-start; gap: 0.3125rem; margin-top: 2px; color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; } .tc-storage-cache-caption > .tc-icon { flex: none; margin-top: 2px; } -.tc-storage-cache-size { display: grid; justify-items: end; gap: 2px; font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; } -.tc-storage-secondary .tc-status-text { color: var(--fg-muted); font-size: 12px; line-height: 18px; } -.tc-storage-active { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; font-size: 13px; } -.tc-storage-active > div { display: grid; gap: 3px; } +.tc-storage-cache-size { display: grid; justify-items: end; gap: 2px; font-size: 0.8125rem; line-height: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; } +.tc-storage-secondary .tc-status-text { color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; } +.tc-storage-active { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 1rem; font-size: 0.8125rem; } +.tc-storage-active > div { display: grid; gap: 0.1875rem; } .tc-storage-active strong { font-weight: 500; } -.tc-storage-active > div > span { color: var(--fg-muted); font-size: 12px; } -.tc-storage-notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: 13px; line-height: 20px; } +.tc-storage-active > div > span { color: var(--fg-muted); font-size: 0.75rem; } +.tc-storage-notice { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: 0.8125rem; line-height: 1.25rem; } .tc-storage-notice > .tc-icon { flex: none; margin-top: 2px; color: var(--fg-muted); } .tc-storage-notice > div { min-width: 0; } .tc-storage-notice strong { font-weight: 500; } -.tc-storage-notice p { margin: 4px 0 0; color: var(--fg-muted); overflow-wrap: anywhere; } -.tc-storage-notice .tc-btn { margin-top: 10px; } +.tc-storage-notice p { margin: 0.25rem 0 0; color: var(--fg-muted); overflow-wrap: anywhere; } +.tc-storage-notice .tc-btn { margin-top: 0.625rem; } .tc-storage-notice--danger { border-color: color-mix(in srgb, var(--danger-text) 24%, var(--border)); } .tc-storage-notice--danger > .tc-icon { color: var(--danger-text); } -.tc-storage-last { font-size: 12px; line-height: 18px; color: var(--fg-muted); flex-wrap: wrap; } +.tc-storage-last { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); flex-wrap: wrap; } .tc-storage-last > span:first-child { display: flex; flex: none; } .tc-storage-last > .tc-btn { margin-left: auto; } .tc-storage-disclosure { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; text-align: left; } .tc-layer.tc-layer--center > .tc-storage-cleanup, -.tc-layer.tc-layer--center > .tc-storage-settings { display: flex; flex-direction: column; width: 600px; max-width: calc(100vw - 32px); max-height: min(820px, calc(100dvh - 64px)); overflow: hidden; } +.tc-layer.tc-layer--center > .tc-storage-settings { display: flex; flex-direction: column; width: 37.5rem; max-width: calc(100vw - 32px); max-height: min(820px, calc(100dvh - 64px)); overflow: hidden; } .tc-storage-preferences-form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; margin: 0; } -.tc-storage-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none; padding: 22px 24px 18px; border-bottom: 1px solid var(--hairline); } -.tc-storage-dialog-head > div { min-width: 0; display: grid; gap: 7px; } -.tc-storage-dialog-head > .tc-btn { flex: none; margin: -4px -8px 0 0; } -.tc-storage-dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 24px; } -.tc-storage-dialog-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--hairline); background: var(--surface-raised); } -.tc-storage-dialog-foot .tc-btn { min-height: 34px; } -.tc-storage-save-hint { margin-right: auto; color: var(--fg-muted); font-size: 11px; line-height: 16px; } -.tc-storage-plan-loading { display: flex; align-items: center; gap: 12px; min-height: 160px; justify-content: center; color: var(--fg-muted); font-size: 13px; } -.tc-storage-plan-loading > div { display: grid; gap: 5px; } +.tc-storage-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex: none; padding: 1.375rem 1.5rem 1.125rem; border-bottom: 1px solid var(--hairline); } +.tc-storage-dialog-head > div { min-width: 0; display: grid; gap: 0.4375rem; } +.tc-storage-dialog-head > .tc-btn { flex: none; margin: -0.25rem -0.5rem 0 0; } +.tc-storage-dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.5rem 1.5rem; } +.tc-storage-dialog-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--hairline); background: var(--surface-raised); } +.tc-storage-dialog-foot .tc-btn { min-height: 2.125rem; } +.tc-storage-save-hint { margin-right: auto; color: var(--fg-muted); font-size: 0.6875rem; line-height: 1rem; } +.tc-storage-plan-loading { display: flex; align-items: center; gap: 0.75rem; min-height: 10rem; justify-content: center; color: var(--fg-muted); font-size: 0.8125rem; } +.tc-storage-plan-loading > div { display: grid; gap: 0.3125rem; } .tc-storage-plan-loading strong { color: var(--fg); font-weight: 500; } -.tc-storage-plan-loading span:not(.tc-spinner) { font-size: 12px; } -.tc-storage-plan-summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } -.tc-storage-plan-summary > div { display: grid; gap: 5px; } -.tc-storage-plan-summary strong { font-size: 27px; font-weight: 500; line-height: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.6px; } -.tc-storage-cleanup .tc-storage-plan-note { color: var(--fg-muted); font-size: 12px; line-height: 18px; margin: 12px 0 0; } -.tc-storage-plan-list { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } -.tc-storage-plan-row { padding: 14px; } +.tc-storage-plan-loading span:not(.tc-spinner) { font-size: 0.75rem; } +.tc-storage-plan-summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; } +.tc-storage-plan-summary > div { display: grid; gap: 0.3125rem; } +.tc-storage-plan-summary strong { font-size: 1.6875rem; font-weight: 500; line-height: 2.125rem; font-variant-numeric: tabular-nums; letter-spacing: -.6px; } +.tc-storage-cleanup .tc-storage-plan-note { color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; margin: 0.75rem 0 0; } +.tc-storage-plan-list { margin-top: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } +.tc-storage-plan-row { padding: 0.875rem; } .tc-storage-plan-row + .tc-storage-plan-row { border-top: 1px solid var(--hairline); } -.tc-storage-plan-kept { padding: 9px 14px; color: var(--fg-muted); font-size: 11px; font-weight: 500; background: var(--hover); border-top: 1px solid var(--hairline); } -.tc-storage-plan-choice { display: flex; align-items: center; gap: 10px; min-height: 30px; } +.tc-storage-plan-kept { padding: 0.5625rem 0.875rem; color: var(--fg-muted); font-size: 0.6875rem; font-weight: 500; background: var(--hover); border-top: 1px solid var(--hairline); } +.tc-storage-plan-choice { display: flex; align-items: center; gap: 0.625rem; min-height: 1.875rem; } .tc-storage-plan-choice > .tc-checkbox { flex: none; } .tc-storage-plan-choice > .tc-tile { flex: none; } -.tc-storage-plan-lock { width: 16px; display: flex; justify-content: center; flex: none; color: var(--fg-muted); } +.tc-storage-plan-lock { width: 1rem; display: flex; justify-content: center; flex: none; color: var(--fg-muted); } .tc-storage-plan-main { flex: 1; min-width: 0; display: grid; gap: 2px; } -.tc-storage-plan-label { cursor: pointer; min-height: 44px; align-content: center; } +.tc-storage-plan-label { cursor: pointer; min-height: var(--touch); align-content: center; } .tc-storage-plan-choice > .tc-storage-size { align-self: flex-start; padding-top: 2px; } -.tc-storage-plan-explanation { display: grid; gap: 8px; } -.tc-storage-plan-effect { color: var(--fg-muted); font-size: 12px; line-height: 18px; } -.tc-storage-technical { margin: 8px 0 0 26px; font-size: 11px; line-height: 17px; color: var(--fg-muted); } -.tc-storage-technical summary { cursor: pointer; width: fit-content; padding: 6px 0; } -.tc-storage-technical code { display: block; padding: 8px 10px; margin-top: 6px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--hover); overflow-wrap: anywhere; color: var(--fg); } -.tc-storage-plan-locations { margin: 16px 0 0; } -.tc-storage-location-item { padding: 12px 0; } +.tc-storage-plan-explanation { display: grid; gap: 0.5rem; } +.tc-storage-plan-effect { color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; } +.tc-storage-technical { margin: 0.5rem 0 0 1.625rem; font-size: 0.6875rem; line-height: 1.0625rem; color: var(--fg-muted); } +.tc-storage-technical summary { cursor: pointer; width: fit-content; padding: 0.375rem 0; } +.tc-storage-technical code { display: block; padding: 0.5rem 0.625rem; margin-top: 0.375rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--hover); overflow-wrap: anywhere; color: var(--fg); } +.tc-storage-plan-locations { margin: 1rem 0 0; } +.tc-storage-location-item { padding: 0.75rem 0; } .tc-storage-location-item + .tc-storage-location-item { border-top: 1px solid var(--hairline); } -.tc-storage-location-item strong { font-size: 12px; font-weight: 500; color: var(--fg); } -.tc-storage-location-item p { margin: 5px 0; } +.tc-storage-location-item strong { font-size: 0.75rem; font-weight: 500; color: var(--fg); } +.tc-storage-location-item p { margin: 0.3125rem 0; } .tc-storage-plan-row[data-kept] { background: color-mix(in srgb, var(--fg) 2%, transparent); } .tc-storage-plan-row[data-kept] .tc-storage-plan-choice { align-items: flex-start; } .tc-storage-plan-row[data-kept] .tc-storage-plan-lock, .tc-storage-plan-row[data-kept] .tc-storage-plan-choice > .tc-tile { margin-top: 2px; } -.tc-storage-result-summary { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 24px; } -.tc-storage-result-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--ok-soft); color: var(--ok-text); flex: none; } +.tc-storage-result-summary { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0.25rem 0 1.5rem; } +.tc-storage-result-mark { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--ok-soft); color: var(--ok-text); flex: none; } .tc-storage-result-mark[data-danger] { background: var(--danger-soft); color: var(--danger-text); } -.tc-storage-result-summary > div { display: grid; gap: 6px; min-width: 0; } -.tc-storage-result-summary strong { font-size: 15px; font-weight: 500; line-height: 22px; } -.tc-storage-result-summary > div > span { color: var(--fg-muted); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; } +.tc-storage-result-summary > div { display: grid; gap: 0.375rem; min-width: 0; } +.tc-storage-result-summary strong { font-size: 0.9375rem; font-weight: 500; line-height: 1.375rem; } +.tc-storage-result-summary > div > span { color: var(--fg-muted); font-size: 0.8125rem; line-height: 1.25rem; overflow-wrap: anywhere; } .tc-storage-cleanup-steps { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); } -.tc-storage-cleanup-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13px; } +.tc-storage-cleanup-steps li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; font-size: 0.8125rem; } .tc-storage-cleanup-steps li + li { border-top: 1px solid var(--hairline); } .tc-storage-cleanup-steps li > span:first-child { display: flex; color: var(--fg-muted); } -.tc-storage-policy-section + .tc-storage-policy-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); } +.tc-storage-policy-section + .tc-storage-policy-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); } /* Related copy shares a column. Gaps survive the shell's paragraph reset; intrinsic icon columns avoid reserving space beside smaller marks. */ -.tc-storage-policy-heading { display: grid; grid-template-columns: max-content minmax(0, 1fr) 44px; align-items: flex-start; gap: 12px; } -.tc-storage-policy-copy { display: grid; gap: 12px; min-width: 0; } -.tc-storage-policy-intro { display: grid; gap: 5px; } -.tc-storage-policy-heading .tc-hint { line-height: 19px; } -.tc-storage-policy-heading .tc-storage-toggle { width: 44px; height: 44px; margin-top: -12px; } -.tc-storage-policy-heading .tc-switch::before { content: ""; position: absolute; inset: -14px -9px; } -.tc-storage-policy-state { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; color: var(--fg-muted); } +.tc-storage-policy-heading { display: grid; grid-template-columns: max-content minmax(0, 1fr) var(--touch); align-items: flex-start; gap: 0.75rem; } +.tc-storage-policy-copy { display: grid; gap: 0.75rem; min-width: 0; } +.tc-storage-policy-intro { display: grid; gap: 0.3125rem; } +.tc-storage-policy-heading .tc-hint { line-height: 1.1875rem; } +.tc-storage-policy-heading .tc-storage-toggle { width: var(--touch); height: var(--touch); margin-top: calc(0.625rem - var(--touch) / 2); } +.tc-storage-policy-heading .tc-switch::before { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: var(--touch); height: var(--touch); } +.tc-storage-policy-state { display: flex; align-items: flex-start; gap: 0.375rem; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-storage-policy-state > .tc-icon { flex: none; margin-top: 2px; } -.tc-storage-limits-trigger { display: flex; gap: 8px; align-items: center; width: 100%; appearance: none; color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; margin-top: 16px; } +.tc-storage-limits-trigger { display: flex; gap: 0.5rem; align-items: center; width: 100%; appearance: none; color: var(--fg); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.75rem; margin-top: 1rem; } .tc-storage-limits-trigger > .tc-small { margin-left: auto; } .tc-storage-limits-trigger:hover { background: var(--hover); } .tc-storage-limits-trigger:focus-visible, .tc-storage-technical summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .tc-storage-limits-trigger[aria-expanded="true"] > .tc-icon { rotate: 180deg; } -.tc-storage-limits { padding-top: 12px; } +.tc-storage-limits { padding-top: 0.75rem; } .tc-storage-limits[hidden] { display: none; } -.tc-storage-limit-list { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); } -.tc-storage-limit-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 12px; padding: 8px 12px; } +.tc-storage-limit-list { margin: 0.75rem 0; border: 1px solid var(--border); border-radius: var(--radius-lg); } +.tc-storage-limit-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; } .tc-storage-limit-row + .tc-storage-limit-row { border-top: 1px solid var(--hairline); } -.tc-storage-limit-label { display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: 13px; line-height: 19px; cursor: pointer; } +.tc-storage-limit-label { display: flex; align-items: center; gap: 0.5625rem; min-height: 2.25rem; font-size: 0.8125rem; line-height: 1.1875rem; cursor: pointer; } .tc-storage-limit-label > .tc-checkbox { flex: none; } -.tc-storage-policy-detail { color: var(--fg-muted); font-size: 12px; line-height: 18px; } -.tc-storage-settings .tc-storage-notice { margin-top: 20px; scroll-margin-bottom: 16px; } +.tc-storage-policy-detail { color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; } +.tc-storage-settings .tc-storage-notice { margin-top: 1.25rem; scroll-margin-bottom: 16px; } @media (max-width: 639.98px) { - .tc-storage-cache-row { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; padding: 14px 12px; align-items: start; } - .tc-storage-cache-row > .tc-tile { grid-column: 1; grid-row: 1; width: 24px; height: 24px; } + .tc-storage-cache-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; column-gap: 0.625rem; row-gap: 0.25rem; padding: 0.875rem 0.75rem; align-items: start; } + .tc-storage-cache-row > .tc-tile { grid-column: 1; grid-row: 1; width: 1.5rem; height: 1.5rem; } .tc-storage-cache-row > .tc-row-main { grid-column: 2; grid-row: 1 / 3; } .tc-storage-cache-row > .tc-storage-cache-size { grid-column: 3; grid-row: 1; } .tc-storage-cache-row > .tc-row-actions { grid-column: 3; grid-row: 2; justify-content: flex-end; } - .tc-storage-cache-row > .tc-row-actions .tc-btn { min-height: 36px; } - .tc-storage-cache-summary { padding: 12px; } - .tc-storage-disk-head > .tc-small { font-size: 12px; } + .tc-storage-cache-row > .tc-row-actions .tc-btn { min-height: 2.25rem; } + .tc-storage-cache-summary { padding: 0.75rem; } + .tc-storage-disk-head > .tc-small { font-size: 0.75rem; } .tc-layer.tc-layer--center > .tc-storage-cleanup, .tc-layer.tc-layer--center > .tc-storage-settings { width: 100%; max-width: none; max-height: 90dvh; } .tc-layer.tc-layer--center > .tc-storage-cleanup::before, .tc-layer.tc-layer--center > .tc-storage-settings::before { display: none; } - .tc-storage-dialog-head { padding: 20px; } - .tc-storage-dialog-head > .tc-btn { min-width: 44px; min-height: 44px; margin: -10px -10px 0 0; } - .tc-storage-dialog-scroll { padding: 18px 20px 22px; } - .tc-storage-dialog-foot { padding: 12px 20px max(16px, env(safe-area-inset-bottom)); } - .tc-storage-dialog-foot .tc-btn { min-height: 40px; } + .tc-storage-dialog-head { padding: 1.25rem; } + .tc-storage-dialog-head > .tc-btn { min-width: var(--touch); min-height: var(--touch); margin: -0.625rem -0.625rem 0 0; } + .tc-storage-dialog-scroll { padding: 1.125rem 1.25rem 1.375rem; } + .tc-storage-dialog-foot { padding: 0.75rem 1.25rem max(1rem, env(safe-area-inset-bottom)); } + .tc-storage-dialog-foot .tc-btn { min-height: 2.5rem; } .tc-storage-save-hint { display: none; } .tc-storage-dialog-foot .tc-btn--primary { flex: 1; } - .tc-storage-plan-choice { gap: 8px; } + .tc-storage-plan-choice { gap: 0.5rem; } .tc-storage-plan-choice > .tc-tile { display: none; } - .tc-storage-plan-row { padding: 12px; } - .tc-storage-plan-summary strong { font-size: 25px; } - .tc-storage-policy-heading { gap: 10px; } - .tc-storage-limit-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; padding: 8px 10px; } - .tc-storage-limit-label { min-height: 44px; } + .tc-storage-plan-row { padding: 0.75rem; } + .tc-storage-plan-summary strong { font-size: 1.5625rem; } + .tc-storage-policy-heading { gap: 0.625rem; } + .tc-storage-limit-row { grid-template-columns: minmax(0, 1fr) 5.75rem; gap: 0.5rem; padding: 0.5rem 0.625rem; } + .tc-storage-limit-label { min-height: var(--touch); } } /* Readiness collapsed to one line once everything is done. */ -.tc-ready-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: 18px var(--space-4); } -.tc-ready-line .tc-check-mark { width: 28px; height: 28px; border: 0; background: var(--ok-soft); color: var(--ok-text); } -.tc-ready-line .tc-check-mark .tc-icon { width: 15px; height: 15px; } -.tc-ready-line-title { font-size: 17px; line-height: 24px; font-weight: 600; } +.tc-ready-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: 1.125rem var(--space-4); } +.tc-ready-line .tc-check-mark { width: 1.75rem; height: 1.75rem; border: 0; background: var(--ok-soft); color: var(--ok-text); } +.tc-ready-line .tc-check-mark .tc-icon { width: 0.9375rem; height: 0.9375rem; } +.tc-ready-line-title { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } /* Readiness: the heading stack, and the phone's full-width next step. */ .tc-ready-heading { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } @@ -390,30 +390,30 @@ html.tc-locked { overflow: hidden; } .tc-hint--warn { color: var(--warn-text); } /* The pairing ceremony: QR on the right on desktop, first on a phone. */ -.tc-pair-body { gap: 20px; } +.tc-pair-body { gap: 1.25rem; } .tc-pair { display: flex; gap: var(--space-6); align-items: flex-start; } .tc-pair-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } .tc-pair-qr { flex: none; display: flex; flex-direction: column; align-items: center; } -.tc-pair-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: end; padding: 20px var(--space-4); } +.tc-pair-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: end; padding: 1.25rem var(--space-4); } .tc-pair-form-intro { display: flex; flex-direction: column; gap: var(--space-1); grid-column: 1 / -1; } .tc-pair-form-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); } .tc-pair-form-note { grid-column: 1 / -1; } /* The label field, the lifetime and the button stand the same height, on one line. */ .tc-pair-form .tc-input { height: var(--control-md); } -.tc-pair-form .tc-seg { padding: 3px; } -.tc-pair-form .tc-seg button { height: 24px; } +.tc-pair-form .tc-seg { padding: 0.1875rem; } +.tc-pair-form .tc-seg button { height: 1.5rem; } .tc-pair-phone-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } -.tc-pair-done-text { display: flex; flex-direction: column; gap: 6px; align-items: center; } +.tc-pair-done-text { display: flex; flex-direction: column; gap: 0.375rem; align-items: center; } .tc-pair-done-text .tc-page-lede { max-width: 30ch; } .tc-pair-done-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; } .tc-pair-done .tc-steps { align-self: stretch; } -.tc-pair-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 22px var(--space-4) 18px; } -.tc-pair-done .tc-empty-media { margin: 10px 0 2px; } -.tc-pair-done-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; } +.tc-pair-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.125rem; padding: 1.375rem var(--space-4) 1.125rem; } +.tc-pair-done .tc-empty-media { margin: 0.625rem 0 2px; } +.tc-pair-done-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; } @media (max-width: 1023.98px) { .tc-pair { flex-direction: column; align-items: stretch; } .tc-pair-qr { order: -1; } - .tc-pair-qr .tc-qr svg { width: 200px; height: 200px; } + .tc-pair-qr .tc-qr svg { width: 12.5rem; height: 12.5rem; } .tc-pair-form, .tc-pair-form-fields { grid-template-columns: minmax(0, 1fr); } .tc-pair-form .tc-seg { width: 100%; } .tc-pair-form .tc-seg button { flex: 1; justify-content: center; } @@ -433,69 +433,73 @@ html.tc-locked { overflow: hidden; } @media (max-width: 639.98px) { .tc-port-panel { flex-direction: column; align-items: stretch; } .tc-port-panel .tc-qr { align-self: center; } - .tc-port-panel .tc-qr svg { width: 168px; height: 168px; } + .tc-port-panel .tc-qr svg { width: 10.5rem; height: 10.5rem; } } /* A log: Recent on Overview, Activity's finished lines. */ .tc-log { list-style: none; margin: 0; padding: 0; } -.tc-log li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px var(--space-4); font-size: 14px; } +.tc-log li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.6875rem var(--space-4); font-size: 0.875rem; } .tc-log li + li { border-top: 1px solid var(--hairline); } .tc-log .tc-icon { color: var(--fg-muted); } -.tc-log time { font-size: 12px; line-height: 1; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } +.tc-log time { font-size: 0.75rem; line-height: 1; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 639.98px) { - .tc-log li { grid-template-columns: 16px minmax(0, 1fr); row-gap: 2px; align-items: start; } + .tc-log li { grid-template-columns: 1rem minmax(0, 1fr); row-gap: 2px; align-items: start; } .tc-log li > .tc-icon { margin-top: 2px; } .tc-log li > .tc-truncate { white-space: normal; } - .tc-log li > time { grid-column: 2; line-height: 16px; } + .tc-log li > time { grid-column: 2; line-height: 1rem; } } /* Link rows: the phone's More page. */ -.tc-linkrow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 var(--space-4); color: var(--fg); text-decoration: none !important; font-size: 16px; background: none; border: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left; } +.tc-linkrow { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0 var(--space-4); color: var(--fg); text-decoration: none !important; font-size: 1rem; background: none; border: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left; } .tc-linkrow > .tc-icon { color: var(--fg-muted); } -.tc-linkrow-aside { margin-left: auto; font-size: 14px; color: var(--fg-muted); } -.tc-linkrow > .tc-icon:last-child:not(:first-child) { width: 16px; height: 16px; } +.tc-linkrow-aside { margin-left: auto; font-size: 0.875rem; color: var(--fg-muted); } +.tc-linkrow > .tc-icon:last-child:not(:first-child) { width: 1rem; height: 1rem; } .tc-linkrow-aside + .tc-icon { margin-left: 0; } .tc-linkrow--danger, .tc-linkrow--danger > .tc-icon { color: var(--danger-text); } .tc-group > .tc-linkrow + .tc-linkrow { border-top: 1px solid var(--hairline); } .tc-linkrow .tc-seg { margin-left: auto; } -.tc-linkrow .tc-seg button { height: 30px; padding: 0 12px; font-size: 14px; } +.tc-linkrow .tc-seg button { height: 1.875rem; padding: 0 0.75rem; font-size: 0.875rem; } /* Key/value: a value that is prose, and inline actions that should not grow the row. */ -.tc-kv .tc-btn--xs { margin-block: -4px; } -.tc-kv-aside { color: var(--fg-muted); font-size: 12px; } +.tc-kv .tc-btn--xs { margin-block: -0.25rem; } +.tc-kv-aside { color: var(--fg-muted); font-size: 0.75rem; } .tc-kv > dd .tc-kv-end { margin-left: auto; } @media (max-width: 639.98px) { .tc-kv { grid-template-columns: minmax(0, 1fr); } .tc-kv > dd { padding-top: 0; border-top: 0; } - .tc-kv > dt { padding-bottom: 4px; } + .tc-kv > dt { padding-bottom: 0.25rem; } } .tc-status.tc-status--prose { display: block; } /* A status line's words wrap beside their dot instead of dropping under it. */ .tc-status-text { flex: 1 1 0%; min-width: 0; overflow-wrap: anywhere; } -.tc-row-details { position: relative; display: inline; padding: 0; margin-left: 4px; border: 0; border-radius: 2px; background: none; color: var(--fg); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } +.tc-row-details { position: relative; display: inline; padding: 0; margin-left: 0.25rem; border: 0; border-radius: 2px; background: none; color: var(--fg); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .tc-row-details::after { content: ""; position: absolute; inset: -13px -4px; } .tc-row-details:hover { color: var(--accent-text); } .tc-row-details:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } -.tc-update-check--label { min-width: 168px; } -.tc-update-check > .tc-spinner { width: 16px; height: 16px; flex: 0 0 16px; } +/* Reserve the idle label's actual width, including custom native fonts. The + shorter progress label occupies the same cell without moving nearby content. */ +.tc-update-check--label { display: inline-grid; min-width: 10.5rem; } +.tc-update-check--label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: inherit; } +.tc-update-check-size { visibility: hidden; pointer-events: none; } +.tc-update-check-content > .tc-spinner { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: 0 -2px; } .tc-check-failures { list-style: none; padding: 0; margin: var(--space-4) 0 0; } -.tc-check-failures > li { padding: var(--space-3) 0; border-top: 1px solid var(--hairline); font-size: 14px; } +.tc-check-failures > li { padding: var(--space-3) 0; border-top: 1px solid var(--hairline); font-size: 0.875rem; } .tc-check-failures strong { display: block; margin-bottom: var(--space-2); font-weight: 500; } -.tc-check-failures summary { width: fit-content; min-height: 24px; padding: 3px 0; color: var(--fg-muted); cursor: pointer; font-size: 12px; line-height: 18px; } -.tc-error-detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; padding: var(--space-3); margin: var(--space-3) 0 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); user-select: text; } +.tc-check-failures summary { width: fit-content; min-height: 1.5rem; padding: 0.1875rem 0; color: var(--fg-muted); cursor: pointer; font-size: 0.75rem; line-height: 1.125rem; } +.tc-error-detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.75rem; line-height: 1.6; padding: var(--space-3); margin: var(--space-3) 0 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); user-select: text; } .tc-version-arrow { color: var(--fg-subtle); } /* An operation inside a row (Updating): narration, figure, bar. */ -.tc-row-op { margin-top: var(--space-2); font-size: 12px; } +.tc-row-op { margin-top: var(--space-2); font-size: 0.75rem; } .tc-row-main > .tc-progress { margin-top: var(--space-2); } -.tc-op-list { display: flex; flex-direction: column; gap: 14px; } -.tc-op--quiet { font-size: 12px; } +.tc-op-list { display: flex; flex-direction: column; gap: 0.875rem; } +.tc-op--quiet { font-size: 0.75rem; } .tc-op--quiet .tc-op-line { color: var(--fg-muted); } .tc-tile--dim { opacity: 0.6; } /* Count the actual leading element, even if a caller also sets plain. */ .tc-row--plain:not(:has(> .tc-tile, > .tc-row-lead)) { grid-template-columns: minmax(0, 1fr) auto; } -.tc-row--key { min-height: 44px; padding-block: var(--space-2); } +.tc-row--key { min-height: var(--touch); padding-block: var(--space-2); } .tc-saved-read { display: flex; align-items: center; gap: var(--space-2); } .tc-row-actions-inline { display: inline-flex; align-items: center; gap: var(--space-2); } .tc-btn--pressed { background: var(--hover); } @@ -522,26 +526,26 @@ html.tc-locked { overflow: hidden; } /* Unlock: the standalone card, full height. */ .tc-standalone { min-height: 100vh; min-height: 100dvh; } -.tc-masthead-in { padding: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } -.tc-masthead .tc-embed-close { margin: -8px -8px 0 0; color: color-mix(in srgb, var(--on-stage) 80%, transparent); --_icon: currentColor; } +.tc-masthead-in { padding: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } +.tc-masthead .tc-embed-close { margin: -0.5rem -0.5rem 0 0; color: color-mix(in srgb, var(--on-stage) 80%, transparent); --_icon: currentColor; } .tc-masthead .tc-embed-close:hover { color: var(--on-stage); background: rgb(255 255 255 / 0.12); } .tc-unlock-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); } -.tc-unlock-actions { display: flex; gap: 8px; flex-wrap: wrap; } +.tc-unlock-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .tc-standalone .tc-note { margin-top: var(--space-6); } .tc-standalone .tc-note code { color: var(--fg); } @media (max-width: 639.98px) { - .tc-standalone { padding: 24px 16px; align-items: flex-start; padding-top: 12vh; } - .tc-standalone-body { padding: 24px 20px; } + .tc-standalone { padding: 1.5rem 1rem; align-items: flex-start; padding-top: 12vh; } + .tc-standalone-body { padding: 1.5rem 1.25rem; } .tc-unlock-actions { flex-direction: column; } .tc-unlock-actions .tc-btn { width: 100%; } .tc-unlock-actions .tc-btn:not(.tc-btn--primary) { border-color: transparent; background: transparent; box-shadow: none; } } -.tc-reveal { height: 26px; width: 26px; } +.tc-reveal { height: 1.625rem; width: 1.625rem; } /* Skeleton rows for the first paint, before /status has answered. */ -.tc-skel-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px var(--space-4); } +.tc-skel-row { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; padding: 0.75rem var(--space-4); } .tc-skel--tile { width: var(--monogram); height: var(--monogram); flex: none; } -.tc-skel--line { width: 120px; } +.tc-skel--line { width: 7.5rem; } .tc-skel-row + .tc-skel-row { border-top: 1px solid var(--hairline); } /* ----------------------------------------------------------- layers -- */ @@ -552,24 +556,24 @@ html.tc-locked { overflow: hidden; } the overlay's place above the page. */ .tc-layer > .tc-backdrop { z-index: 0; animation: tc-fade var(--dur-base) ease-out; } .tc-layer--sheet { justify-content: flex-end; } -.tc-layer--sheet > .tc-sheet { position: relative; z-index: 1; margin: 8px; height: calc(100% - 16px); max-height: calc(100% - 16px); +.tc-layer--sheet > .tc-sheet { position: relative; z-index: 1; margin: 0.5rem; height: calc(100% - 16px); max-height: calc(100% - 16px); animation: tc-slide-in var(--dur-base) cubic-bezier(0.32, 0.72, 0, 1); } -.tc-layer--center { align-items: center; justify-content: center; padding: 16px; } +.tc-layer--center { align-items: center; justify-content: center; padding: 1rem; } .tc-layer--center > .tc-dialog { position: relative; z-index: 1; animation: tc-pop var(--dur-base) ease-out; max-height: calc(100% - 32px); overflow: auto; } .tc-layer--center > .tc-error-dialog { display: flex; flex-direction: column; overflow: hidden; } .tc-error-dialog .tc-dialog-body { min-height: 0; overflow-y: auto; } .tc-error-dialog .tc-dialog-foot { flex: none; } -.tc-layer--palette { align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; } +.tc-layer--palette { align-items: flex-start; justify-content: center; padding: 10vh 1rem 1rem; } .tc-layer--palette > .tc-palette { position: relative; z-index: 1; animation: tc-pop var(--dur-base) ease-out; } -.tc-palette .tc-listbox { max-height: min(400px, 56vh); } -.tc-palette-empty { padding: 20px 16px 24px; font-size: 14px; color: var(--fg-muted); text-align: center; } +.tc-palette .tc-listbox { max-height: min(25rem, 56vh); } +.tc-palette-empty { padding: 1.25rem 1rem 1.5rem; font-size: 0.875rem; color: var(--fg-muted); text-align: center; } /* Popover menus position themselves against their trigger; no backdrop. */ .tc-layer--menu { z-index: var(--z-menu); pointer-events: none; } .tc-layer--menu > .tc-menu { position: fixed; pointer-events: auto; animation: tc-pop var(--dur-fast) ease-out; transform-origin: top right; } /* A menu sheet's title lines up with its items: the same inset on the left. */ -.tc-menu-head { display: flex; align-items: center; gap: 12px; padding: 4px 20px 12px; } +.tc-menu-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 1.25rem 0.75rem; } .tc-menu-head-text { display: flex; flex-direction: column; min-width: 0; } -.tc-menu-head-title { font-size: 17px; line-height: 24px; font-weight: 600; } +.tc-menu-head-title { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } /* Under 1024px every sheet, menu and dialog rises from the bottom. */ @media (max-width: 1023.98px) { .tc-layer--sheet, .tc-layer--center, .tc-layer--bottom { align-items: flex-end; justify-content: stretch; padding: 0; } @@ -579,30 +583,30 @@ html.tc-locked { overflow: hidden; } animation: tc-rise-sheet 300ms cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: env(safe-area-inset-bottom, 0px); } .tc-layer--center > .tc-dialog .tc-dialog-foot { flex-direction: column-reverse; } /* Every dialog rising from the bottom carries a sheet's handle. */ - .tc-layer--center > .tc-dialog::before { content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--border-strong); } + .tc-layer--center > .tc-dialog::before { content: ""; display: block; width: 2.25rem; height: 0.25rem; margin: 0.5rem auto 0; border-radius: 2px; background: var(--border-strong); } /* No keyboard here to name keys for. */ .tc-root[data-density="touch"] .tc-palette-foot { display: none; } .tc-layer--center > .tc-dialog .tc-dialog-foot .tc-btn { width: 100%; } - .tc-layer--palette { padding: 8px; } + .tc-layer--palette { padding: 0.5rem; } .tc-layer--palette > .tc-palette { width: 100%; } } .tc-layer > .tc-sheet--bottom { position: relative; z-index: 1; align-self: flex-end; } -.tc-sheet--bottom .tc-sheet-body { padding-bottom: 8px; } -.tc-sheet-actions { display: flex; flex-direction: column; padding: 0 12px 4px; } -.tc-sheet-actions .tc-menu-item { min-height: 40px; font-size: 16px; padding: 4px 8px; } -.tc-sheet-actions .tc-menu-sep { margin: 6px 8px; } +.tc-sheet--bottom .tc-sheet-body { padding-bottom: 0.5rem; } +.tc-sheet-actions { display: flex; flex-direction: column; padding: 0 0.75rem 0.25rem; } +.tc-sheet-actions .tc-menu-item { min-height: 2.5rem; font-size: 1rem; padding: 0.25rem 0.5rem; } +.tc-sheet-actions .tc-menu-sep { margin: 0.375rem 0.5rem; } .tc-sheet-cancel { padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .tc-sheet--menu { overflow: hidden; } .tc-sheet--menu > .tc-menu-head, .tc-sheet--menu > .tc-sheet-cancel, .tc-sheet--menu > .tc-menu-foot { flex: none; } .tc-sheet--menu > .tc-sheet-actions { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .tc-sheet--menu > .tc-sheet-actions > * { flex: none; } -.tc-sheet--menu > .tc-menu-foot { margin: 0 20px; padding: 8px 0; overflow-wrap: anywhere; } -.tc-sheet .tc-sheet-foot-note { margin-right: auto; font-size: 12px; color: var(--fg-muted); display: inline-flex; gap: 6px; align-items: center; } +.tc-sheet--menu > .tc-menu-foot { margin: 0 1.25rem; padding: 0.5rem 0; overflow-wrap: anywhere; } +.tc-sheet .tc-sheet-foot-note { margin-right: auto; font-size: 0.75rem; color: var(--fg-muted); display: inline-flex; gap: 0.375rem; align-items: center; } .tc-layer[data-closing] > * { animation: tc-fade-out 140ms ease-in forwards !important; } /* Dialog detail list: what is removed, kept, and stays. */ -.tc-consequences { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius-lg); } -.tc-consequences li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; font-size: 12px; line-height: 16px; color: var(--fg); } +.tc-consequences { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius-lg); } +.tc-consequences li { display: flex; gap: 0.625rem; align-items: center; padding: 0.5625rem 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--fg); } .tc-consequences li + li { border-top: 1px solid var(--hairline); } .tc-consequences .tc-icon { color: var(--fg-muted); } @@ -613,7 +617,7 @@ html.tc-locked { overflow: hidden; } .tc-signin-open { display: flex; gap: var(--space-2); } .tc-signin-code { display: flex; gap: var(--space-2); } .tc-signin-code .tc-input { flex: 1 1 auto; min-width: 0; } -.tc-log-tail { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); font: 400 12px/18px var(--font-mono); color: var(--fg-muted); white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; } +.tc-log-tail { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); font: 400 0.75rem/1.125rem var(--font-mono); color: var(--fg-muted); white-space: pre-wrap; word-break: break-word; max-height: 7.5rem; overflow: auto; } .tc-saved-keys-wrap { gap: var(--space-2); } /* A device name is a small edit: a compact dialog, with the device beside @@ -626,23 +630,23 @@ html.tc-locked { overflow: hidden; } .tc-access-pending { color: var(--fg); } .tc-device-rename-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .tc-device-rename-head > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } -.tc-device-rename-head > .tc-btn { flex: none; margin: -4px 0 0; } +.tc-device-rename-head > .tc-btn { flex: none; margin: -0.25rem 0 0; } .tc-device-rename-context { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-sunken); } .tc-device-rename-context > .tc-tile { flex: none; } -.tc-device-rename-name { font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; } +.tc-device-rename-name { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; overflow-wrap: anywhere; } .tc-device-rename-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .tc-device-rename-label > .tc-hint { font-variant-numeric: tabular-nums; } .tc-device-rename .tc-input { height: var(--control-lg); } -.tc-device-rename-error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--danger-text); font-size: 12px; line-height: 18px; } +.tc-device-rename-error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--danger-text); font-size: 0.75rem; line-height: 1.125rem; } .tc-device-rename-error > .tc-icon { flex: none; margin-top: 1px; } .tc-device-rename-foot { padding-top: 0; } -.tc-device-rename-foot [data-key="device-save"] { min-width: 120px; } +.tc-device-rename-foot [data-key="device-save"] { min-width: 7.5rem; } @media (max-width: 1023.98px) { - .tc-device-rename-body { padding: 20px 20px 16px; } + .tc-device-rename-body { padding: 1.25rem 1.25rem 1rem; } .tc-root[data-density="touch"] .tc-device-rename .tc-input { height: var(--touch); } .tc-root[data-density="touch"] .tc-device-rename .tc-btn { --_h: var(--touch); } - .tc-layer--center > .tc-device-rename .tc-device-rename-foot { flex-direction: row; padding: 0 20px 20px; } + .tc-layer--center > .tc-device-rename .tc-device-rename-foot { flex-direction: row; padding: 0 1.25rem 1.25rem; } .tc-layer--center > .tc-device-rename .tc-device-rename-foot .tc-btn { flex: 1; width: auto; } } @media (max-width: 1023.98px) { @@ -654,73 +658,73 @@ html.tc-locked { overflow: hidden; } /* Added tools: the section's filter beside its button, the empty state's suggestions, and the Add a tool sheet. */ .tc-section-actions { gap: var(--space-2); } -.tc-tool-filter { width: 160px; } -.tc-tool-filter .tc-input { padding-left: 30px; } +.tc-tool-filter { width: 10rem; } +.tc-tool-filter .tc-input { padding-left: 1.875rem; } .tc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } -.tc-chip-btn { height: var(--control-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--fg); - font: 400 13px/1 var(--font-mono); cursor: pointer; } +.tc-chip-btn { height: var(--control-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 62.4375rem; background: var(--surface); color: var(--fg); + font: 400 0.8125rem/1 var(--font-mono); cursor: pointer; } .tc-chip-btn:hover { background: var(--hover); } .tc-chip-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .tc-empty-cta { margin-top: var(--space-3); } /* A listbox is a flex column with a maximum height: its options keep their own height and the list scrolls, rather than squeezing them together. */ .tc-listbox > * { flex: none; } -.tc-listbox--rich .tc-option { align-items: flex-start; padding-block: 8px; } -.tc-sheet .tc-combobox .tc-listbox--rich { max-height: min(400px, 46vh); } +.tc-listbox--rich .tc-option { align-items: flex-start; padding-block: 0.5rem; } +.tc-sheet .tc-combobox .tc-listbox--rich { max-height: min(25rem, 46vh); } .tc-option--rich > .tc-tile { margin-top: 1px; } .tc-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } -.tc-option-name { line-height: 20px; } -.tc-option-desc { font-size: 12px; line-height: 16px; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } +.tc-option-name { line-height: 1.25rem; } +.tc-option-desc { font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tc-option[aria-disabled="true"] { cursor: default; opacity: 0.6; } .tc-option[aria-disabled="true"]:hover { background: none; } -.tc-option-meta .tc-icon { width: 12px; height: 12px; } +.tc-option-meta .tc-icon { width: 0.75rem; height: 0.75rem; } /* What a match provides, or why it cannot be picked: wrapped between items, never inside one, and never wider than the name it sits beside. */ -.tc-listbox--rich .tc-option-meta { flex: none; max-width: 40%; flex-wrap: wrap; justify-content: flex-end; column-gap: 6px; line-height: 20px; } +.tc-listbox--rich .tc-option-meta { flex: none; max-width: 40%; flex-wrap: wrap; justify-content: flex-end; column-gap: 0.375rem; line-height: 1.25rem; } .tc-listbox--rich .tc-option-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* A release's labels - how new, newest, installed, on the volume - one line, dot-separated. */ .tc-listbox--releases .tc-option-meta { flex: none; gap: 0; white-space: nowrap; } -.tc-listbox--releases .tc-option-meta > span + span::before { content: "·"; padding: 0 6px; } -.tc-combobox-note { display: flex; align-items: center; gap: var(--space-2); padding: 10px 12px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--fg-muted); } +.tc-listbox--releases .tc-option-meta > span + span::before { content: "·"; padding: 0 0.375rem; } +.tc-combobox-note { display: flex; align-items: center; gap: var(--space-2); padding: 0.625rem 0.75rem; border-top: 1px solid var(--hairline); font-size: 0.8125rem; color: var(--fg-muted); } /* A sentence over a row of examples. The sentence's text and code flow as one line that wraps, rather than each becoming a flex item of its own. */ -.tc-combobox-note--stack { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; line-height: 1.45; } -.tc-combobox-note--stack .tc-chips { justify-content: flex-start; margin-top: 0; gap: 6px; } -.tc-combobox-note--stack .tc-chip-btn { height: var(--control-xs, 24px); padding: 0 10px; font-size: 12px; } +.tc-combobox-note--stack { flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 0.75rem; line-height: 1.45; } +.tc-combobox-note--stack .tc-chips { justify-content: flex-start; margin-top: 0; gap: 0.375rem; } +.tc-combobox-note--stack .tc-chip-btn { height: var(--control-xs, 1.5rem); padding: 0 0.625rem; font-size: 0.75rem; } .tc-tool-picked { display: flex; align-items: flex-start; gap: var(--space-3); } .tc-tool-picked-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .tc-kv--sheet { border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius-lg); } -.tc-kv--sheet > dt, .tc-kv--sheet > dd { padding: 8px 12px; font-size: 13px; } +.tc-kv--sheet > dt, .tc-kv--sheet > dd { padding: 0.5rem 0.75rem; font-size: 0.8125rem; } .tc-kv--sheet > dd { flex-wrap: wrap; overflow-wrap: anywhere; } .tc-seg--fill { width: 100%; } .tc-seg--fill > button { flex: 1 1 0; justify-content: center; } @media (max-width: 639.98px) { - .tc-tool-filter { width: 112px; } + .tc-tool-filter { width: 7rem; } } /* Combobox (provider picker) inside a sheet. */ .tc-combobox { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-xs); overflow: hidden; } -[data-theme="dark"] .tc-combobox { background: oklch(1 0 0 / 0.0256); } +[data-theme="dark"] .tc-combobox { background: color-mix(in srgb, var(--border-strong) 32%, transparent); } .tc-combobox:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent); } -.tc-combobox .tc-palette-input { height: 38px; padding: 0 10px; } -.tc-combobox .tc-palette-input input { font-size: 14px; } -.tc-combobox .tc-listbox { border-top: 1px solid var(--hairline); padding: 4px; max-height: 220px; } +.tc-combobox .tc-palette-input { height: 2.375rem; padding: 0 0.625rem; } +.tc-combobox .tc-palette-input input { font-size: 0.875rem; } +.tc-combobox .tc-listbox { border-top: 1px solid var(--hairline); padding: 0.25rem; max-height: 13.75rem; } .tc-saved-keys { border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius-xl); } -.tc-saved-keys > div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; } +.tc-saved-keys > div { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.75rem; font-size: 0.875rem; } .tc-saved-keys > div + div { border-top: 1px solid var(--hairline); } /* ---------------------------------------------------------- toaster -- */ -.tc-toaster { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; +.tc-toaster { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; pointer-events: none; /* Reduced motion sets a duration on every element. The host must still hide immediately when a dialog owns the surface; individual toasts animate. */ transition: none; } .tc-toaster > .tc-toast { pointer-events: auto; transition: opacity var(--dur-base), translate var(--dur-base); } .tc-toaster > .tc-toast[data-leaving] { opacity: 0; translate: 0 6px; } -.tc-toast .tc-btn { margin: -6px -4px -6px 4px; } +.tc-toast .tc-btn { margin: -0.375rem -0.25rem -0.375rem 0.25rem; } /* A retained error must not cover the actions when its retry opens a modal. */ .tc-root:has(.tc-layer [role="alertdialog"][aria-modal="true"]) .tc-toaster { display: none; } @media (max-width: 1023.98px) { - .tc-toaster { left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); align-items: center; } + .tc-toaster { left: 1rem; right: 1rem; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); align-items: center; } } /* ----------------------------------------------------------- motion -- */ @@ -733,7 +737,7 @@ html.tc-locked { overflow: hidden; } .tc-layer > *, .tc-layer--sheet > .tc-sheet, .tc-toaster > .tc-toast { animation: none !important; transition: none !important; } } /* T3 Code's release on Updates: a row like any other, then its channel. */ -.tc-runtime-mark { width: var(--monogram); height: var(--monogram); border-radius: 5px; align-self: start; margin-top: 0; } +.tc-runtime-mark { width: var(--monogram); height: var(--monogram); border-radius: 0.3125rem; align-self: start; margin-top: 0; } /* The channel sits under T3 Code's name, its text level with the name's. */ .tc-runtime-channel { grid-template-columns: minmax(0, 1fr) auto; padding-left: calc(var(--space-4) + var(--monogram) + var(--space-3)); } .tc-runtime-channel .tc-seg { flex: none; } @@ -744,77 +748,77 @@ html.tc-locked { overflow: hidden; } .tc-runtime-channel { grid-template-columns: minmax(0, 1fr); } .tc-runtime-channel-actions { width: 100%; } .tc-runtime-channel .tc-seg { display: flex; flex: 1 1 auto; } - .tc-runtime-channel .tc-seg button { flex: 1; min-height: 32px; justify-content: center; } + .tc-runtime-channel .tc-seg button { flex: 1; min-height: 2rem; justify-content: center; } } /* A switch keeps a comfortable target without growing its row: its label is the target around it, and a press anywhere on it presses the switch. */ .tc-switch-hit { display: inline-grid; place-items: center; min-width: var(--control-sm); height: var(--control-sm); padding: 0 2px; cursor: pointer; } -.tc-switch-hit .tc-switch { --_t: 18px; } +.tc-switch-hit .tc-switch { --_t: 1.125rem; } .tc-switch:disabled { opacity: var(--opacity-disabled); cursor: default; } -.tc-root[data-density="touch"] .tc-switch-hit { min-width: 44px; height: 32px; } +.tc-root[data-density="touch"] .tc-switch-hit { min-width: var(--touch); height: 2rem; } /* A path beside a row's name, and a URL with its own Copy. */ .tc-row-path { color: var(--fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-url-line { align-items: center; flex-wrap: nowrap; gap: 2px; } .tc-url-line > .tc-mono { color: var(--fg); } -.tc-url-line > .tc-btn { margin: -4px 0; } +.tc-url-line > .tc-btn { margin: -0.25rem 0; } .tc-url-source { flex: none; color: var(--fg-muted); } .tc-pair-form-note.tc-hint { display: flex; align-items: center; gap: var(--space-2); } /* A shell command, whole: it wraps rather than scrolls, and copies in one press. */ -.tc-cmd { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); padding: 10px 6px 10px 12px; +.tc-cmd { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); padding: 0.625rem 0.375rem 0.625rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); } -.tc-cmd-text { flex: 1 1 auto; min-width: 0; margin: 0; padding: 3px 0 2px; font: 400 12px/18px var(--font-mono); color: var(--fg); +.tc-cmd-text { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0.1875rem 0 2px; font: 400 0.75rem/1.125rem var(--font-mono); color: var(--fg); white-space: pre; overflow-x: auto; user-select: all; scrollbar-width: thin; } .tc-cmd > .tc-btn { flex: none; margin: -2px 0; } /* Numbered steps, each with its command under its sentence. */ -.tc-fix-steps { margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: fix-step; display: flex; flex-direction: column; gap: var(--space-4); font-size: 14px; line-height: 20px; } -.tc-fix-steps > li { counter-increment: fix-step; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2) var(--space-3); } -.tc-fix-steps > li::before { content: counter(fix-step); grid-row: 1; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; - border: 1px solid var(--border-strong); color: var(--fg-muted); font: 500 10px/1 var(--font-mono); } +.tc-fix-steps { margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: fix-step; display: flex; flex-direction: column; gap: var(--space-4); font-size: 0.875rem; line-height: 1.25rem; } +.tc-fix-steps > li { counter-increment: fix-step; display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); } +.tc-fix-steps > li::before { content: counter(fix-step); grid-row: 1; width: 1.125rem; height: 1.125rem; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; + border: 1px solid var(--border-strong); color: var(--fg-muted); font: 500 0.625rem/1 var(--font-mono); } .tc-fix-steps > li > * { grid-column: 2; min-width: 0; } .tc-fix-steps code { white-space: nowrap; } .tc-volume-fix { width: min(560px, calc(100% - 32px)); } .tc-auto-schedule { width: min(440px, calc(100% - 32px)); } .tc-auto-schedule .tc-storage-budgets { margin: var(--space-4) 0 var(--space-1); } -.tc-auto-schedule .tc-storage-input > input { padding-right: 76px; } +.tc-auto-schedule .tc-storage-input > input { padding-right: 4.75rem; } /* The phone's More: a page's state beside its name. */ .tc-linkrow-label { min-width: 0; flex: 0 0 auto; max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-linkrow > .tc-badge { margin-left: auto; flex: none; } /* Context editors: center the workspace on desktop; retain phone sheets. */ -.tc-layer--center > .tc-context-sheet { position: relative; z-index: 1; width: min(760px, 100%); max-height: calc(100dvh - 64px); animation: tc-pop var(--dur-base) ease-out; } +.tc-layer--center > .tc-context-sheet { position: relative; z-index: 1; width: min(47.5rem, 100%); max-height: calc(100dvh - 64px); animation: tc-pop var(--dur-base) ease-out; } .tc-context-sheet .tc-sheet-body { min-height: 0; gap: var(--space-3); } .tc-context-sheet .tc-sheet-head, .tc-context-sheet .tc-sheet-foot { flex-shrink: 0; } .tc-context-sheet .tc-sheet-foot { flex-wrap: wrap; } -.tc-context-sheet .tc-input--area { box-sizing: border-box; width: 100%; min-height: min(42dvh, 420px); resize: vertical; font-family: var(--font-mono); line-height: 1.6; } +.tc-context-sheet .tc-input--area { box-sizing: border-box; width: 100%; min-height: min(42dvh, 26.25rem); resize: vertical; font-family: var(--font-mono); line-height: 1.6; } .tc-context-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); } .tc-editor-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .tc-editor-toolbar .tc-label { margin: 0; } .tc-editor-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; } -.tc-editor-area { padding: 12px 14px; tab-size: 2; } +.tc-editor-area { padding: 0.75rem 0.875rem; tab-size: 2; } .tc-editor-meta { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--space-4); - font-size: 12px; line-height: 18px; color: var(--fg-muted); } + font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-editor-meta > span:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Tabs under a page's head: the page in two halves, each at its own address. */ .tc-tabs { display: flex; gap: var(--space-6); padding: 0 var(--space-4); margin-top: calc(var(--space-3) - var(--_gap)); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } -.tc-tab-button { position: relative; height: 36px; padding: 0; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } +.tc-tab-button { position: relative; height: 2.25rem; padding: 0; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; } .tc-tab-button:hover { color: var(--fg); } .tc-tab-button[aria-selected="true"] { color: var(--fg); } .tc-tab-button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--fg); } .tc-tab-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); } .tc-tabpanel { display: flex; flex-direction: column; gap: var(--_gap); min-width: 0; } @media (max-width: 1023.98px) { - .tc-tabs { padding: 0 4px; } + .tc-tabs { padding: 0 0.25rem; } } /* A select as small as the buttons beside it. On a phone it keeps 16px text, which stops iOS zooming in when it opens. */ -.tc-select--sm { height: var(--control-sm); font-size: 13px; padding-left: 9px; } -.tc-root[data-density="touch"] .tc-select--sm { height: 32px; font-size: 16px; } +.tc-select--sm { height: var(--control-sm); font-size: 0.8125rem; padding-left: 0.5625rem; } +.tc-root[data-density="touch"] .tc-select--sm { height: 2rem; font-size: 1rem; } @media (max-width: 1023.98px) { .tc-layer--center > .tc-context-sheet { width: 100%; max-height: 88dvh; animation: tc-rise-sheet 300ms cubic-bezier(0.32, 0.72, 0, 1); } .tc-context-sheet .tc-input--area { min-height: 32dvh; } @@ -822,66 +826,66 @@ html.tc-locked { overflow: hidden; } } /* Instructions & skills: token-based page layouts and controls. */ -.tc-tab-count { font: 400 12px/1 var(--font-mono); color: var(--fg-muted); font-variant-numeric: tabular-nums; } +.tc-tab-count { font: 400 0.75rem/1 var(--font-mono); color: var(--fg-muted); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------- toolbar --- */ -.tc-sk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: -12px; } -.tc-sk-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 200px; } -.tc-sk-search > .tc-icon { position: absolute; left: 10px; color: var(--fg-muted); pointer-events: none; } -.tc-sk-search > .tc-input { height: 32px; padding-left: 32px; padding-right: 36px; } -.tc-sk-search > .tc-kbd { position: absolute; right: 6px; } +.tc-sk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: -0.75rem; } +.tc-sk-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 12.5rem; } +.tc-sk-search > .tc-icon { position: absolute; left: 0.625rem; color: var(--fg-muted); pointer-events: none; } +.tc-sk-search > .tc-input { height: 2rem; padding-left: 2rem; padding-right: 2.25rem; } +.tc-sk-search > .tc-kbd { position: absolute; right: 0.375rem; } .tc-skills-library .tc-btn .tc-btn-value { color: var(--fg-muted); font-weight: 400; } .tc-skills-library .tc-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); color: var(--warn-text); } .tc-skills-library .tc-btn .tc-dot { margin: 0 1px; } -.tc-skills-library .tc-btn .tc-chev { width: 14px; height: 14px; margin: 0 -4px 0 -2px; color: var(--fg-muted); } +.tc-skills-library .tc-btn .tc-chev { width: 0.875rem; height: 0.875rem; margin: 0 -0.25rem 0 -2px; color: var(--fg-muted); } /* ------------------------------------------------------------ notice --- */ -.tc-notice .tc-notice-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; align-self: center; } -.tc-notice code { font-size: 12px; } +.tc-notice .tc-notice-actions { display: flex; gap: 0.375rem; align-items: center; margin-left: auto; align-self: center; } +.tc-notice code { font-size: 0.75rem; } .tc-notice--warn .tc-btn { margin: 0; } /* ----------------------------------------------------------- matrix ---- */ -.tc-mx { --mx-cols: minmax(240px, 1fr) repeat(var(--mx-agent-count, 5), 116px); position: relative; } -.tc-mx-head, .tc-mx-row { display: grid; grid-template-columns: var(--mx-cols); align-items: center; column-gap: 0; padding: 0 8px 0 16px; } -.tc-mx-head { min-height: 56px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2%, var(--surface)); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; } -.tc-mx-head-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-right: 12px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--fg-muted); } -.tc-mx-agent { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 8px 8px; min-width: 0; } -.tc-mx-agent-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--fg); white-space: nowrap; } -.tc-mx-agent-kind { font-size: 12px; line-height: 16px; color: var(--fg-muted); white-space: nowrap; } +.tc-mx { --mx-name-width: 15rem; --mx-agent-width: 7.75rem; --mx-cols: minmax(var(--mx-name-width), 1fr) repeat(var(--mx-agent-count, 5), var(--mx-agent-width)); position: relative; } +.tc-mx-head, .tc-mx-row { display: grid; grid-template-columns: var(--mx-cols); align-items: center; column-gap: 0; padding: 0 0.5rem 0 1rem; } +.tc-mx-head { min-height: 3.5rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2%, var(--surface)); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; } +.tc-mx-head-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-right: 0.75rem; min-width: 0; font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); } +.tc-mx-agent { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem 0.25rem 0.5rem 0.5rem; min-width: 0; } +.tc-mx-agent-name { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.125rem; color: var(--fg); white-space: nowrap; } +.tc-mx-agent-kind { font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); white-space: nowrap; } .tc-mx-columns { color: var(--fg-muted); font-weight: 400; flex-shrink: 0; } -.tc-mx-group { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); font-size: 12px; line-height: 18px; color: var(--fg-muted); } +.tc-mx-group { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem 0 0.75rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-mx-head + .tc-mx-group { border-top: 0; } -.tc-mx-group-toggle { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; margin-left: -2px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--fg); font-size: 12px; font-weight: 500; cursor: pointer; } +.tc-mx-group-toggle { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.375rem; margin-left: -2px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--fg); font-size: 0.75rem; font-weight: 500; cursor: pointer; } .tc-mx-group-toggle:hover { background: var(--hover); } -.tc-mx-group-toggle > .tc-icon { width: 14px; height: 14px; color: var(--fg-muted); } +.tc-mx-group-toggle > .tc-icon { width: 0.875rem; height: 0.875rem; color: var(--fg-muted); } .tc-mx-group code { color: var(--fg-muted); } .tc-mx-group .tc-sep { color: var(--fg-subtle); } .tc-mx-readers { display: block; } -.tc-mx-row { background: var(--surface); min-height: 72px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--hairline); transition: background-color var(--dur-fast); } +.tc-mx-row { background: var(--surface); min-height: 4.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; border-top: 1px solid var(--hairline); transition: background-color var(--dur-fast); } .tc-mx-group + .tc-mx-row { border-top-color: var(--border); } .tc-mx-row:hover, .tc-mx-row[data-hover="true"] { background: color-mix(in srgb, var(--surface-sunken) 70%, var(--surface)); } [data-theme="dark"] .tc-mx-row:hover, [data-theme="dark"] .tc-mx-row[data-hover="true"] { background: color-mix(in srgb, var(--fg) 2%, var(--surface)); } .tc-mx-row[data-collapsed] { display: none; } -.tc-mx-skill { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-right: 12px; } +.tc-mx-skill { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-right: 0.75rem; } .tc-mx-skill-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } /* Keep the skill and its actions in view while comparing distant agent columns. */ -.tc-mx-head-label, .tc-mx-skill { position: sticky; left: 0; z-index: 1; align-self: stretch; margin-left: -16px; padding-left: 16px; background: inherit; box-shadow: 1px 0 var(--hairline); } -.tc-mx-skill { margin-block: -10px; padding-block: 10px; } -.tc-mx-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } -.tc-mx-name > a { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); } +.tc-mx-head-label, .tc-mx-skill { position: sticky; left: 0; z-index: 1; align-self: stretch; margin-left: -1rem; padding-left: 1rem; background: inherit; box-shadow: 1px 0 var(--hairline); } +.tc-mx-skill { margin-block: -0.625rem; padding-block: 0.625rem; } +.tc-mx-name { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; min-width: 0; } +.tc-mx-name > a { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); } .tc-mx-name > a:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; } -.tc-mx-desc { margin: 0; font-size: 12px; line-height: 18px; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } +.tc-mx-desc { margin: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .tc-mx-actions { display: flex; flex-shrink: 0; justify-content: flex-end; opacity: 0; } .tc-mx-row:hover .tc-mx-actions, .tc-mx-row[data-hover="true"] .tc-mx-actions { opacity: 1; } /* One cell: an agent's native setting for one skill. Quiet text at rest; its chevron shows on hover, a menu holds the choices. */ .tc-cellwrap { position: relative; min-width: 0; } -.tc-cell { display: inline-flex; align-items: center; gap: 4px; height: 28px; max-width: 100%; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); - background: none; color: var(--fg); font: inherit; font-size: 13px; font-weight: 400; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast); } -.tc-cell > .tc-icon { width: 12px; height: 12px; color: var(--fg-muted); opacity: 0; margin-right: -2px; } +.tc-cell { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.75rem; max-width: 100%; padding: 0 0.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); + background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; font-weight: 400; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast); } +.tc-cell > .tc-icon { width: 0.75rem; height: 0.75rem; color: var(--fg-muted); opacity: 0; margin-right: -2px; } .tc-cell:hover, .tc-mx-row[data-hover="true"] .tc-cell:not(.tc-cell--none):not(.tc-cell--found):not(.tc-cell--locked) { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-xs); } [data-theme="dark"] .tc-cell:hover, [data-theme="dark"] .tc-mx-row[data-hover="true"] .tc-cell:not(.tc-cell--none):not(.tc-cell--found):not(.tc-cell--locked) { background: color-mix(in srgb, var(--fg) 4%, transparent); } .tc-cell:hover > .tc-icon, .tc-mx-row[data-hover="true"] .tc-cell > .tc-icon, .tc-cell[aria-expanded="true"] > .tc-icon { opacity: 1; } @@ -890,186 +894,186 @@ html.tc-locked { overflow: hidden; } .tc-cell--found { color: var(--fg-muted); cursor: help; } .tc-cell--found > span { text-decoration: underline dotted; text-decoration-color: var(--border-strong); text-underline-offset: 4px; } .tc-cell--locked { color: var(--fg-muted); cursor: default; } -.tc-cell--locked > .tc-icon { opacity: 0.8; width: 12px; height: 12px; } +.tc-cell--locked > .tc-icon { opacity: 0.8; width: 0.75rem; height: 0.75rem; } .tc-cell--none { color: var(--fg-muted); } .tc-cell--none .tc-cell-add { display: none; } .tc-mx-row[data-hover="true"] .tc-cell--none .tc-cell-dash, .tc-cell--none:hover .tc-cell-dash { display: none; } -.tc-mx-row[data-hover="true"] .tc-cell--none .tc-cell-add, .tc-cell--none:hover .tc-cell-add { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); } -.tc-cell--none .tc-cell-add > .tc-icon { width: 12px; height: 12px; opacity: 1; color: var(--fg-muted); } -.tc-cell .tc-switch { margin-right: 6px; } -.tc-cell--switch { padding-left: 6px; } - -.tc-cellwrap > .tc-menu { position: absolute; top: calc(100% + 4px); left: -4px; z-index: 30; width: 296px; } -.tc-menu-item[aria-checked] { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; } -.tc-menu-item .tc-menu-check { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--fg); opacity: 0; } +.tc-mx-row[data-hover="true"] .tc-cell--none .tc-cell-add, .tc-cell--none:hover .tc-cell-add { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--fg); } +.tc-cell--none .tc-cell-add > .tc-icon { width: 0.75rem; height: 0.75rem; opacity: 1; color: var(--fg-muted); } +.tc-cell .tc-switch { margin-right: 0.375rem; } +.tc-cell--switch { padding-left: 0.375rem; } + +.tc-cellwrap > .tc-menu { position: absolute; top: calc(100% + 4px); left: -0.25rem; z-index: 30; width: 18.5rem; } +.tc-menu-item[aria-checked] { align-items: flex-start; padding-top: 0.375rem; padding-bottom: 0.375rem; } +.tc-menu-item .tc-menu-check { width: 1rem; height: 1rem; flex: none; margin-top: 2px; color: var(--fg); opacity: 0; } .tc-menu-item[aria-checked="true"] .tc-menu-check { opacity: 1; } -.tc-menu-item-text strong { font-weight: 500; font-size: 14px; line-height: 20px; } -.tc-menu-foot { padding: 6px 8px 4px; font-size: 12px; line-height: 16px; color: var(--fg-muted); } +.tc-menu-item-text strong { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } +.tc-menu-foot { padding: 0.375rem 0.5rem 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); } /* Badges inside a skill's name line. */ -.tc-tagline { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; line-height: 1; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); white-space: nowrap; } -.tc-tagline .tc-icon { width: 11px; height: 11px; } -.tc-tagline code { font-size: 11px; color: var(--fg); } +.tc-tagline { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 500; line-height: 1; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); white-space: nowrap; } +.tc-tagline .tc-icon { width: 0.6875rem; height: 0.6875rem; } +.tc-tagline code { font-size: 0.6875rem; color: var(--fg); } /* -------------------------------------------------------- inspector ---- */ -.tc-insp-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 16px 20px; border-bottom: 1px solid var(--hairline); } -.tc-insp-head .tc-tile--icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--fg); box-shadow: var(--shadow-xs); } -.tc-insp-head .tc-tile--icon .tc-icon { width: 18px; height: 18px; } +.tc-insp-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--hairline); } +.tc-insp-head .tc-tile--icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--fg); box-shadow: var(--shadow-xs); } +.tc-insp-head .tc-tile--icon .tc-icon { width: 1.125rem; height: 1.125rem; } .tc-insp-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } -.tc-insp-title h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; } -.tc-insp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-insp-body { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; } -.tc-insp-section { display: flex; flex-direction: column; gap: 8px; } -.tc-insp-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-section); min-height: 24px; } -.tc-insp-desc { margin: 0; font-size: 14px; line-height: 21px; color: var(--fg); text-wrap: pretty; } +.tc-insp-title h2 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } +.tc-insp-meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-insp-body { flex: 1; overflow: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; } +.tc-insp-section { display: flex; flex-direction: column; gap: 0.5rem; } +.tc-insp-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--fg-section); min-height: 1.5rem; } +.tc-insp-desc { margin: 0; font-size: 0.875rem; line-height: 1.3125rem; color: var(--fg); text-wrap: pretty; } .tc-avail { display: flex; flex-direction: column; } -.tc-avail-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; min-height: 56px; } +.tc-avail-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 0.75rem; padding: 0.625rem 0.875rem; min-height: 3.5rem; } .tc-avail-row + .tc-avail-row { border-top: 1px solid var(--hairline); } .tc-avail-row .tc-row-main { gap: 0; } -.tc-avail-row .tc-select { width: 136px; height: 28px; font-size: 13px; padding-left: 9px; } -.tc-avail-row .tc-tile { width: 24px; height: 24px; font-size: 9.5px; } -.tc-avail-name { font-size: 14px; font-weight: 500; line-height: 20px; } -.tc-avail-note { font-size: 12px; line-height: 18px; color: var(--fg-muted); } +.tc-avail-row .tc-select { width: 8.5rem; height: 1.75rem; font-size: 0.8125rem; padding-left: 0.5625rem; } +.tc-avail-row .tc-tile { width: 1.5rem; height: 1.5rem; font-size: 0.59375rem; } +.tc-avail-name { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } +.tc-avail-note { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-avail-row[data-reach="none"] .tc-avail-name { color: var(--fg-muted); font-weight: 400; } -.tc-pathlist { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 0; } -.tc-pathlist > dt, .tc-pathlist > dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--hairline); font-size: 13px; line-height: 20px; min-width: 0; } +.tc-pathlist { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); margin: 0; } +.tc-pathlist > dt, .tc-pathlist > dd { margin: 0; padding: 0.625rem 0.875rem; border-top: 1px solid var(--hairline); font-size: 0.8125rem; line-height: 1.25rem; min-width: 0; } .tc-pathlist > dt { color: var(--fg-muted); } -.tc-pathlist > dd { display: flex; align-items: center; gap: 6px; } +.tc-pathlist > dd { display: flex; align-items: center; gap: 0.375rem; } .tc-pathlist > dd code { overflow-wrap: anywhere; color: var(--fg); } .tc-pathlist > dt:first-of-type, .tc-pathlist > dt:first-of-type + dd { border-top: 0; } -.tc-files { list-style: none; margin: 0; padding: 4px 0; } -.tc-files li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; font: 400 12px/1 var(--font-mono); color: var(--fg); } -.tc-files li .tc-icon { width: 14px; height: 14px; color: var(--fg-muted); } -.tc-files li[data-depth="1"] { padding-left: 36px; } +.tc-files { list-style: none; margin: 0; padding: 0.25rem 0; } +.tc-files li { display: flex; align-items: center; gap: 0.5rem; height: 1.875rem; padding: 0 0.875rem; font: 400 0.75rem/1 var(--font-mono); color: var(--fg); } +.tc-files li .tc-icon { width: 0.875rem; height: 0.875rem; color: var(--fg-muted); } +.tc-files li[data-depth="1"] { padding-left: 2.25rem; } .tc-files li .tc-files-size { margin-left: auto; color: var(--fg-muted); font-variant-numeric: tabular-nums; } -.tc-code { margin: 0; padding: 12px 0; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-sunken); font: 400 12px/20px var(--font-mono); color: var(--fg); overflow: hidden; counter-reset: ln; } -.tc-code > span { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 0 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } -.tc-code > span::before { counter-increment: ln; content: counter(ln); padding-right: 12px; text-align: right; color: var(--fg-subtle); user-select: none; } +.tc-code { margin: 0; padding: 0.75rem 0; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-sunken); font: 400 0.75rem/1.25rem var(--font-mono); color: var(--fg); overflow: hidden; counter-reset: ln; } +.tc-code > span { display: grid; grid-template-columns: var(--touch) minmax(0, 1fr); padding: 0 0.875rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } +.tc-code > span::before { counter-increment: ln; content: counter(ln); padding-right: 0.75rem; text-align: right; color: var(--fg-subtle); user-select: none; } .tc-code-fade { position: relative; } -.tc-code-fade::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 56px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(to bottom, transparent, var(--surface-sunken)); pointer-events: none; } +.tc-code-fade::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3.5rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(to bottom, transparent, var(--surface-sunken)); pointer-events: none; } /* ------------------------------------------------------------ wizard --- */ -.tc-wizard { width: 960px; max-width: 100%; height: 720px; display: flex; flex-direction: column; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-dialog); } -.tc-wizard-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--hairline); } -.tc-wizard-head .tc-steps { margin-left: auto; margin-right: 8px; } -.tc-wizard-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; } -.tc-wizard-main { min-height: 0; overflow: hidden; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; } -.tc-wizard-rail { min-height: 0; overflow: hidden; border-left: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); padding: 20px; display: flex; flex-direction: column; gap: 16px; } -.tc-wizard-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 20px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } -.tc-wizard-foot .tc-hint { display: inline-flex; align-items: center; gap: 6px; } -.tc-step-title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; } - -.tc-source { display: flex; flex-direction: column; gap: 8px; } +.tc-wizard { width: 60rem; max-width: 100%; height: 45rem; display: flex; flex-direction: column; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-dialog); } +.tc-wizard-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--hairline); } +.tc-wizard-head .tc-steps { margin-left: auto; margin-right: 0.5rem; } +.tc-wizard-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; } +.tc-wizard-main { min-height: 0; overflow: hidden; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; } +.tc-wizard-rail { min-height: 0; overflow: hidden; border-left: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } +.tc-wizard-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 0.75rem 1.25rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-wizard-foot .tc-hint { display: inline-flex; align-items: center; gap: 0.375rem; } +.tc-step-title { margin: 0; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; } + +.tc-source { display: flex; flex-direction: column; gap: 0.5rem; } .tc-source-input { position: relative; display: flex; align-items: center; } -.tc-source-input > .tc-input { height: 36px; font-family: var(--font-mono); font-size: 13px; padding-left: 36px; padding-right: 100px; } -.tc-source-input > .tc-icon { position: absolute; left: 12px; color: var(--fg-muted); } -.tc-source-input > .tc-btn { position: absolute; right: 4px; } -.tc-source-found { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-source-found .tc-icon { width: 14px; height: 14px; color: var(--ok); } +.tc-source-input > .tc-input { height: 2.25rem; font-family: var(--font-mono); font-size: 0.8125rem; padding-left: 2.25rem; padding-right: 6.25rem; } +.tc-source-input > .tc-icon { position: absolute; left: 0.75rem; color: var(--fg-muted); } +.tc-source-input > .tc-btn { position: absolute; right: 0.25rem; } +.tc-source-found { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-source-found .tc-icon { width: 0.875rem; height: 0.875rem; color: var(--ok); } .tc-source-found strong { color: var(--fg); font-weight: 500; } .tc-source-found code { color: var(--fg); } .tc-picklist { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; } [data-theme="dark"] .tc-picklist { background: color-mix(in srgb, var(--fg) 2%, transparent); } -.tc-picklist-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--hairline); } -.tc-picklist-head .tc-input { height: 28px; font-size: 13px; } +.tc-picklist-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border-bottom: 1px solid var(--hairline); } +.tc-picklist-head .tc-input { height: 1.75rem; font-size: 0.8125rem; } .tc-picklist-body { overflow: hidden; flex: 1; } -.tc-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 14px; } +.tc-pick { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; gap: 2px 0.75rem; align-items: start; padding: 0.625rem 0.875rem; } .tc-pick + .tc-pick { border-top: 1px solid var(--hairline); } -.tc-pick-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 500; line-height: 20px; } -.tc-pick-desc { margin: 0; font-size: 12px; line-height: 18px; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } -.tc-pick-side { display: flex; align-items: center; gap: 6px; font: 400 12px/20px var(--font-mono); color: var(--fg-muted); white-space: nowrap; } +.tc-pick-name { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } +.tc-pick-desc { margin: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } +.tc-pick-side { display: flex; align-items: center; gap: 0.375rem; font: 400 0.75rem/1.25rem var(--font-mono); color: var(--fg-muted); white-space: nowrap; } .tc-pick[data-open] { background: color-mix(in srgb, var(--surface-sunken) 60%, transparent); } -.tc-pick-files { grid-column: 2 / -1; margin-top: 8px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); } +.tc-pick-files { grid-column: 2 / -1; margin-top: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); } [data-theme="dark"] .tc-pick-files { background: color-mix(in srgb, var(--fg) 2%, transparent); } -.tc-pick-files .tc-files li { height: 26px; } -.tc-pick-files-foot { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--fg-muted); } -.tc-pick-files-foot .tc-icon { width: 14px; height: 14px; } +.tc-pick-files .tc-files li { height: 1.625rem; } +.tc-pick-files-foot { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-top: 1px solid var(--hairline); font-size: 0.75rem; color: var(--fg-muted); } +.tc-pick-files-foot .tc-icon { width: 0.875rem; height: 0.875rem; } -.tc-checkbox { appearance: auto; accent-color: var(--accent); width: 16px; height: 16px; margin: 2px 0 0; flex: none; cursor: pointer; } +.tc-checkbox { appearance: auto; accent-color: var(--accent); width: 1rem; height: 1rem; margin: 2px 0 0; flex: none; cursor: pointer; } .tc-checkbox:disabled { opacity: var(--opacity-disabled); cursor: default; } .tc-checkbox:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Install plan rail. */ -.tc-plan-label { font-size: 12px; font-weight: 500; color: var(--fg-muted); } -.tc-plan-source { display: flex; flex-direction: column; gap: 4px; } -.tc-plan-source code { font-size: 12px; color: var(--fg); overflow-wrap: anywhere; } -.tc-plan-stat { display: flex; align-items: baseline; gap: 6px; } +.tc-plan-label { font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); } +.tc-plan-source { display: flex; flex-direction: column; gap: 0.25rem; } +.tc-plan-source code { font-size: 0.75rem; color: var(--fg); overflow-wrap: anywhere; } +.tc-plan-stat { display: flex; align-items: baseline; gap: 0.375rem; } .tc-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } -.tc-plan-list li { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 13px; color: var(--fg); } -.tc-plan-list li .tc-plan-end { margin-left: auto; font-size: 12px; color: var(--fg-muted); } +.tc-plan-list li { display: flex; align-items: center; gap: 0.5rem; min-height: 1.625rem; font-size: 0.8125rem; color: var(--fg); } +.tc-plan-list li .tc-plan-end { margin-left: auto; font-size: 0.75rem; color: var(--fg-muted); } .tc-plan-list li[data-off] { color: var(--fg-muted); } -.tc-plan-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-plan-note .tc-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; } +.tc-plan-note { margin: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-plan-note .tc-icon { width: 0.875rem; height: 0.875rem; vertical-align: -2px; margin-right: 0.25rem; } /* Agents step: one row per agent, the copy it reads. */ -.tc-route-row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 9px 14px; } +.tc-route-row { display: grid; grid-template-columns: 1.125rem auto minmax(0, 1fr) auto; gap: 2px 0.75rem; align-items: center; padding: 0.5625rem 0.875rem; } .tc-route-row + .tc-route-row { border-top: 1px solid var(--hairline); } .tc-route-row .tc-row-main { gap: 0; } .tc-route-row .tc-checkbox { margin: 0; } .tc-route-row[data-off] .tc-avail-name { color: var(--fg-muted); font-weight: 400; } -.tc-route-group { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; line-height: 18px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); border-top: 1px solid var(--border); } +.tc-route-group { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); border-top: 1px solid var(--border); } .tc-route-group:first-child { border-top: 0; } .tc-route-group code { color: var(--fg); } .tc-route-group .tc-spacer + * { white-space: nowrap; } -.tc-dest-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-dest-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.75rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } .tc-dest-head + .tc-dest-row, .tc-dest-row + .tc-dest-row { border-top: 1px solid var(--hairline); } .tc-dest-row + .tc-dest-head { border-top: 1px solid var(--border); } -.tc-dest-head code { color: var(--fg); font-size: 12px; } -.tc-dest-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 14px; font-size: 13px; } -.tc-dest-row .tc-icon { width: 14px; height: 14px; } +.tc-dest-head code { color: var(--fg); font-size: 0.75rem; } +.tc-dest-row { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; gap: 2px 0.625rem; align-items: center; padding: 0.5625rem 0.875rem; font-size: 0.8125rem; } +.tc-dest-row .tc-icon { width: 0.875rem; height: 0.875rem; } .tc-dest-row[data-state="ok"] > .tc-icon { color: var(--ok); } .tc-dest-row[data-state="failed"] > .tc-icon { color: var(--danger); } .tc-dest-row[data-state="replace"] > .tc-icon { color: var(--warn); } .tc-dest-row[data-state="new"] > .tc-icon { color: var(--fg-muted); } -.tc-dest-note { grid-column: 2 / -1; font-size: 12px; line-height: 18px; color: var(--fg-muted); } +.tc-dest-note { grid-column: 2 / -1; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-dest-row[data-state="failed"] .tc-dest-note { color: var(--danger-text); } -.tc-result-hero { display: flex; align-items: center; gap: 14px; } -.tc-result-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok-text); flex: none; } -.tc-result-mark .tc-icon { width: 20px; height: 20px; } -.tc-result-hero h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; } +.tc-result-hero { display: flex; align-items: center; gap: 0.875rem; } +.tc-result-mark { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok-text); flex: none; } +.tc-result-mark .tc-icon { width: 1.25rem; height: 1.25rem; } +.tc-result-hero h3 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } /* ------------------------------------------------------- instructions -- */ -.tc-ins-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; } -.tc-doc-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--hairline); } +.tc-ins-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; } +.tc-doc-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0.875rem 0.875rem 1rem; border-bottom: 1px solid var(--hairline); } .tc-doc-head > .tc-row-main { flex: 1; } -.tc-doc-head .tc-tile--icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--fg); } -.tc-doc-preview { padding: 16px 20px 8px; font-size: 14px; line-height: 21px; color: var(--fg); } +.tc-doc-head .tc-tile--icon { width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--fg); } +.tc-doc-preview { padding: 1rem 1.25rem 0.5rem; font-size: 0.875rem; line-height: 1.3125rem; color: var(--fg); } .tc-doc-preview .tc-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); } .tc-doc-preview .tc-notice > .tc-btn { grid-column: 2; justify-self: start; } -.tc-doc-foot { flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; } +.tc-doc-foot { flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; } .tc-doc-foot > code { max-width: 100%; } .tc-doc-foot > span { white-space: nowrap; } -.tc-reads-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px 16px; } +.tc-reads-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem 0.75rem; align-items: center; padding: 0.875rem 1rem; } .tc-reads-row + .tc-reads-row { border-top: 1px solid var(--hairline); } .tc-reads-row .tc-seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } -.tc-reads-row .tc-seg button { justify-content: center; height: 26px; font-size: 12.5px; } -.tc-reads-row .tc-tile { width: 24px; height: 24px; font-size: 9.5px; } -.tc-reads-path { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: var(--fg-muted); min-width: 0; } +.tc-reads-row .tc-seg button { justify-content: center; height: 1.625rem; font-size: 0.78125rem; } +.tc-reads-row .tc-tile { width: 1.5rem; height: 1.5rem; font-size: 0.59375rem; } +.tc-reads-path { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); min-width: 0; } .tc-reads-path code { flex: 1; min-width: 0; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-reads-path > :not(code) { flex-shrink: 0; white-space: nowrap; } -.tc-reads-path .tc-icon { width: 12px; height: 12px; flex: none; } +.tc-reads-path .tc-icon { width: 0.75rem; height: 0.75rem; flex: none; } /* ------------------------------------------------------------- phone --- */ -.tc-sk-agent-chips .tc-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; flex: none; } +.tc-sk-agent-chips .tc-chip-btn { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem 0 0.5rem; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; flex: none; } .tc-sk-agent-chips .tc-chip-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); } .tc-sk-agent-chips .tc-chip-btn[aria-pressed="true"] .tc-tab-count { color: color-mix(in srgb, var(--bg) 70%, transparent); } -.tc-sk-agent-chips .tc-chip-btn:not(:has(.tc-tile)) { padding-left: 12px; } -.tc-sk-agent-chips .tc-chip-btn .tc-tile { width: 18px; height: 18px; font-size: 8px; } +.tc-sk-agent-chips .tc-chip-btn:not(:has(.tc-tile)) { padding-left: 0.75rem; } +.tc-sk-agent-chips .tc-chip-btn .tc-tile { width: 1.125rem; height: 1.125rem; font-size: 0.5rem; } .tc-plist { border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: color-mix(in srgb, var(--surface) 40%, transparent); box-shadow: var(--shadow-xs); overflow: hidden; flex: none; } -.tc-plist-group { display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px; font-size: 12px; line-height: 16px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); border-bottom: 1px solid var(--hairline); } +.tc-plist-group { display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.875rem 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); border-bottom: 1px solid var(--hairline); } .tc-plist-group strong { color: var(--fg); font-weight: 500; } -.tc-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; min-height: 64px; color: inherit; text-decoration: none !important; } +.tc-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.75rem 0.875rem; min-height: 4rem; color: inherit; text-decoration: none !important; } .tc-prow + .tc-prow { border-top: 1px solid var(--hairline); } -.tc-prow-name { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--fg); } -.tc-prow-desc { grid-column: 1; margin: 0; font-size: 13px; line-height: 18px; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } -.tc-prow-agents { grid-column: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--fg-muted); margin-top: 2px; } +.tc-prow-name { font-size: 1rem; line-height: 1.375rem; font-weight: 500; color: var(--fg); } +.tc-prow-desc { grid-column: 1; margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } +.tc-prow-agents { grid-column: 1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); margin-top: 2px; } .tc-prow > .tc-icon { grid-column: 2; grid-row: 1 / span 3; color: var(--fg-muted); } /* Runtime adaptations: actual layers, scrolling data, keyboard affordances and @@ -1080,24 +1084,24 @@ html.tc-locked { overflow: hidden; } .tc-sk-notices { display: flex; flex-direction: column; gap: var(--space-2); } .tc-sk-notices:empty { display: none; } .tc-sk-table { min-width: 0; container-type: inline-size; } -.tc-mx-scroll { scroll-padding-inline: 256px 8px; overflow-x: auto; overscroll-behavior-x: contain; border-radius: inherit; } -.tc-mx { min-width: calc(240px + var(--mx-agent-count, 5) * 116px + 24px); } +.tc-mx-scroll { scroll-padding-inline: 16rem 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; border-radius: inherit; } +.tc-mx { min-width: calc(var(--mx-name-width) + var(--mx-agent-count, 5) * var(--mx-agent-width) + 1.5rem); } .tc-mx-head, .tc-mx-row { min-width: 100%; } /* Folder context stays attached to the visible table, independently of its columns. */ .tc-mx-group { overflow: hidden; position: sticky; left: 0; width: 100cqi; } .tc-mx-group > code, .tc-mx-readers, .tc-mx-collapsed-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } -.tc-mx-collapsed-names { max-width: 40%; font: 400 12px/18px var(--font-mono); } +.tc-mx-collapsed-names { max-width: 40%; font: 400 0.75rem/1.125rem var(--font-mono); } .tc-mx-agent[data-uninstalled] { opacity: var(--opacity-disabled); } .tc-mx-agent-name .tc-tile { flex: none; } .tc-mx-actions:focus-within, .tc-mx-row:focus-within .tc-mx-actions { opacity: 1; } .tc-cell:focus-visible .tc-cell-dash { display: none; } .tc-cell:focus-visible .tc-cell-add { display: inline-flex; } .tc-cell:focus-visible, .tc-skill-name:focus-visible, .tc-prow:focus-visible, .tc-mx-group-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } -.tc-skill-name { appearance: none; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; font: 500 14px/20px var(--font-sans); cursor: pointer; overflow-wrap: anywhere; } +.tc-skill-name { appearance: none; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; font: 500 0.875rem/1.25rem var(--font-sans); cursor: pointer; overflow-wrap: anywhere; } .tc-skill-name:hover { text-decoration: underline; text-underline-offset: 3px; } .tc-mx-row[data-highlight], .tc-prow[data-highlight] { background: var(--accent-soft); } .tc-mx-row[data-highlight] { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); } -.tc-sk-library-foot { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--fg-muted); } +.tc-sk-library-foot { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-sk-library-foot > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1 1 28rem; } .tc-sk-scan-time { margin-left: auto; } .tc-sk-agent-chips, .tc-sk-phone-list, .tc-sk-phone-actions { display: none; } @@ -1105,10 +1109,10 @@ html.tc-locked { overflow: hidden; } .tc-sk-empty { padding: var(--space-8) var(--space-4); } .tc-agent-stack { display: inline-flex; align-items: center; flex: none; } .tc-agent-stack .tc-tile { box-shadow: 0 0 0 2px var(--surface); } -.tc-agent-stack .tc-tile + .tc-tile { margin-left: -3px; } -.tc-menu-item-description { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--fg-muted); } -.tc-menu:has([role="menuitemradio"]) { max-width: min(296px, calc(100vw - 16px)); width: 296px; } -.tc-menu-foot { border-top: 1px solid var(--hairline); margin-top: 4px; } +.tc-agent-stack .tc-tile + .tc-tile { margin-left: -0.1875rem; } +.tc-menu-item-description { display: block; margin-top: 1px; font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); } +.tc-menu:has([role="menuitemradio"]) { max-width: min(296px, calc(100vw - 16px)); width: 18.5rem; } +.tc-menu-foot { border-top: 1px solid var(--hairline); margin-top: 0.25rem; } .tc-menu-foot code { overflow-wrap: anywhere; } .tc-layer--sheet > .tc-skill-inspector { width: min(520px, calc(100vw - 16px)); } .tc-insp-head, .tc-insp-foot { flex: none; } @@ -1117,17 +1121,17 @@ html.tc-locked { overflow: hidden; } .tc-insp-foot > .tc-hint { display: inline-flex; align-items: flex-start; gap: var(--space-2); } .tc-insp-body { min-height: 0; overscroll-behavior: contain; } -.tc-insp-body .tc-editor-area { min-height: 320px; width: 100%; resize: vertical; font: 400 12px/20px var(--font-mono); } +.tc-insp-body .tc-editor-area { min-height: 20rem; width: 100%; resize: vertical; font: 400 0.75rem/1.25rem var(--font-mono); } .tc-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-files li[data-depth="2"] { padding-left: 48px; } -.tc-files li[data-depth="3"], .tc-files li[data-depth="4"] { padding-left: 60px; } +.tc-files li[data-depth="2"] { padding-left: 3rem; } +.tc-files li[data-depth="3"], .tc-files li[data-depth="4"] { padding-left: 3.75rem; } .tc-files-size { flex: none; } .tc-layer--center > .tc-wizard { position: relative; z-index: 1; max-height: calc(100dvh - 48px); animation: tc-pop var(--dur-base) ease-out; } .tc-wizard-head, .tc-wizard-foot { flex: none; } .tc-wizard-head .tc-steps { flex: none; } .tc-wizard-main { overflow-y: auto; overscroll-behavior: contain; min-width: 0; } .tc-wizard-main > * { flex-shrink: 0; } -.tc-wizard-main > .tc-picklist { flex: 1 1 auto; min-height: 180px; } +.tc-wizard-main > .tc-picklist { flex: 1 1 auto; min-height: 11.25rem; } .tc-picklist-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; } .tc-wizard-rail-wrap { min-height: 0; overflow-y: auto; border-left: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); } .tc-wizard-rail-toggle { display: none; } @@ -1135,7 +1139,7 @@ html.tc-locked { overflow: hidden; } .tc-plan-section { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); } .tc-plan-bottom { margin-top: auto; padding-top: var(--space-4); } .tc-import-step-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } -.tc-import-step-head .tc-hint { margin-top: 4px; } +.tc-import-step-head .tc-hint { margin-top: 0.25rem; } .tc-import-intro { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); flex: 1; } .tc-import-catalog { display: flex; flex-direction: column; } .tc-import-catalog .tc-btn { justify-content: space-between; } @@ -1146,8 +1150,8 @@ html.tc-locked { overflow: hidden; } .tc-route-row { cursor: pointer; } .tc-route-row > .tc-checkbox { align-self: center; } .tc-import-consent { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); cursor: pointer; } -.tc-import-consent > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; } -.tc-import-consent strong { font-size: 13px; font-weight: 500; line-height: 20px; } +.tc-import-consent > span { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } +.tc-import-consent strong { font-size: 0.8125rem; font-weight: 500; line-height: 1.25rem; } .tc-import-consent .tc-hint { color: var(--warn-text); } .tc-import-progress { display: flex; align-items: center; gap: var(--space-2); } .tc-result-hero[data-state="partial"] .tc-result-mark { background: var(--warn-soft); color: var(--warn-text); } @@ -1156,8 +1160,8 @@ html.tc-locked { overflow: hidden; } .tc-ins-section { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } .tc-ins-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4); } .tc-ins-section-head h2 { margin: 0; font-weight: 400; } -.tc-doc-preview .tc-code { border: 0; background: none; padding: 0; max-height: 312px; overflow: auto; } -.tc-ins-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); min-height: 240px; padding: var(--space-8) var(--space-6); } +.tc-doc-preview .tc-code { border: 0; background: none; padding: 0; max-height: 19.5rem; overflow: auto; } +.tc-ins-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); min-height: 15rem; padding: var(--space-8) var(--space-6); } .tc-ins-empty > .tc-empty-media { margin: 0 0 var(--space-2); } .tc-ins-empty > .tc-empty-desc { max-width: 36ch; text-wrap: pretty; } .tc-sk-empty-actions .tc-btn { margin-top: 0; } @@ -1167,60 +1171,60 @@ html.tc-locked { overflow: hidden; } @media (max-width: 1023.98px) { .tc-sk-toolbar { margin: 0; } .tc-sk-search { flex: 1 1 100%; min-width: 0; } - .tc-sk-search > .tc-input { min-height: 44px; font-size: 16px; } + .tc-sk-search > .tc-input { min-height: var(--touch); font-size: 1rem; } .tc-sk-search > .tc-kbd, .tc-sk-desktop-filters, .tc-sk-desktop-actions, .tc-sk-table { display: none !important; } /* Keep the scrollport's 4px focus gutter within the library's bounds, without moving its content or increasing the row's layout space. */ - .tc-skills-library { margin-inline: -4px; padding-inline: 4px; } - .tc-sk-agent-chips { display: flex; overflow-x: auto; overscroll-behavior-x: contain; gap: var(--space-2); margin: -4px; padding: 4px 4px 8px; scroll-padding-inline: 4px; } - .tc-sk-agent-chips .tc-chip-btn { min-height: 44px; } + .tc-skills-library { margin-inline: -0.25rem; padding-inline: 0.25rem; } + .tc-sk-agent-chips { display: flex; overflow-x: auto; overscroll-behavior-x: contain; gap: var(--space-2); margin: -0.25rem; padding: 0.25rem 0.25rem 0.5rem; scroll-padding-inline: 4px; } + .tc-sk-agent-chips .tc-chip-btn { min-height: var(--touch); } .tc-sk-phone-list { display: flex; flex-direction: column; gap: var(--space-4); } .tc-prow { width: 100%; text-align: left; appearance: none; border: 0; background: none; cursor: pointer; font: inherit; } .tc-prow + .tc-prow { border-top: 1px solid var(--hairline); } .tc-prow:hover { background: var(--hover); } .tc-prow-agents > span:last-child { overflow-wrap: anywhere; } .tc-plist-group { flex-wrap: wrap; } - .tc-sk-phone-actions { display: flex; align-items: center; gap: var(--space-2); position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 2; background: var(--surface-raised); border-top: 1px solid var(--border); padding: var(--space-3) 16px; margin: 0 -16px; } - .tc-sk-phone-actions .tc-btn { min-height: 44px; } + .tc-sk-phone-actions { display: flex; align-items: center; gap: var(--space-2); position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 2; background: var(--surface-raised); border-top: 1px solid var(--border); padding: var(--space-3) 1rem; margin: 0 -1rem; } + .tc-sk-phone-actions .tc-btn { min-height: var(--touch); } .tc-sk-phone-actions .tc-btn--primary { flex: 1; } - .tc-sk-phone-actions .tc-btn:not(.tc-btn--primary) { font-size: 0; padding: 0; width: 44px; } - .tc-sk-phone-actions .tc-btn:not(.tc-btn--primary) .tc-icon { width: 20px; height: 20px; } + .tc-sk-phone-actions .tc-btn:not(.tc-btn--primary) { font-size: 0; padding: 0; width: var(--touch); } + .tc-sk-phone-actions .tc-btn:not(.tc-btn--primary) .tc-icon { width: 1.25rem; height: 1.25rem; } .tc-sk-notices .tc-notice { flex-wrap: wrap; } - .tc-sk-notices .tc-notice-actions { margin-left: 24px; } + .tc-sk-notices .tc-notice-actions { margin-left: 1.5rem; } .tc-sk-library-foot { margin-bottom: var(--space-2); } .tc-layer--sheet > .tc-skill-inspector { width: 100%; max-height: 92dvh; height: auto; margin: 0; } - .tc-skill-inspector .tc-insp-body { padding: 16px; gap: var(--space-5); } + .tc-skill-inspector .tc-insp-body { padding: 1rem; gap: var(--space-5); } .tc-skill-inspector .tc-insp-foot { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); } - .tc-avail-row { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; } - .tc-avail-row > .tc-select { grid-column: 1 / -1; width: 100%; min-height: 44px; font-size: 16px; } + .tc-avail-row { grid-template-columns: auto minmax(0, 1fr); padding: 0.75rem 0.875rem; } + .tc-avail-row > .tc-select { grid-column: 1 / -1; width: 100%; min-height: var(--touch); font-size: 1rem; } .tc-avail-row > .tc-cell { grid-column: 2; justify-self: start; } .tc-layer--center > .tc-wizard { max-height: 94dvh; height: 94dvh; width: 100%; max-width: none; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; } .tc-wizard-head { flex-wrap: wrap; padding: var(--space-4); gap: var(--space-2); } .tc-wizard-head > .tc-tile { display: none; } .tc-wizard-head > .tc-sheet-head-text { flex: 1; min-width: 0; } - .tc-wizard-head > .tc-sheet-head-text .tc-small { font-size: 12px; } - .tc-wizard-head .tc-steps { order: 4; width: 100%; margin: 4px 0 0; } + .tc-wizard-head > .tc-sheet-head-text .tc-small { font-size: 0.75rem; } + .tc-wizard-head .tc-steps { order: 4; width: 100%; margin: 0.25rem 0 0; } .tc-wizard-grid { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; } .tc-wizard-main { flex: 1 0 auto; overflow: visible; padding: var(--space-4); } .tc-wizard-rail-wrap { flex: none; border-left: 0; border-top: 1px solid var(--border); overflow: visible; } - .tc-wizard-rail-toggle { display: block; padding: var(--space-3) var(--space-4); font-size: 13px; font-weight: 500; cursor: pointer; min-height: 44px; } + .tc-wizard-rail-toggle { display: block; padding: var(--space-3) var(--space-4); font-size: 0.8125rem; font-weight: 500; cursor: pointer; min-height: var(--touch); } .tc-wizard-rail { min-height: 0; padding: 0 var(--space-4) var(--space-4); } .tc-wizard-foot { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); } - .tc-wizard-foot .tc-btn { min-height: 44px; } + .tc-wizard-foot .tc-btn { min-height: var(--touch); } .tc-wizard-keyboard { display: none !important; } .tc-picklist { flex: none; } .tc-picklist-body { overflow: visible; } .tc-picklist-head { flex-wrap: wrap; } - .tc-picklist-head .tc-input { flex: 1 1 100%; min-height: 44px; font-size: 16px; } - .tc-pick { grid-template-columns: 18px minmax(0, 1fr); } - .tc-pick-side { grid-column: 2; justify-self: start; min-height: 36px; } - .tc-source-input > .tc-input { height: 44px; font-size: 16px; } - .tc-source-input > .tc-btn { min-height: 36px; } - .tc-route-row { min-height: 64px; } + .tc-picklist-head .tc-input { flex: 1 1 100%; min-height: var(--touch); font-size: 1rem; } + .tc-pick { grid-template-columns: 1.125rem minmax(0, 1fr); } + .tc-pick-side { grid-column: 2; justify-self: start; min-height: 2.25rem; } + .tc-source-input > .tc-input { height: var(--touch); font-size: 1rem; } + .tc-source-input > .tc-btn { min-height: 2.25rem; } + .tc-route-row { min-height: 4rem; } .tc-import-step-head .tc-seg { width: 100%; display: flex; } - .tc-import-step-head .tc-seg button { flex: 1; min-height: 36px; } + .tc-import-step-head .tc-seg button { flex: 1; min-height: 2.25rem; } .tc-ins-grid { grid-template-columns: minmax(0, 1fr); } - .tc-reads-row .tc-seg button { min-height: 36px; font-size: 12px; padding-inline: 4px; } + .tc-reads-row .tc-seg button { min-height: 2.25rem; font-size: 0.75rem; padding-inline: 0.25rem; } } @media (forced-colors: active) { .tc-checkbox { appearance: auto; } @@ -1229,15 +1233,15 @@ html.tc-locked { overflow: hidden; } /* Keep the selection count readable while the source filter stays compact. */ .tc-picklist-head > .tc-hint { white-space: nowrap; } -.tc-picklist-head .tc-input { width: 140px; flex: none; } -.tc-plan-stat > strong { font: 600 22px/28px var(--font-sans); letter-spacing: -0.02em; } +.tc-picklist-head .tc-input { width: 8.75rem; flex: none; } +.tc-plan-stat > strong { font: 600 1.375rem/1.75rem var(--font-sans); letter-spacing: -0.02em; } @media (min-width: 1024px) { .tc-wizard-rail-wrap > .tc-wizard-rail { display: flex; } } @media (max-width: 1023.98px) { .tc-picklist-head .tc-input { flex: 1 1 100%; width: 100%; } - .tc-import-step-head .tc-seg button, .tc-reads-row .tc-seg button, .tc-pick-side, .tc-source-input > .tc-btn { min-height: 44px; } - .tc-skills-library { padding-bottom: 76px; } + .tc-import-step-head .tc-seg button, .tc-reads-row .tc-seg button, .tc-pick-side, .tc-source-input > .tc-btn { min-height: var(--touch); } + .tc-skills-library { padding-bottom: 4.75rem; } .tc-pick-files-foot { flex-wrap: wrap; } } @@ -1247,16 +1251,16 @@ html.tc-locked { overflow: hidden; } body[data-console-route="instructions"] .tc-tabbar, #page-instructions > .tc-page-head { display: none; } #page-instructions { padding-top: 0; } - .tc-instructions-phone-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; min-height: 52px; margin-inline: -16px; padding-inline: 8px; } - .tc-instructions-phone-head h1 { font-size: 15px; line-height: 22px; font-weight: 600; text-align: center; margin: 0; } - .tc-instructions-phone-head .tc-btn { min-height: 44px; padding: 8px; gap: 4px; } + .tc-instructions-phone-head { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) var(--touch); align-items: center; min-height: 3.25rem; margin-inline: -1rem; padding-inline: 0.5rem; } + .tc-instructions-phone-head h1 { font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; text-align: center; margin: 0; } + .tc-instructions-phone-head .tc-btn { min-height: var(--touch); padding: 0.5rem; gap: 0.25rem; } .tc-back-icon { transform: rotate(180deg); } - .tc-sk-phone-notice { display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); color: var(--warn-text); border-radius: var(--radius-xl); padding: 12px 14px; text-align: left; font: inherit; cursor: pointer; } + .tc-sk-phone-notice { display: flex; align-items: center; gap: 0.625rem; border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); color: var(--warn-text); border-radius: var(--radius-xl); padding: 0.75rem 0.875rem; text-align: left; font: inherit; cursor: pointer; } .tc-sk-phone-notice > span { min-width: 0; flex: 1; } .tc-sk-phone-notice strong, .tc-sk-phone-notice > span > span { display: block; } - .tc-sk-phone-notice strong { font-size: 13px; line-height: 20px; font-weight: 500; } - .tc-sk-phone-notice > span > span { font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .tc-sk-phone-notice > .tc-icon { flex: none; width: 16px; height: 16px; } + .tc-sk-phone-notice strong { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; } + .tc-sk-phone-notice > span > span { font-size: 0.75rem; line-height: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .tc-sk-phone-notice > .tc-icon { flex: none; width: 1rem; height: 1rem; } .tc-sk-notices .tc-sk-skill-notice, .tc-sk-notices > button { display: none; } .tc-sk-phone-actions { bottom: env(safe-area-inset-bottom, 0px); } } @@ -1267,35 +1271,35 @@ html.tc-locked { overflow: hidden; } .tc-pick[data-open] .tc-pick-side > .tc-icon { transform: rotate(180deg); } @media (max-width: 1023.98px) { - #page-instructions { gap: 12px; --_gap: 12px; } - .tc-skills-library { gap: 8px; } + #page-instructions { gap: 0.75rem; --_gap: 0.75rem; } + .tc-skills-library { gap: 0.5rem; } .tc-sk-notices:not(:has(.tc-sk-provider-notice)) { display: none; } - .tc-plist-group { padding-block: 0; min-height: 44px; } - .tc-plist-group .tc-mx-group-toggle { min-height: 44px; } + .tc-plist-group { padding-block: 0; min-height: var(--touch); } + .tc-plist-group .tc-mx-group-toggle { min-height: var(--touch); } .tc-layer--sheet > .tc-skill-inspector { max-height: 80dvh; } .tc-skill-inspector .tc-insp-head > .tc-tile { display: none; } - .tc-skill-inspector .tc-insp-head { padding: 18px 16px 12px; } - .tc-skill-inspector .tc-insp-head h2 { font-size: 16px; line-height: 22px; } - .tc-skill-inspector .tc-insp-body { gap: 20px; } - .tc-avail-row > [data-inspect-copy-to] { grid-column: 2; justify-self: start; min-height: 44px; } + .tc-skill-inspector .tc-insp-head { padding: 1.125rem 1rem 0.75rem; } + .tc-skill-inspector .tc-insp-head h2 { font-size: 1rem; line-height: 1.375rem; } + .tc-skill-inspector .tc-insp-body { gap: 1.25rem; } + .tc-avail-row > [data-inspect-copy-to] { grid-column: 2; justify-self: start; min-height: var(--touch); } .tc-insp-foot > [data-inspect-edit] { flex: 1; } .tc-insp-foot:has([data-inspect-edit]) > .tc-spacer { display: none; } } @media (max-width: 1023.98px) { - .tc-avail-row { grid-template-columns: 24px minmax(0, 1fr) auto; } + .tc-avail-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; } .tc-avail-row > .tc-cell, .tc-avail-row > [data-inspect-copy-to] { grid-column: 3; grid-row: 1; justify-self: end; } - .tc-avail-row > [data-inspect-copy-to] { max-width: 130px; white-space: normal; text-align: center; } + .tc-avail-row > [data-inspect-copy-to] { max-width: 8.125rem; white-space: normal; text-align: center; } } .tc-import-check-all { display: inline-grid; place-items: center; flex: none; cursor: pointer; } @media (max-width: 1023.98px) { - .tc-import-check-all { min-width: 44px; min-height: 44px; margin-left: -12px; } - .tc-pick-name { min-height: 44px; align-content: center; } + .tc-import-check-all { min-width: var(--touch); min-height: var(--touch); margin-left: -0.75rem; } + .tc-pick-name { min-height: var(--touch); align-content: center; } [data-inspect-close], [data-import-close], .tc-doc-head > button, - .tc-reads-path > .tc-btn { min-width: 44px; min-height: 44px; } + .tc-reads-path > .tc-btn { min-width: var(--touch); min-height: var(--touch); } .tc-doc-preview .tc-btn, .tc-ins-empty > .tc-btn, .tc-sk-empty-actions > .tc-btn, - .tc-skill-inspector .tc-editor-tools > .tc-btn { min-width: 44px; min-height: 44px; } + .tc-skill-inspector .tc-editor-tools > .tc-btn { min-width: var(--touch); min-height: var(--touch); } } .tc-wizard-rail-wrap { display: flex; flex-direction: column; } @@ -1322,14 +1326,14 @@ html.tc-locked { overflow: hidden; } Tokens only, from the console design system. */ /* -------------------------------------------------------------- table --- */ -.tc-mcp-detail { display: flex; align-items: center; gap: 6px; min-width: 0; font: 400 12px/18px var(--font-mono); color: var(--fg-muted); } +.tc-mcp-detail { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font: 400 0.75rem/1.125rem var(--font-mono); color: var(--fg-muted); } .tc-mcp-detail > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } -.tc-mcp-detail > .tc-icon { width: 12px; height: 12px; flex: none; } -.tc-keys { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } -.tc-key { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); - background: color-mix(in srgb, var(--fg) 5%, transparent); font: 400 11px/1 var(--font-mono); color: var(--fg-muted); white-space: nowrap; } -.tc-key > .tc-icon { width: 11px; height: 11px; } -.tc-mx-name .tc-badge { height: 18px; font-size: 11px; font-weight: 500; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); } +.tc-mcp-detail > .tc-icon { width: 0.75rem; height: 0.75rem; flex: none; } +.tc-keys { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; } +.tc-key { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--radius-sm); + background: color-mix(in srgb, var(--fg) 5%, transparent); font: 400 0.6875rem/1 var(--font-mono); color: var(--fg-muted); white-space: nowrap; } +.tc-key > .tc-icon { width: 0.6875rem; height: 0.6875rem; } +.tc-mx-name .tc-badge { height: 1.125rem; font-size: 0.6875rem; font-weight: 500; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); } .tc-mx-name .tc-btn--xs { margin-left: 2px; } .tc-cell[data-tone="warn"] { color: var(--warn-text); font-weight: 500; } @@ -1339,111 +1343,111 @@ html.tc-locked { overflow: hidden; } .tc-cell--own { color: var(--fg); cursor: default; } .tc-cell--own > span { color: var(--fg-muted); } -.tc-menu-status { display: flex; gap: 8px; align-items: flex-start; margin: 2px 4px 6px; padding: 8px 10px; border-radius: var(--radius-md); - background: var(--warn-soft); color: var(--warn-text); font-size: 12px; line-height: 17px; } -.tc-menu-status > .tc-icon { width: 14px; height: 14px; flex: none; margin-top: 1px; } +.tc-menu-status { display: flex; gap: 0.5rem; align-items: flex-start; margin: 2px 0.25rem 0.375rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); + background: var(--warn-soft); color: var(--warn-text); font-size: 0.75rem; line-height: 1.0625rem; } +.tc-menu-status > .tc-icon { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 1px; } /* ---------------------------------------------------------- inspector --- */ -.tc-layer--sheet > .tc-mcp-inspector { width: min(560px, 100%); } -.tc-avail-row .tc-badge--warn { height: 18px; font-size: 11px; } +.tc-layer--sheet > .tc-mcp-inspector { width: min(35rem, 100%); } +.tc-avail-row .tc-badge--warn { height: 1.125rem; font-size: 0.6875rem; } .tc-avail-row--open { background: color-mix(in srgb, var(--warn) 4%, transparent); } -.tc-diff { grid-column: 2 / -1; margin-top: 10px; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); border-radius: var(--radius-lg); +.tc-diff { grid-column: 2 / -1; margin-top: 0.625rem; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } -[data-theme="dark"] .tc-diff { background: oklch(1 0 0 / 0.02); } -.tc-diff-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 12px; padding: 9px 12px; font-size: 12px; line-height: 18px; } +[data-theme="dark"] .tc-diff { background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-diff-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 0.5625rem 0.75rem; font-size: 0.75rem; line-height: 1.125rem; } .tc-diff-row + .tc-diff-row { border-top: 1px solid var(--hairline); } .tc-diff-label { color: var(--fg-muted); } -.tc-diff-vals { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; min-width: 0; } +.tc-diff-vals { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 0.625rem; min-width: 0; } .tc-diff-who { color: var(--fg-muted); white-space: nowrap; } -.tc-diff-vals code { font-size: 12px; color: var(--fg); overflow-wrap: anywhere; } -.tc-diff-vals mark { background: var(--warn-soft); color: var(--warn-text); border-radius: 3px; padding: 0 1px; } -.tc-diff-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px 8px 12px; border-top: 1px solid var(--hairline); +.tc-diff-vals code { font-size: 0.75rem; color: var(--fg); overflow-wrap: anywhere; } +.tc-diff-vals mark { background: var(--warn-soft); color: var(--warn-text); border-radius: 0.1875rem; padding: 0 1px; } +.tc-diff-foot { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; padding: 0.5rem 0.625rem 0.5rem 0.75rem; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } .tc-diff-foot .tc-hint { margin-right: auto; } .tc-signin { list-style: none; margin: 0; padding: 0; } -.tc-signin li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; } +.tc-signin li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; } .tc-signin li + li { border-top: 1px solid var(--hairline); } -.tc-signin .tc-tile { width: 20px; height: 20px; } +.tc-signin .tc-tile { width: 1.25rem; height: 1.25rem; } .tc-signin code { color: var(--fg); } .tc-secret-val { letter-spacing: 0.12em; color: var(--fg-muted); } /* ------------------------------------------------------------- editor --- */ -.tc-form { display: flex; flex-direction: column; gap: 18px; min-height: 0; } -.tc-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } -.tc-form-field > .tc-label { display: flex; align-items: center; gap: 8px; } +.tc-form { display: flex; flex-direction: column; gap: 1.125rem; min-height: 0; } +.tc-form-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; } +.tc-form-field > .tc-label { display: flex; align-items: center; gap: 0.5rem; } .tc-form-field > .tc-label .tc-spacer + * { font-weight: 400; } -.tc-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; } -.tc-form .tc-input { height: 32px; } -.tc-form .tc-input.tc-input--mono { font-family: var(--font-mono); font-size: 13px; } +.tc-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; } +.tc-form .tc-input { height: 2rem; } +.tc-form .tc-input.tc-input--mono { font-family: var(--font-mono); font-size: 0.8125rem; } .tc-paste { position: relative; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background: var(--surface-sunken); - padding: 10px 12px; font: 400 12px/18px var(--font-mono); color: var(--fg); white-space: pre; overflow: hidden; } -.tc-paste-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-paste-meta > .tc-icon { width: 14px; height: 14px; color: var(--ok); } + padding: 0.625rem 0.75rem; font: 400 0.75rem/1.125rem var(--font-mono); color: var(--fg); white-space: pre; overflow: hidden; } +.tc-paste-meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-paste-meta > .tc-icon { width: 0.875rem; height: 0.875rem; color: var(--ok); } .tc-paste-meta strong { color: var(--fg); font-weight: 500; } -.tc-argv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-muted); } -.tc-arg { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); border: 1px solid var(--border); - background: var(--surface); font: 400 11.5px/1 var(--font-mono); color: var(--fg); } -[data-theme="dark"] .tc-arg { background: oklch(1 0 0 / 0.03); } +.tc-argv { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--fg-muted); } +.tc-arg { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.375rem; border-radius: var(--radius-xs); border: 1px solid var(--border); + background: var(--surface); font: 400 0.71875rem/1 var(--font-mono); color: var(--fg); } +[data-theme="dark"] .tc-arg { background: color-mix(in srgb, var(--fg) 3%, transparent); } .tc-arg--exe { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent-text); } -.tc-argv .tc-btn--link { font-size: 12px; color: var(--fg-muted); margin-left: auto; } +.tc-argv .tc-btn--link { font-size: 0.75rem; color: var(--fg-muted); margin-left: auto; } .tc-kvs { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } -[data-theme="dark"] .tc-kvs { background: oklch(1 0 0 / 0.02); } -.tc-kv-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) 28px; gap: 6px; padding: 6px; align-items: center; } +[data-theme="dark"] .tc-kvs { background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-kv-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) 1.75rem; gap: 0.375rem; padding: 0.375rem; align-items: center; } .tc-kv-row + .tc-kv-row { border-top: 1px solid var(--hairline); } -.tc-kv-row .tc-input { height: 28px; font-family: var(--font-mono); font-size: 12.5px; padding: 0 9px; } +.tc-kv-row .tc-input { height: 1.75rem; font-family: var(--font-mono); font-size: 0.78125rem; padding: 0 0.5625rem; } .tc-secret { position: relative; display: flex; min-width: 0; } -.tc-secret > .tc-input { padding-right: 32px; } -.tc-secret > .tc-btn { position: absolute; right: 2px; top: 2px; width: 24px; height: 24px; } -.tc-kv-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-secret > .tc-input { padding-right: 2rem; } +.tc-secret > .tc-btn { position: absolute; right: 2px; top: 2px; width: 1.5rem; height: 1.5rem; } +.tc-kv-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); } .tc-kv-foot .tc-hint { margin-left: auto; } -.tc-changed { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--info-soft); - color: var(--info-text); font-size: 11px; font-weight: 500; } +.tc-changed { display: inline-flex; align-items: center; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--radius-sm); background: var(--info-soft); + color: var(--info-text); font-size: 0.6875rem; font-weight: 500; } /* Rail rows: who gets the server, and what saving does to each agent. */ .tc-agentpick { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow: hidden; } -[data-theme="dark"] .tc-agentpick { background: oklch(1 0 0 / 0.02); } -.tc-agentpick-row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 9px 12px; } +[data-theme="dark"] .tc-agentpick { background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-agentpick-row { display: grid; grid-template-columns: 1.125rem auto minmax(0, 1fr); gap: 2px 0.625rem; align-items: center; padding: 0.5625rem 0.75rem; } .tc-agentpick-row + .tc-agentpick-row { border-top: 1px solid var(--hairline); } .tc-agentpick-row .tc-checkbox { margin: 0; } .tc-agentpick-row .tc-row-main { gap: 0; } -.tc-agentpick-row .tc-avail-name { font-size: 13px; } -.tc-agentpick-row .tc-avail-note { font-size: 11.5px; line-height: 16px; } +.tc-agentpick-row .tc-avail-name { font-size: 0.8125rem; } +.tc-agentpick-row .tc-avail-note { font-size: 0.71875rem; line-height: 1rem; } .tc-agentpick-row[data-tone="warn"] .tc-avail-note { color: var(--warn-text); } .tc-agentpick-row[data-off="true"] .tc-avail-name { color: var(--fg-muted); font-weight: 400; } /* Version choice when sharing an agent's own server. */ -.tc-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--border); +.tc-choice { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); cursor: pointer; } -[data-theme="dark"] .tc-choice { background: oklch(1 0 0 / 0.02); } +[data-theme="dark"] .tc-choice { background: color-mix(in srgb, var(--fg) 2%, transparent); } .tc-choice[data-checked="true"] { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); } -.tc-choice input[type="radio"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 2px 0 0; border-radius: 50%; +.tc-choice input[type="radio"] { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; margin: 2px 0 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); display: grid; place-items: center; } .tc-choice input[type="radio"]:checked { border: 5px solid var(--accent); background: var(--on-accent); } -.tc-choice-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } -.tc-choice-head .tc-tile { width: 20px; height: 20px; } -.tc-choice-body { grid-column: 2; display: flex; flex-direction: column; gap: 4px; min-width: 0; } +.tc-choice-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; } +.tc-choice-head .tc-tile { width: 1.25rem; height: 1.25rem; } +.tc-choice-body { grid-column: 2; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } /* Remove confirmation. */ -.tc-mcp-remove { width: min(460px, 100%); } -.tc-dialog-list { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } -.tc-dialog-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 8px 12px; font-size: 13px; } +.tc-mcp-remove { width: min(28.75rem, 100%); } +.tc-dialog-list { list-style: none; margin: 0.25rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } +.tc-dialog-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; } .tc-dialog-list li + li { border-top: 1px solid var(--hairline); } -.tc-dialog-list .tc-tile { width: 20px; height: 20px; } -.tc-dialog-list code { color: var(--fg-muted); font-size: 12px; } +.tc-dialog-list .tc-tile { width: 1.25rem; height: 1.25rem; } +.tc-dialog-list code { color: var(--fg-muted); font-size: 0.75rem; } /* --------------------------------------------------------------- phone --- */ -.tc-prow-detail { grid-column: 1; margin: 0; font: 400 12px/18px var(--font-mono); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-prow-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; } -.tc-prow-name-line .tc-badge { height: 18px; font-size: 11px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); } +.tc-prow-detail { grid-column: 1; margin: 0; font: 400 0.75rem/1.125rem var(--font-mono); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-prow-name-line { display: flex; align-items: center; gap: 0.375rem; min-width: 0; } +.tc-prow-name-line .tc-badge { height: 1.125rem; font-size: 0.6875rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5%, transparent); } .tc-prow-agents .tc-warnline { color: var(--warn-text); } -.tc-mx-name > a.tc-btn { height: 24px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--fg); text-decoration: none; } +.tc-mx-name > a.tc-btn { height: 1.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1; color: var(--fg); text-decoration: none; } .tc-mx-name > a.tc-btn:hover { text-decoration: none; } .tc-mcp-detail--prose { font-family: var(--font-sans); } /* Inherited and own-entry cells are facts, not controls. */ @@ -1459,33 +1463,33 @@ html.tc-locked { overflow: hidden; } .tc-mcp-library .tc-sk-desktop-filters { display: flex; align-items: center; gap: var(--space-2); } .tc-mcp-table .tc-mx-head { position: relative; } .tc-mcp-table .tc-mx-agent-name { min-width: 0; } -.tc-mcp-table .tc-mx-agent-name .tc-tile { width: 20px; height: 20px; } +.tc-mcp-table .tc-mx-agent-name .tc-tile { width: 1.25rem; height: 1.25rem; } .tc-mcp-table .tc-key { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } -.tc-mcp-loading, .tc-mcp-diff-loading { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); color: var(--fg-muted); font-size: 13px; } +.tc-mcp-loading, .tc-mcp-diff-loading { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); color: var(--fg-muted); font-size: 0.8125rem; } .tc-cell--error, .tc-cell--unsupported { color: var(--fg-muted); cursor: help; } -.tc-cell--via { font-size: 12px; } +.tc-cell--via { font-size: 0.75rem; } .tc-mcp-library .tc-warning, .tc-mcp-editor .tc-warning, .tc-mcp-inspector .tc-warning, .tc-mcp-remove .tc-warning { color: var(--warn-text); } .tc-mcp-inspect-actions { display: flex; align-items: center; gap: var(--space-1); } -.tc-mcp-inspector .tc-pathlist { grid-template-columns: 82px minmax(0, 1fr); } +.tc-mcp-inspector .tc-pathlist { grid-template-columns: 5.125rem minmax(0, 1fr); } .tc-mcp-connection dd { flex-wrap: wrap; } .tc-mcp-connection dd > .tc-btn { margin-left: auto; flex: none; } -.tc-mcp-secret-value { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; min-width: 0; } -.tc-mcp-path { overflow-wrap: anywhere; font-size: 12px; color: var(--fg-muted); } -.tc-mcp-inspector .tc-signin code { overflow-wrap: anywhere; min-width: 0; font-size: 12px; } +.tc-mcp-secret-value { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.75rem; min-width: 0; } +.tc-mcp-path { overflow-wrap: anywhere; font-size: 0.75rem; color: var(--fg-muted); } +.tc-mcp-inspector .tc-signin code { overflow-wrap: anywhere; min-width: 0; font-size: 0.75rem; } .tc-mcp-inspector .tc-insp-section h3 { margin: 0; font-weight: 400; } .tc-mcp-editor .tc-form-field .tc-label { flex-wrap: wrap; } .tc-mcp-editor .tc-form-row { grid-template-columns: minmax(0, 1fr) auto; } -.tc-mcp-editor .tc-form > .tc-hint { margin-top: -12px; } +.tc-mcp-editor .tc-form > .tc-hint { margin-top: -0.75rem; } .tc-mcp-editor .tc-form-field .tc-hint, .tc-mcp-editor .tc-wizard-rail .tc-hint { margin: 0; } -.tc-mcp-editor .tc-form-field > .tc-label > .tc-hint { font-weight: 400; font-size: 11.5px; } -.tc-mcp-editor .tc-paste { height: auto; min-height: 104px; resize: vertical; overflow: auto; white-space: pre-wrap; } -.tc-mcp-editor .tc-secret > .tc-input { padding-right: 32px; } -.tc-mcp-editor .tc-mcp-secret-input { resize: vertical; min-height: 28px; height: 28px; line-height: 18px; padding-block: 4px; overflow: auto; } +.tc-mcp-editor .tc-form-field > .tc-label > .tc-hint { font-weight: 400; font-size: 0.71875rem; } +.tc-mcp-editor .tc-paste { height: auto; min-height: 6.5rem; resize: vertical; overflow: auto; white-space: pre-wrap; } +.tc-mcp-editor .tc-secret > .tc-input { padding-right: 2rem; } +.tc-mcp-editor .tc-mcp-secret-input { resize: vertical; min-height: 1.75rem; height: 1.75rem; line-height: 1.125rem; padding-block: 0.25rem; overflow: auto; } .tc-mcp-argument { display: flex; align-items: center; gap: var(--space-2); } -.tc-mcp-argument > .tc-input { resize: vertical; height: auto; min-height: 32px; font-size: 12px; } -.tc-mcp-argument .tc-hint { flex: none; font-size: 11px; } +.tc-mcp-argument > .tc-input { resize: vertical; height: auto; min-height: 2rem; font-size: 0.75rem; } +.tc-mcp-argument .tc-hint { flex: none; font-size: 0.6875rem; } .tc-mcp-arguments { display: flex; flex-direction: column; gap: var(--space-2); } -.tc-mcp-editor .tc-arg { max-width: 100%; height: auto; min-height: 20px; overflow-wrap: anywhere; white-space: pre-wrap; } +.tc-mcp-editor .tc-arg { max-width: 100%; height: auto; min-height: 1.25rem; overflow-wrap: anywhere; white-space: pre-wrap; } .tc-mcp-editor .tc-choice code { overflow-wrap: anywhere; min-width: 0; } .tc-mcp-editor .tc-choice-head { flex-wrap: wrap; } .tc-mcp-editor .tc-agentpick-row .tc-avail-note { overflow-wrap: anywhere; } @@ -1504,25 +1508,25 @@ html.tc-locked { overflow: hidden; } .tc-mcp-inspector .tc-diff { grid-column: 1 / -1; } .tc-mcp-inspector .tc-diff-row { grid-template-columns: minmax(0, 1fr); } .tc-mcp-inspector .tc-diff-vals { grid-template-columns: minmax(0, 1fr); } - .tc-mcp-inspector .tc-diff-foot > .tc-btn { min-height: 44px; flex: 1; white-space: normal; } + .tc-mcp-inspector .tc-diff-foot > .tc-btn { min-height: var(--touch); flex: 1; white-space: normal; } .tc-mcp-inspector .tc-avail-row > .tc-mcp-inspect-actions { grid-column: 1 / -1; justify-content: flex-end; } - .tc-mcp-inspector .tc-avail-row > .tc-btn { grid-column: 2; justify-self: start; min-height: 44px; } + .tc-mcp-inspector .tc-avail-row > .tc-btn { grid-column: 2; justify-self: start; min-height: var(--touch); } .tc-mcp-inspector .tc-mcp-inspector-remove { display: none; } - .tc-mcp-inspector .tc-insp-foot > .tc-btn { min-height: 44px; } + .tc-mcp-inspector .tc-insp-foot > .tc-btn { min-height: var(--touch); } .tc-mcp-editor .tc-form-row { grid-template-columns: minmax(0, 1fr); } - .tc-mcp-editor .tc-input, .tc-mcp-editor .tc-kv-row .tc-input { min-height: 44px; height: auto; font-size: 16px; } - .tc-mcp-editor .tc-paste { min-height: 120px; font-size: 13px; } - .tc-mcp-editor .tc-mcp-secret-input { padding-block: 12px; } - .tc-mcp-editor .tc-secret > .tc-input { padding-right: 44px; } - .tc-mcp-editor .tc-secret > .tc-btn { min-width: 40px; min-height: 40px; } - .tc-mcp-editor .tc-kv-row { grid-template-columns: minmax(0, 1fr) 44px; gap: var(--space-2); } + .tc-mcp-editor .tc-input, .tc-mcp-editor .tc-kv-row .tc-input { min-height: var(--touch); height: auto; font-size: 1rem; } + .tc-mcp-editor .tc-paste { min-height: 7.5rem; font-size: 0.8125rem; } + .tc-mcp-editor .tc-mcp-secret-input { padding-block: 0.75rem; } + .tc-mcp-editor .tc-secret > .tc-input { padding-right: 2.75rem; } + .tc-mcp-editor .tc-secret > .tc-btn { min-width: 2.5rem; min-height: 2.5rem; } + .tc-mcp-editor .tc-kv-row { grid-template-columns: minmax(0, 1fr) var(--touch); gap: var(--space-2); } .tc-mcp-editor .tc-kv-row > .tc-input { grid-column: 1; } .tc-mcp-editor .tc-kv-row > .tc-secret { grid-column: 1; } - .tc-mcp-editor .tc-kv-row > .tc-btn { grid-column: 2; grid-row: 1 / 3; min-width: 44px; min-height: 44px; } - .tc-mcp-editor .tc-kv-foot .tc-btn, .tc-mcp-editor .tc-argv .tc-btn, .tc-mcp-editor .tc-seg button { min-height: 44px; } + .tc-mcp-editor .tc-kv-row > .tc-btn { grid-column: 2; grid-row: 1 / 3; min-width: var(--touch); min-height: var(--touch); } + .tc-mcp-editor .tc-kv-foot .tc-btn, .tc-mcp-editor .tc-argv .tc-btn, .tc-mcp-editor .tc-seg button { min-height: var(--touch); } .tc-mcp-editor .tc-argv .tc-btn { margin-left: 0; } .tc-mcp-editor .tc-choice { padding: var(--space-4); } - .tc-mcp-editor .tc-choice-head { font-size: 14px; } + .tc-mcp-editor .tc-choice-head { font-size: 0.875rem; } .tc-mcp-editor .tc-agentpick-row { padding: var(--space-3); } .tc-mcp-editor .tc-wizard-foot .tc-btn--primary { white-space: normal; } .tc-mcp-editor .tc-form-field > .tc-label > .tc-spacer { display: none; } @@ -1530,9 +1534,9 @@ html.tc-locked { overflow: hidden; } } .tc-mcp-editor .tc-choice--summary { grid-template-columns: minmax(0, 1fr); cursor: default; } .tc-mcp-editor .tc-choice--summary .tc-choice-body { grid-column: 1; } -.tc-mcp-editor .tc-wizard-head > .tc-tile { width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-lg); } +.tc-mcp-editor .tc-wizard-head > .tc-tile { width: 2.25rem; height: 2.25rem; flex: none; border: 1px solid var(--border); border-radius: var(--radius-lg); } @media (max-width: 1023.98px) { - #page-mcp { padding-top: 0; gap: 12px; --_gap: 12px; } + #page-mcp { padding-top: 0; gap: 0.75rem; --_gap: 0.75rem; } } @media (max-width: 1023.98px) { body[data-console-route="mcp"] .tc-phonebar, @@ -1541,7 +1545,7 @@ html.tc-locked { overflow: hidden; } .tc-mcp-editor .tc-wizard-head > .tc-sheet-head-text { flex: 1; } } .tc-mcp-editor .tc-mcp-secret-input { white-space: pre; scrollbar-width: none; } -.tc-mcp-editor textarea.tc-mcp-secret-input { height: auto; min-height: 56px; } +.tc-mcp-editor textarea.tc-mcp-secret-input { height: auto; min-height: 3.5rem; } .tc-mcp-table .tc-mx[data-no-agents="true"] { --mx-cols: minmax(0, 1fr); min-width: 0; } @media (max-width: 1023.98px) { .tc-mcp-library .tc-sk-agent-chips { scrollbar-width: none; } @@ -1550,10 +1554,10 @@ html.tc-locked { overflow: hidden; } cannot cover an inspector policy or a dialog’s Save/Cancel controls. */ .tc-root:has(.tc-mcp-inspector, .tc-mcp-editor, .tc-mcp-remove) .tc-toaster { visibility: hidden; } #page-mcp .tc-page-sub { max-width: none; } -.tc-mcp-table > .tc-sk-library-foot { padding: 12px 16px; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-mcp-table > .tc-sk-library-foot { padding: 0.75rem 1rem; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } .tc-mcp-mobile-footer { display: none; } @media (min-width: 1024px) { - #page-mcp { gap: 20px; --_gap: 20px; } + #page-mcp { gap: 1.25rem; --_gap: 1.25rem; } .tc-layer--sheet:has(> .tc-mcp-inspector) { padding: 0; } .tc-layer--sheet > .tc-mcp-inspector { height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } } @@ -1561,18 +1565,18 @@ html.tc-locked { overflow: hidden; } .tc-mcp-mobile-footer { display: block; } } .tc-mcp-phone-menu { display: none; } -.tc-mcp-remove .tc-dialog-list li > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; min-width: 0; } +.tc-mcp-remove .tc-dialog-list li > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 0.25rem; min-width: 0; } .tc-mcp-remove .tc-dialog-list code { overflow-wrap: anywhere; } @media (max-width: 1023.98px) { .tc-mcp-inspector [data-mcp-menu-head] { display: none; } .tc-mcp-inspector .tc-insp-foot > .tc-spacer { display: none; } - .tc-mcp-inspector .tc-insp-foot > .tc-mcp-phone-menu { display: inline-flex; min-width: 44px; } + .tc-mcp-inspector .tc-insp-foot > .tc-mcp-phone-menu { display: inline-flex; min-width: var(--touch); } .tc-mcp-inspector .tc-insp-foot > [data-mcp-inspect="edit"] { flex: 1; } } -@media (min-width: 1024px) { .tc-mcp-editor .tc-paste { min-height: 112px; } } +@media (min-width: 1024px) { .tc-mcp-editor .tc-paste { min-height: 7rem; } } @media (max-width: 1023.98px) { .tc-mcp-library .tc-sk-notices { display: none; } - .tc-mcp-library .tc-mcp-phone-attention { display: flex; min-height: 60px; } + .tc-mcp-library .tc-mcp-phone-attention { display: flex; min-height: 3.75rem; } } /* Skill updates and plugin hooks: additions on top of the Skills library @@ -1581,25 +1585,25 @@ html.tc-locked { overflow: hidden; } /* ------------------------------------------------------ list header --- */ /* The library card gets its own header: status filters on the left, update checking and view options on the right. Replaces the PR's options row. */ -.tc-lh { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px 0 8px; } +.tc-lh { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-height: 3rem; padding: 0.375rem 0.5rem; } .tc-lh-filters { display: flex; align-items: center; gap: 2px; } -.tc-lh-filter { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-md); - background: none; color: var(--fg-muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none !important; } +.tc-lh-filter { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.625rem; border: 0; border-radius: var(--radius-md); + background: none; color: var(--fg-muted); font: inherit; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none !important; } .tc-lh-filter:hover { color: var(--fg); background: var(--hover); } .tc-lh-filter[aria-pressed="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); } .tc-lh-filter .tc-dot { margin: 0; } -.tc-lh-filter .tc-tab-count { font-size: 11.5px; } +.tc-lh-filter .tc-tab-count { font-size: 0.71875rem; } .tc-lh-filter[data-tone="accent"] .tc-dot { color: var(--accent); } -.tc-lh-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex: none; } -.tc-lh-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--fg-muted); white-space: nowrap; } -.tc-lh-status .tc-spinner { width: 12px; height: 12px; border-width: 1.5px; color: var(--fg-muted); } +.tc-lh-sep { width: 1px; height: 1.125rem; background: var(--border); margin: 0 0.25rem; flex: none; } +.tc-lh-status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); white-space: nowrap; } +.tc-lh-status .tc-spinner { width: 0.75rem; height: 0.75rem; border-width: 1.5px; color: var(--fg-muted); } .tc-lh-view { position: relative; } .tc-menu[aria-label="Skill view options"] { width: min(328px, calc(100vw - 16px)); } .tc-lh ~ .tc-mx .tc-mx-head { border-radius: 0; } .tc-lh .tc-btn[aria-expanded="true"] { background: var(--surface); border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); } /* Menu items that are checkboxes rather than radios share the check mark. */ -.tc-menu-item[role="menuitemcheckbox"] { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; } +.tc-menu-item[role="menuitemcheckbox"] { align-items: flex-start; padding-top: 0.375rem; padding-bottom: 0.375rem; } /* ---------------------------------------------------------- rows ------ */ /* A tracked skill names its repository in the name line. */ @@ -1608,10 +1612,10 @@ html.tc-locked { overflow: hidden; } .tc-tagline--src[data-tone="warn"] code { color: var(--warn-text); } /* The update itself is a small accent button, the row's one call to action. */ -.tc-upd { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: var(--radius-full); +.tc-upd { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding: 0 0.5rem 0 0.375rem; border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-soft); color: var(--accent-text); - font: 500 11.5px/1 var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none !important; } -.tc-upd .tc-icon { width: 12px; height: 12px; } + font: 500 0.71875rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none !important; } +.tc-upd .tc-icon { width: 0.75rem; height: 0.75rem; } .tc-upd:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } [data-theme="dark"] .tc-upd { color: color-mix(in srgb, var(--accent-text) 60%, white); } @@ -1619,83 +1623,83 @@ html.tc-locked { overflow: hidden; } .tc-mx-actions .tc-btn--sm { white-space: nowrap; } /* Plugin groups carry their hooks. */ -.tc-mx-group .tc-hookchip, .tc-plist-group .tc-hookchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: var(--radius-sm); - border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); background: var(--warn-soft); color: var(--warn-text); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; } -.tc-mx-group .tc-hookchip .tc-icon, .tc-plist-group .tc-hookchip .tc-icon { width: 13px; height: 13px; } +.tc-mx-group .tc-hookchip, .tc-plist-group .tc-hookchip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.5rem; border-radius: var(--radius-sm); + border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); background: var(--warn-soft); color: var(--warn-text); font: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer; white-space: nowrap; } +.tc-mx-group .tc-hookchip .tc-icon, .tc-plist-group .tc-hookchip .tc-icon { width: 0.8125rem; height: 0.8125rem; } .tc-mx-group .tc-hookchip span, .tc-plist-group .tc-hookchip span { font-weight: 400; opacity: 0.85; } /* Hidden bundled skills: a quiet last row instead of a permanent switch. */ -.tc-mx-hidden { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-top: 1px solid var(--border); - font-size: 12px; line-height: 18px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } -.tc-mx-hidden .tc-icon { width: 14px; height: 14px; } +.tc-mx-hidden { display: flex; align-items: center; gap: 0.5rem; min-height: var(--touch); padding: 0 1rem; border-top: 1px solid var(--border); + font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } +.tc-mx-hidden .tc-icon { width: 0.875rem; height: 0.875rem; } .tc-mx-hidden .tc-mono { color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tc-mx-head .tc-mx-more { font-weight: 500; } /* ------------------------------------------------------ review dialog -- */ -.tc-ur { position: relative; z-index: 1; width: 1040px; max-width: 100%; height: 812px; max-height: 100%; display: flex; flex-direction: column; +.tc-ur { position: relative; z-index: 1; width: 65rem; max-width: 100%; height: 50.75rem; max-height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-dialog); } -.tc-ur-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 14px 20px; } -.tc-ur-head .tc-tile--icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } +.tc-ur-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.125rem 1rem 0.875rem 1.25rem; } +.tc-ur-head .tc-tile--icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } [data-theme="dark"] .tc-ur-head .tc-tile--icon { color: color-mix(in srgb, var(--accent-text) 60%, white); } -.tc-ur-head .tc-tile--icon .tc-icon { width: 18px; height: 18px; } +.tc-ur-head .tc-tile--icon .tc-icon { width: 1.125rem; height: 1.125rem; } .tc-ur-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } -.tc-ur-title h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; } -.tc-ur-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-ur-meta code { font-size: 12px; color: var(--fg); } -.tc-ur-meta .tc-icon { width: 13px; height: 13px; } -.tc-ur-queue { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: var(--radius-full); border: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); white-space: nowrap; } +.tc-ur-title h2 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } +.tc-ur-meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-ur-meta code { font-size: 0.75rem; color: var(--fg); } +.tc-ur-meta .tc-icon { width: 0.8125rem; height: 0.8125rem; } +.tc-ur-queue { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.25rem 0 0.625rem; border-radius: var(--radius-full); border: 1px solid var(--border); font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; } .tc-ur-queue strong { color: var(--fg); font-weight: 500; } -.tc-ur-facts { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.5fr); margin: 0 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); } -.tc-ur-fact { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 12px; min-width: 0; } +.tc-ur-facts { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.5fr); margin: 0 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); } +.tc-ur-fact { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6875rem 0.875rem 0.75rem; min-width: 0; } .tc-ur-fact + .tc-ur-fact { border-left: 1px solid var(--hairline); } -.tc-ur-fact-label { font-size: 12px; line-height: 16px; color: var(--fg-muted); } -.tc-ur-fact-value { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; line-height: 20px; font-weight: 500; min-width: 0; } -.tc-ur-fact-value code { font-size: 12.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } -.tc-ur-fact-note { font-size: 12px; line-height: 18px; color: var(--fg-muted); min-width: 0; } -.tc-ur-fact-note code { font-size: 11.5px; color: var(--fg-muted); } -.tc-ur-counts { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; } -.tc-ur-counts > span { display: inline-flex; align-items: center; gap: 4px; } -.tc-ur-counts i { font-style: normal; font-weight: 400; color: var(--fg-muted); font-size: 12px; } -.tc-ur-fact .tc-tiles .tc-tile { width: 22px; height: 22px; font-size: 8.5px; } - -.tc-ur-edits { margin: 12px 20px 0; } +.tc-ur-fact-label { font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); } +.tc-ur-fact-value { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; min-width: 0; } +.tc-ur-fact-value code { font-size: 0.78125rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } +.tc-ur-fact-note { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); min-width: 0; } +.tc-ur-fact-note code { font-size: 0.71875rem; color: var(--fg-muted); } +.tc-ur-counts { display: inline-flex; align-items: center; gap: 0.625rem; font: 500 0.8125rem/1.25rem var(--font-sans); font-variant-numeric: tabular-nums; } +.tc-ur-counts > span { display: inline-flex; align-items: center; gap: 0.25rem; } +.tc-ur-counts i { font-style: normal; font-weight: 400; color: var(--fg-muted); font-size: 0.75rem; } +.tc-ur-fact .tc-tiles .tc-tile { width: 1.375rem; height: 1.375rem; font-size: 0.53125rem; } + +.tc-ur-edits { margin: 0.75rem 1.25rem 0; } .tc-ur-edits .tc-notice-desc { opacity: 0.9; } -.tc-ur-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 296px minmax(0, 1fr); margin-top: 16px; border-top: 1px solid var(--border); } -.tc-ur-files { min-height: 0; overflow: hidden; padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } -.tc-ur-files-label { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--fg-muted); } +.tc-ur-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); margin-top: 1rem; border-top: 1px solid var(--border); } +.tc-ur-files { min-height: 0; overflow: hidden; padding: 0.625rem 0.5rem; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } +.tc-ur-files-label { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--fg-muted); } .tc-ur-files-label + .tc-ur-file { margin-top: 0; } -.tc-ur-file { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 5px 8px; border: 0; border-radius: var(--radius-md); +.tc-ur-file { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-height: 2.125rem; padding: 0.3125rem 0.5rem; border: 0; border-radius: var(--radius-md); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; } .tc-ur-file:hover { background: var(--hover); } .tc-ur-file[aria-selected="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-xs); } -[data-theme="dark"] .tc-ur-file[aria-selected="true"] { background: oklch(1 0 0 / 0.05); } -.tc-ur-file > .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } +[data-theme="dark"] .tc-ur-file[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 5%, transparent); } +.tc-ur-file > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } .tc-ur-file[data-status="modified"] > .tc-icon { color: var(--info); } .tc-ur-file[data-status="added"] > .tc-icon { color: var(--ok); } .tc-ur-file[data-status="removed"] > .tc-icon { color: var(--danger); } -.tc-ur-file-name { display: flex; flex-direction: column; min-width: 0; font: 400 12.5px/18px var(--font-mono); } +.tc-ur-file-name { display: flex; flex-direction: column; min-width: 0; font: 400 0.78125rem/1.125rem var(--font-mono); } .tc-ur-file-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-ur-file-name > small { font: 400 11.5px/16px var(--font-sans); color: var(--fg-muted); } +.tc-ur-file-name > small { font: 400 0.71875rem/1rem var(--font-sans); color: var(--fg-muted); } .tc-ur-file[data-status="removed"] .tc-ur-file-name > span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); } -.tc-ur-file-stat { display: inline-flex; gap: 6px; font: 400 11.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); white-space: nowrap; } +.tc-ur-file-stat { display: inline-flex; gap: 0.375rem; font: 400 0.71875rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); white-space: nowrap; } .tc-ur-file-stat .add { color: var(--ok-text); } .tc-ur-file-stat .del { color: var(--danger-text); } .tc-ur-file[data-dim] { color: var(--fg-muted); } -.tc-ur-files hr { height: 1px; border: 0; margin: 8px 8px; background: var(--hairline); } -.tc-ur-files-note { margin: auto 8px 2px; display: flex; gap: 8px; font-size: 12px; line-height: 17px; color: var(--fg-muted); } -.tc-ur-files-note .tc-icon { width: 14px; height: 14px; flex: none; margin-top: 1px; } +.tc-ur-files hr { height: 1px; border: 0; margin: 0.5rem 0.5rem; background: var(--hairline); } +.tc-ur-files-note { margin: auto 0.5rem 2px; display: flex; gap: 0.5rem; font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } +.tc-ur-files-note .tc-icon { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 1px; } .tc-ur-diff { display: flex; flex-direction: column; min-height: 0; min-width: 0; } -.tc-ur-diff-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--hairline); } -.tc-ur-diff-head strong { font: 500 13px/18px var(--font-mono); } +.tc-ur-diff-head { display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0.5rem 0.75rem 0.5rem 1rem; border-bottom: 1px solid var(--hairline); } +.tc-ur-diff-head strong { font: 500 0.8125rem/1.125rem var(--font-mono); } .tc-ur-diff-head .tc-hint { margin: 0; } -.tc-ur-diff-head .tc-seg button { height: 24px; font-size: 12px; } -.tc-dv { flex: 1; min-height: 0; overflow: hidden; padding: 6px 0 12px; font: 400 12px/20px var(--font-mono); color: var(--fg); } -.tc-dv-line { display: grid; grid-template-columns: 44px 44px 20px minmax(0, 1fr); padding-right: 16px; white-space: pre-wrap; overflow-wrap: anywhere; } -.tc-dv-line > .n { text-align: right; padding-right: 10px; color: var(--fg-subtle); user-select: none; font-variant-numeric: tabular-nums; } +.tc-ur-diff-head .tc-seg button { height: 1.5rem; font-size: 0.75rem; } +.tc-dv { flex: 1; min-height: 0; overflow: hidden; padding: 0.375rem 0 0.75rem; font: 400 0.75rem/1.25rem var(--font-mono); color: var(--fg); } +.tc-dv-line { display: grid; grid-template-columns: var(--touch) var(--touch) 1.25rem minmax(0, 1fr); padding-right: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; } +.tc-dv-line > .n { text-align: right; padding-right: 0.625rem; color: var(--fg-subtle); user-select: none; font-variant-numeric: tabular-nums; } .tc-dv-line > .s { color: var(--fg-subtle); user-select: none; text-align: center; } .tc-dv-line[data-k="add"] { background: color-mix(in srgb, var(--ok) 9%, transparent); } .tc-dv-line[data-k="add"] > .s { color: var(--ok-text); } @@ -1703,181 +1707,181 @@ html.tc-locked { overflow: hidden; } .tc-dv-line[data-k="del"] { background: color-mix(in srgb, var(--danger) 8%, transparent); } .tc-dv-line[data-k="del"] > .s { color: var(--danger-text); } .tc-dv-line[data-k="del"] > .n { color: color-mix(in srgb, var(--danger-text) 60%, transparent); } -.tc-dv-line mark { color: inherit; border-radius: 3px; padding: 0 1px; } +.tc-dv-line mark { color: inherit; border-radius: 0.1875rem; padding: 0 1px; } .tc-dv-line[data-k="add"] mark { background: color-mix(in srgb, var(--ok) 24%, transparent); } .tc-dv-line[data-k="del"] mark { background: color-mix(in srgb, var(--danger) 22%, transparent); } -.tc-dv-hunk { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 4px 16px; font: 400 11.5px/18px var(--font-mono); color: var(--fg-muted); +.tc-dv-hunk { display: flex; align-items: center; gap: 0.5rem; margin: 0.375rem 0; padding: 0.25rem 1rem; font: 400 0.71875rem/1.125rem var(--font-mono); color: var(--fg-muted); background: color-mix(in srgb, var(--info) 6%, transparent); border-block: 1px solid color-mix(in srgb, var(--info) 12%, transparent); } -.tc-dv-hunk .tc-icon { width: 13px; height: 13px; } +.tc-dv-hunk .tc-icon { width: 0.8125rem; height: 0.8125rem; } .tc-dv-hunk:first-child { margin-top: 0; border-top: 0; } .tc-dv .k { color: var(--accent-text); } [data-theme="dark"] .tc-dv .k { color: color-mix(in srgb, var(--accent-text) 55%, white); } .tc-dv .m { color: var(--fg-muted); } -.tc-ur-foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } -.tc-ur-consent { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; } +.tc-ur-foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem 0.875rem 1.25rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-ur-consent { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; cursor: pointer; } .tc-ur-consent > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } -.tc-ur-consent strong { font-size: 13px; line-height: 20px; font-weight: 500; } -.tc-ur-consent small { font-size: 12px; line-height: 17px; color: var(--fg-muted); } +.tc-ur-consent strong { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; } +.tc-ur-consent small { font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } .tc-ur-foot .tc-btn--primary[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; } -.tc-ur-foot-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--fg-muted); } -.tc-ur-foot-note .tc-icon { width: 14px; height: 14px; } +.tc-ur-foot-note { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } +.tc-ur-foot-note .tc-icon { width: 0.875rem; height: 0.875rem; } /* ------------------------------------------------------- outcome states -- */ /* The review dialog's compact form: updating, updated, up to date, out of date, result not confirmed, couldn't prepare. Same panel, smaller. */ -.tc-ur--compact { width: min(480px, 100%); height: auto; } +.tc-ur--compact { width: min(30rem, 100%); height: auto; } .tc-ur--compact .tc-dialog-title:focus { outline: none; } -.tc-ur--compact .tc-dialog-body { padding: 24px 24px 16px; display: flex; flex-direction: column; gap: 8px; } -.tc-state-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-bottom: 6px; } -.tc-state-mark .tc-icon { width: 20px; height: 20px; color: inherit; } +.tc-ur--compact .tc-dialog-body { padding: 1.5rem 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; } +.tc-state-mark { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; flex: none; margin-bottom: 0.375rem; } +.tc-state-mark .tc-icon { width: 1.25rem; height: 1.25rem; color: inherit; } .tc-state-mark[data-tone="ok"] { background: var(--ok-soft); color: var(--ok-text); } .tc-state-mark[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-text); } .tc-state-mark[data-tone="idle"] { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg-muted); } .tc-state-mark[data-tone="danger"] { background: var(--danger-soft); color: var(--danger-text); } -.tc-state-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); } -.tc-state-list li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; font-size: 13px; line-height: 18px; } +.tc-state-list { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); } +.tc-state-list li { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; line-height: 1.125rem; } .tc-state-list li + li { border-top: 1px solid var(--hairline); } -.tc-state-list li > .tc-icon { width: 14px; height: 14px; color: var(--fg-muted); flex: none; } -.tc-state-list li > .end { margin-left: auto; color: var(--fg-muted); font-size: 12px; white-space: nowrap; } +.tc-state-list li > .tc-icon { width: 0.875rem; height: 0.875rem; color: var(--fg-muted); flex: none; } +.tc-state-list li > .end { margin-left: auto; color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; } .tc-state-list li[data-status="modified"] > .tc-icon { color: var(--info); } .tc-state-list li[data-status="added"] > .tc-icon { color: var(--ok); } .tc-state-list li[data-status="removed"] > .tc-icon { color: var(--danger); } .tc-state-list li[data-status="done"] > .tc-icon { color: var(--ok); } -.tc-state-list code { font-size: 12px; } +.tc-state-list code { font-size: 0.75rem; } .tc-ur--compact .tc-dialog-foot { align-items: center; } -.tc-ur--compact .tc-dialog-desc code { font-size: 12.5px; color: var(--fg); } +.tc-ur--compact .tc-dialog-desc code { font-size: 0.78125rem; color: var(--fg); } /* -------------------------------------------------- inspector source --- */ -.tc-src-status { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-top: 1px solid var(--hairline); font-size: 13px; line-height: 20px; } +.tc-src-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.625rem 0.625rem 0.875rem; border-top: 1px solid var(--hairline); font-size: 0.8125rem; line-height: 1.25rem; } .tc-src-status .tc-hint { margin: 0; } .tc-src-status strong { font-weight: 500; } -.tc-insp-banner { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--radius-xl); +.tc-insp-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 0.875rem; border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); background: var(--accent-soft); } .tc-insp-banner > .tc-icon { color: var(--accent-text); flex: none; } [data-theme="dark"] .tc-insp-banner > .tc-icon { color: color-mix(in srgb, var(--accent-text) 60%, white); } .tc-insp-banner > div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } -.tc-insp-banner strong { font-size: 14px; line-height: 20px; font-weight: 500; } -.tc-insp-banner span { font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-insp-banner code { font-size: 12px; color: var(--fg); } +.tc-insp-banner strong { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; } +.tc-insp-banner span { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-insp-banner code { font-size: 0.75rem; color: var(--fg); } /* ---------------------------------------------------------- hooks ------ */ -.tc-layer--sheet > .tc-sheet--hooks { width: 600px; } -.tc-hk-intro { margin: 0; font-size: 13px; line-height: 20px; color: var(--fg-muted); text-wrap: pretty; } -.tc-hk-plugin { display: flex; flex-direction: column; gap: 8px; } -.tc-hk-plugin-head { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; line-height: 20px; } +.tc-layer--sheet > .tc-sheet--hooks { width: 37.5rem; } +.tc-hk-intro { margin: 0; font-size: 0.8125rem; line-height: 1.25rem; color: var(--fg-muted); text-wrap: pretty; } +.tc-hk-plugin { display: flex; flex-direction: column; gap: 0.5rem; } +.tc-hk-plugin-head { display: flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; font-size: 0.875rem; line-height: 1.25rem; } .tc-hk-plugin-head strong { font-weight: 500; } -.tc-hk-plugin-head code { font-size: 12px; color: var(--fg-muted); } -.tc-hk-plugin-head .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } -.tc-hk-plugin-head .tc-spacer + span { font-size: 12px; color: var(--fg-muted); } -.tc-hk { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 14px 16px; } -.tc-hk-head { display: flex; align-items: center; gap: 12px; } +.tc-hk-plugin-head code { font-size: 0.75rem; color: var(--fg-muted); } +.tc-hk-plugin-head .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } +.tc-hk-plugin-head .tc-spacer + span { font-size: 0.75rem; color: var(--fg-muted); } +.tc-hk { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.875rem 0.875rem 0.875rem 1rem; } +.tc-hk-head { display: flex; align-items: center; gap: 0.75rem; } .tc-hk-event { display: flex; flex-direction: column; flex: 1; min-width: 0; } -.tc-hk-event strong { font-size: 14px; line-height: 20px; font-weight: 500; } -.tc-hk-event span { font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-hk-event code { font-size: 11.5px; color: var(--fg-muted); } -.tc-hk-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } +.tc-hk-event strong { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; } +.tc-hk-event span { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-hk-event code { font-size: 0.71875rem; color: var(--fg-muted); } +.tc-hk-state { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; } .tc-hk-state[data-tone="warn"] { color: var(--warn-text); } .tc-hk-state[data-tone="ok"] { color: var(--ok-text); } .tc-hk-state[data-tone="idle"] { color: var(--fg-muted); } -.tc-hk-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg); white-space: nowrap; } +.tc-hk-switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--fg); white-space: nowrap; } .tc-hk-switch[data-disabled] { color: var(--fg-muted); } .tc-hk-switch[data-disabled] .tc-switch { opacity: var(--opacity-disabled); } -.tc-hk-cmd { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-sunken); - font: 400 12px/20px var(--font-mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; } +.tc-hk-cmd { margin: 0; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-sunken); + font: 400 0.75rem/1.25rem var(--font-mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; } .tc-hk-cmd .m { color: var(--fg-muted); } -.tc-hk-facts { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12px; line-height: 18px; } +.tc-hk-facts { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; font-size: 0.75rem; line-height: 1.125rem; } .tc-hk-facts dt { color: var(--fg-muted); } .tc-hk-facts dd { margin: 0; min-width: 0; color: var(--fg); } -.tc-hk-facts code { font-size: 11.5px; overflow-wrap: anywhere; } -.tc-hk-trust { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 14px; border-radius: var(--radius-lg); +.tc-hk-facts code { font-size: 0.71875rem; overflow-wrap: anywhere; } +.tc-hk-trust { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0.625rem 0.625rem 0.875rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); } -.tc-hk-trust p { margin: 0; flex: 1; min-width: 0; font-size: 12px; line-height: 18px; color: var(--fg); } +.tc-hk-trust p { margin: 0; flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg); } .tc-hk-trust .tc-btn { flex: none; } -.tc-hk--compact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; padding: 12px 14px 12px 16px; } -.tc-hk--compact .tc-hk-line { grid-column: 1 / -1; font: 400 12px/18px var(--font-mono); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-hk--compact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.25rem 0.875rem; padding: 0.75rem 0.875rem 0.75rem 1rem; } +.tc-hk--compact .tc-hk-line { grid-column: 1 / -1; font: 400 0.75rem/1.125rem var(--font-mono); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------- phone ------ */ -.tc-pnote { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 2px 10px; width: 100%; padding: 11px 12px 11px 14px; border-radius: var(--radius-xl); +.tc-pnote { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 1rem; align-items: center; gap: 2px 0.625rem; width: 100%; padding: 0.6875rem 0.75rem 0.6875rem 0.875rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; text-align: left; flex: none; } -[data-theme="dark"] .tc-pnote { background: oklch(1 0 0 / 0.02); } -.tc-pnote > .tc-icon:first-child { width: 18px; height: 18px; } -.tc-pnote > .tc-icon:last-child { width: 16px; height: 16px; color: var(--fg-muted); } -.tc-pnote strong { display: block; font-size: 15px; line-height: 20px; font-weight: 500; } -.tc-pnote small { display: block; font-size: 13px; line-height: 18px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +[data-theme="dark"] .tc-pnote { background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-pnote > .tc-icon:first-child { width: 1.125rem; height: 1.125rem; } +.tc-pnote > .tc-icon:last-child { width: 1rem; height: 1rem; color: var(--fg-muted); } +.tc-pnote strong { display: block; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; } +.tc-pnote small { display: block; font-size: 0.8125rem; line-height: 1.125rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-pnote[data-tone="accent"] { border-color: color-mix(in srgb, var(--accent) 26%, transparent); background: var(--accent-soft); } .tc-pnote[data-tone="accent"] > .tc-icon:first-child { color: var(--accent-text); } [data-theme="dark"] .tc-pnote[data-tone="accent"] > .tc-icon:first-child { color: color-mix(in srgb, var(--accent-text) 60%, white); } .tc-pnote[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); } .tc-pnote[data-tone="warn"] > .tc-icon:first-child { color: var(--warn); } .tc-pnote[data-tone="warn"] strong { color: var(--warn-text); } -.tc-psearch { display: flex; gap: 8px; flex: none; } +.tc-psearch { display: flex; gap: 0.5rem; flex: none; } .tc-psearch .tc-sk-search { flex: 1; min-width: 0; } -.tc-psearch .tc-sk-search > .tc-input { height: 40px; font-size: 16px; } -.tc-psearch .tc-btn--icon { width: 40px; height: 40px; } -.tc-prow-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } -.tc-prow .tc-upd { height: 22px; font-size: 12px; } - -.tc-layer--center > .tc-ur--phone.tc-sheet--full { position: absolute; left: 0; right: 0; bottom: 0; top: 36px; max-height: none; display: flex; flex-direction: column; box-shadow: var(--shadow-dialog); } -.tc-pur-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 12px 16px; } -.tc-pur-head h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; } -.tc-pur-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; } +.tc-psearch .tc-sk-search > .tc-input { height: 2.5rem; font-size: 1rem; } +.tc-psearch .tc-btn--icon { width: 2.5rem; height: 2.5rem; } +.tc-prow-name-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } +.tc-prow .tc-upd { height: 1.375rem; font-size: 0.75rem; } + +.tc-layer--center > .tc-ur--phone.tc-sheet--full { position: absolute; left: 0; right: 0; bottom: 0; top: 2.25rem; max-height: none; display: flex; flex-direction: column; box-shadow: var(--shadow-dialog); } +.tc-pur-head { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem 0.75rem 1rem; } +.tc-pur-head h2 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } +.tc-pur-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.875rem; padding: 0 1rem 1rem; } .tc-pur-facts { display: flex; flex-direction: column; } -.tc-pur-fact { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 10px 14px; font-size: 14px; line-height: 20px; } +.tc-pur-fact { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 2px 0.75rem; align-items: center; padding: 0.625rem 0.875rem; font-size: 0.875rem; line-height: 1.25rem; } .tc-pur-fact + .tc-pur-fact { border-top: 1px solid var(--hairline); } -.tc-pur-fact > span:first-child { font-size: 13px; color: var(--fg-muted); } -.tc-pur-fact code { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-pur-fact .tc-tiles .tc-tile { width: 22px; height: 22px; font-size: 8.5px; } -.tc-pur-file { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; font: 400 13px/18px var(--font-mono); } +.tc-pur-fact > span:first-child { font-size: 0.8125rem; color: var(--fg-muted); } +.tc-pur-fact code { font-size: 0.78125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-pur-fact .tc-tiles .tc-tile { width: 1.375rem; height: 1.375rem; font-size: 0.53125rem; } +.tc-pur-file { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto 1rem; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0.5rem 0.875rem; font: 400 0.8125rem/1.125rem var(--font-mono); } .tc-pur-file + .tc-pur-file, .tc-pur-file + .tc-pur-diff, .tc-pur-diff + .tc-pur-file { border-top: 1px solid var(--hairline); } -.tc-pur-file > .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } +.tc-pur-file > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } .tc-pur-file[data-status="modified"] > .tc-icon:first-child { color: var(--info); } .tc-pur-file[data-status="added"] > .tc-icon:first-child { color: var(--ok); } .tc-pur-file[data-status="removed"] > .tc-icon:first-child { color: var(--danger); } -.tc-pur-file .tc-ur-file-stat { font-size: 12px; } -.tc-pur-diff { padding: 4px 0 8px; font: 400 11.5px/19px var(--font-mono); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } -.tc-pur-diff .tc-dv-line { grid-template-columns: 22px minmax(0, 1fr); padding: 0 12px 0 0; } -.tc-pur-foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 28px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } -.tc-pur-foot .tc-btn { height: 44px; font-size: 16px; } -.tc-pur-foot .tc-ur-consent strong { font-size: 15px; line-height: 22px; } -.tc-pur-foot .tc-ur-consent small { font-size: 13px; line-height: 18px; } -.tc-pur-foot .tc-checkbox { width: 20px; height: 20px; margin-top: 1px; } +.tc-pur-file .tc-ur-file-stat { font-size: 0.75rem; } +.tc-pur-diff { padding: 0.25rem 0 0.5rem; font: 400 0.71875rem/1.1875rem var(--font-mono); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } +.tc-pur-diff .tc-dv-line { grid-template-columns: 1.375rem minmax(0, 1fr); padding: 0 0.75rem 0 0; } +.tc-pur-foot { flex: none; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.875rem 1rem 1.75rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-pur-foot .tc-btn { height: var(--touch); font-size: 1rem; } +.tc-pur-foot .tc-ur-consent strong { font-size: 0.9375rem; line-height: 1.375rem; } +.tc-pur-foot .tc-ur-consent small { font-size: 0.8125rem; line-height: 1.125rem; } +.tc-pur-foot .tc-checkbox { width: 1.25rem; height: 1.25rem; margin-top: 1px; } /* ------------------------------------------------------ updates view --- */ /* The Updates view swaps agent settings for what matters when updating: where a skill came from, its status, and who reads the folder. */ -.tc-ut { --ut-cols: minmax(0, 1.3fr) minmax(0, 1fr) 188px 124px 140px; } -.tc-ut-head, .tc-ut-row { display: grid; grid-template-columns: var(--ut-cols); align-items: center; column-gap: 16px; padding: 0 12px 0 16px; } -.tc-ut-head { min-height: 40px; font-size: 12px; font-weight: 500; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2%, transparent); border-bottom: 1px solid var(--border); } -.tc-ut-row { min-height: 68px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--hairline); } +.tc-ut { --ut-cols: minmax(0, 1.3fr) minmax(0, 1fr) 11.75rem 7.75rem 8.75rem; } +.tc-ut-head, .tc-ut-row { display: grid; grid-template-columns: var(--ut-cols); align-items: center; column-gap: 1rem; padding: 0 0.75rem 0 1rem; } +.tc-ut-head { min-height: 2.5rem; font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2%, transparent); border-bottom: 1px solid var(--border); } +.tc-ut-row { min-height: 4.25rem; padding-top: 0.625rem; padding-bottom: 0.625rem; border-top: 1px solid var(--hairline); } .tc-ut-head + .tc-ut-row { border-top: 0; } .tc-ut-skill, .tc-ut-src, .tc-ut-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; } -.tc-ut-skill a { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); } -.tc-ut-skill code, .tc-ut-src small { font-size: 11.5px; line-height: 16px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-ut-src code { font-size: 12.5px; line-height: 18px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-ut-src small { font-family: var(--font-sans); font-size: 12px; } -.tc-ut-status strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; } -.tc-ut-status strong .tc-icon { width: 14px; height: 14px; } -.tc-ut-status small { font-size: 12px; line-height: 16px; color: var(--fg-muted); } +.tc-ut-skill a { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); } +.tc-ut-skill code, .tc-ut-src small { font-size: 0.71875rem; line-height: 1rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-ut-src code { font-size: 0.78125rem; line-height: 1.125rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-ut-src small { font-family: var(--font-sans); font-size: 0.75rem; } +.tc-ut-status strong { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; } +.tc-ut-status strong .tc-icon { width: 0.875rem; height: 0.875rem; } +.tc-ut-status small { font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); } .tc-ut-status[data-tone="accent"] strong { color: var(--accent-text); } [data-theme="dark"] .tc-ut-status[data-tone="accent"] strong { color: color-mix(in srgb, var(--accent-text) 60%, white); } .tc-ut-status[data-tone="accent"] .tc-dot { color: var(--accent); } .tc-ut-status[data-tone="warn"] strong { color: var(--warn-text); } .tc-ut-status[data-tone="idle"] strong { color: var(--fg-muted); font-weight: 400; } -.tc-ut-readers { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; } -.tc-ut-readers .tc-tile { width: 20px; height: 20px; font-size: 8px; } -.tc-ut-act { display: flex; justify-content: flex-end; gap: 6px; } +.tc-ut-readers { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; } +.tc-ut-readers .tc-tile { width: 1.25rem; height: 1.25rem; font-size: 0.5rem; } +.tc-ut-act { display: flex; justify-content: flex-end; gap: 0.375rem; } .tc-ut-row[data-tone="warn"] { background: color-mix(in srgb, var(--warn) 3%, transparent); } -.tc-ut-err { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--warn-soft); color: var(--warn-text); font-size: 12px; line-height: 18px; } -.tc-ut-err .tc-icon { width: 14px; height: 14px; flex: none; margin-top: 2px; } -.tc-ut-note { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; line-height: 18px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } -.tc-ut-note .tc-icon { width: 14px; height: 14px; flex: none; margin-top: 2px; } -.tc-ut-empty { padding: 56px 24px 60px; } -.tc-ut-empty .tc-empty-desc { max-width: 520px; margin: 0 auto; } +.tc-ut-err { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); background: var(--warn-soft); color: var(--warn-text); font-size: 0.75rem; line-height: 1.125rem; } +.tc-ut-err .tc-icon { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 2px; } +.tc-ut-note { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } +.tc-ut-note .tc-icon { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 2px; } +.tc-ut-empty { padding: 3.5rem 1.5rem 3.75rem; } +.tc-ut-empty .tc-empty-desc { max-width: 32.5rem; margin: 0 auto; } .tc-dv { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); } -.tc-hk-actions { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); } -.tc-hk-actions > span { flex: 1; min-width: 0; font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-pnotes > .tc-pnote { border: 0; border-radius: 0; background: transparent; text-decoration: none !important; min-height: 60px; } +.tc-hk-actions { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); } +.tc-hk-actions > span { flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-pnotes > .tc-pnote { border: 0; border-radius: 0; background: transparent; text-decoration: none !important; min-height: 3.75rem; } .tc-pnotes > .tc-pnote + .tc-pnote { border-top: 1px solid var(--hairline); } .tc-pnote[data-icon="accent"] > .tc-icon:first-child { color: var(--accent-text); } [data-theme="dark"] .tc-pnote[data-icon="accent"] > .tc-icon:first-child { color: color-mix(in srgb, var(--accent-text) 60%, white); } @@ -1887,10 +1891,10 @@ html.tc-locked { overflow: hidden; } /* -------------------------------------------------------- responsive --- */ @media (max-width: 1023.98px) { - .tc-lh { flex-wrap: wrap; padding-block: 6px; } + .tc-lh { flex-wrap: wrap; padding-block: 0.375rem; } .tc-lh-filters { display: none; } /* the phone chip row takes over */ .tc-ut-head { display: none; } - .tc-ut-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } + .tc-ut-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.375rem; } .tc-ut-src, .tc-ut-readers { display: none; } .tc-ut-status { grid-column: 1; } .tc-ut-act { grid-column: 2; grid-row: 1 / span 2; align-self: center; } @@ -1898,19 +1902,19 @@ html.tc-locked { overflow: hidden; } .tc-ur-facts { grid-template-columns: minmax(0, 1fr); } .tc-ur-fact + .tc-ur-fact { border-left: 0; border-top: 1px solid var(--hairline); } .tc-ur-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } - .tc-ur-files { max-height: 208px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--hairline); } + .tc-ur-files { max-height: 13rem; overflow: auto; border-right: 0; border-bottom: 1px solid var(--hairline); } .tc-ur-files-note { display: none; } - .tc-layer--sheet > .tc-sheet--hooks { width: min(600px, 100vw); } + .tc-layer--sheet > .tc-sheet--hooks { width: min(37.5rem, 100vw); } } @media (max-width: 639.98px) { /* Below 640px the review renders the accordion layout (.tc-pur-*), in a bottom sheet that fills the screen. See README, Screen 9. */ .tc-ur-foot { flex-wrap: wrap; } - .tc-ur-foot .tc-btn, .tc-hk-actions .tc-btn, .tc-lh .tc-btn { min-height: 44px; } + .tc-ur-foot .tc-btn, .tc-hk-actions .tc-btn, .tc-lh .tc-btn { min-height: var(--touch); } .tc-hk-actions { flex-wrap: wrap; } .tc-hk-actions > span { flex-basis: 100%; } - .tc-hk--compact .tc-switch { --_t: 20px; } - .tc-ut-act .tc-btn { min-height: 44px; } + .tc-hk--compact .tc-switch { --_t: 1.25rem; } + .tc-ut-act .tc-btn { min-height: var(--touch); } } /* Application layer integration: preserve Kit layers and the shared controls. */ @@ -1929,20 +1933,20 @@ html.tc-locked { overflow: hidden; } .tc-ur-diff-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .tc-ur-diff-scroll > .tc-code { border: 0; border-radius: 0; min-height: 100%; } .tc-ur-diff-head > code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } -.tc-ur-diff-head > span:not(.tc-spacer) { color: var(--fg-muted); font-size: 12px; white-space: nowrap; } +.tc-ur-diff-head > span:not(.tc-spacer) { color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; } .tc-ur .tc-seg > button { white-space: nowrap; } -.tc-ur-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 160px; padding: var(--space-5); color: var(--fg-muted); text-align: center; } -.tc-ur-loading strong { color: var(--fg); font-size: 14px; font-weight: 500; } -.tc-ur-loading > span:last-child { font-size: 13px; } -.tc-ur-no-text { min-height: 128px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-5); margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 20px; text-align: center; } -.tc-dv { padding-bottom: 24px; } -.tc-dv-line { min-height: 20px; } +.tc-ur-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 10rem; padding: var(--space-5); color: var(--fg-muted); text-align: center; } +.tc-ur-loading strong { color: var(--fg); font-size: 0.875rem; font-weight: 500; } +.tc-ur-loading > span:last-child { font-size: 0.8125rem; } +.tc-ur-no-text { min-height: 8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-5); margin: 0; color: var(--fg-muted); font-size: 0.8125rem; line-height: 1.25rem; text-align: center; } +.tc-dv { padding-bottom: 1.5rem; } +.tc-dv-line { min-height: 1.25rem; } .tc-dv-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; } button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointer; text-align: left; } .tc-dv-fold-headings { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tc-ur--compact .tc-dialog-body { overflow: auto; min-height: 0; } .tc-ur--compact .tc-dialog-foot { flex: none; } -.tc-state-list { max-height: 240px; overflow: auto; } +.tc-state-list { max-height: 15rem; overflow: auto; } .tc-state-list li code { min-width: 0; overflow-wrap: anywhere; } .tc-ur-mobile-readers { display: inline-flex; align-items: center; gap: var(--space-2); } .tc-hk + .tc-hk { border-top: 1px solid var(--hairline); } @@ -1958,52 +1962,52 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-layer--center:has(> .tc-ur--phone) { padding: 0; } .tc-layer--center > .tc-ur--phone.tc-sheet--full { width: 100%; max-width: 100%; height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); border-bottom: 0; } .tc-ur--phone .tc-pur-head { flex: none; } - .tc-pur-head [data-update-close] { width: 44px; height: 44px; flex: 0 0 44px; } + .tc-pur-head [data-update-close] { width: var(--touch); height: var(--touch); flex: 0 0 44px; } .tc-pur-body { overflow: auto; overscroll-behavior: contain; } .tc-pur-body .tc-ur-edits { margin: 0; flex-wrap: wrap; } - .tc-pur-body .tc-notice-actions { padding-left: 26px; } - .tc-pur-body .tc-notice-actions .tc-btn { min-height: 44px; } + .tc-pur-body .tc-notice-actions { padding-left: 1.625rem; } + .tc-pur-body .tc-notice-actions .tc-btn { min-height: var(--touch); } .tc-pur-file { width: 100%; border: 0; background: none; color: var(--fg); cursor: pointer; text-align: left; } .tc-pur-file > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - .tc-pur-diff { max-height: 180px; overflow: auto; overscroll-behavior: contain; } - .tc-pur-diff > .tc-seg { display: flex; width: max-content; max-width: calc(100% - 16px); margin: 4px 8px 8px; } - .tc-pur-diff .tc-seg > button { min-height: 44px; padding-inline: 8px; } - .tc-pur-foot { padding-bottom: max(20px, env(safe-area-inset-bottom)); } - .tc-pur-foot .tc-ur-foot-note { font-size: 13px; } + .tc-pur-diff { max-height: 11.25rem; overflow: auto; overscroll-behavior: contain; } + .tc-pur-diff > .tc-seg { display: flex; width: max-content; max-width: calc(100% - 16px); margin: 0.25rem 0.5rem 0.5rem; } + .tc-pur-diff .tc-seg > button { min-height: var(--touch); padding-inline: 0.5rem; } + .tc-pur-foot { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); } + .tc-pur-foot .tc-ur-foot-note { font-size: 0.8125rem; } .tc-ur--compact .tc-dialog-foot { flex-wrap: wrap; } - .tc-ur--compact .tc-dialog-foot .tc-btn { min-height: 44px; } - .tc-ur-queue { max-width: 110px; height: auto; } - .tc-ur-queue > span { font-size: 11px; line-height: 16px; } - .tc-ur-queue .tc-btn { min-width: 44px; min-height: 44px; } - .tc-dv-hunk { min-height: 44px; } + .tc-ur--compact .tc-dialog-foot .tc-btn { min-height: var(--touch); } + .tc-ur-queue { max-width: 6.875rem; height: auto; } + .tc-ur-queue > span { font-size: 0.6875rem; line-height: 1rem; } + .tc-ur-queue .tc-btn { min-width: var(--touch); min-height: var(--touch); } + .tc-dv-hunk { min-height: var(--touch); } } /* The card owns a single header and footer in either library view. */ -.tc-sk-card > .tc-sk-library-foot { padding: 12px 16px; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-sk-card > .tc-sk-library-foot { padding: 0.75rem 1rem; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } .tc-sk-matrix .tc-mx-agent { position: relative; } -.tc-sk-matrix .tc-mx-agent:has(.tc-mx-more) { padding-right: 42px; } +.tc-sk-matrix .tc-mx-agent:has(.tc-mx-more) { padding-right: 2.625rem; } .tc-sk-matrix .tc-mx-more { position: absolute; inset: 10px 6px auto auto; } .tc-sk-phone-view, .tc-sk-phone-summary { display: none; } .tc-sk-phone-row { position: relative; border-top: 1px solid var(--hairline); } .tc-sk-phone-row > .tc-prow { border-top: 0; } .tc-sk-phone-row[data-highlight] { background: var(--accent-soft); } -.tc-ut-src small { display: inline-flex; align-items: center; gap: 4px; } +.tc-ut-src small { display: inline-flex; align-items: center; gap: 0.25rem; } .tc-ut-act .tc-btn { white-space: nowrap; } .tc-ut-head > .tc-sr { position: static; width: auto; height: auto; clip-path: none; color: transparent; } .tc-ut-note > span { min-width: 0; } .tc-hk-body { display: flex; flex-direction: column; gap: var(--space-4); } -.tc-hk-label { display: block; width: fit-content; padding: 0; border: 0; background: none; color: var(--fg); font: 500 14px/20px var(--font-sans); cursor: pointer; text-align: left; } +.tc-hk-label { display: block; width: fit-content; padding: 0; border: 0; background: none; color: var(--fg); font: 500 0.875rem/1.25rem var(--font-sans); cursor: pointer; text-align: left; } .tc-hk-label:hover { text-decoration: underline; text-underline-offset: 3px; } .tc-hk-error { grid-column: 1 / -1; } .tc-hk-event > span { overflow-wrap: anywhere; } .tc-hk-plugin-head { flex-wrap: wrap; } .tc-hk-plugin-head > code { overflow: hidden; text-overflow: ellipsis; } -.tc-hk-foot { flex-wrap: wrap; gap: 8px; } -.tc-hk-foot > .tc-hint { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; } +.tc-hk-foot { flex-wrap: wrap; gap: 0.5rem; } +.tc-hk-foot > .tc-hint { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.75rem; } .tc-hk-footnote { margin-top: auto; } .tc-hk--compact { cursor: pointer; } .tc-hk--compact:has(.tc-switch:hover) { cursor: default; } -.tc-hk-skeleton .tc-skeleton { min-height: 14px; width: 70%; } +.tc-hk-skeleton .tc-skeleton { min-height: 0.875rem; width: 70%; } .tc-hk-skeleton .tc-skeleton + .tc-skeleton { width: 95%; } .tc-src-status { flex-wrap: wrap; } .tc-src-status [data-accent] { color: var(--accent); } @@ -2015,7 +2019,7 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe @media (max-width: 1023.98px) { .tc-sk-matrix { display: none; } .tc-sk-card > .tc-lh .tc-lh-filters, .tc-sk-card > .tc-lh .tc-lh-sep, .tc-sk-card > .tc-lh .tc-lh-view { display: none; } - .tc-sk-card > .tc-lh { min-height: 0; padding: 10px 12px; flex-wrap: wrap; } + .tc-sk-card > .tc-lh { min-height: 0; padding: 0.625rem 0.75rem; flex-wrap: wrap; } .tc-sk-card > .tc-lh:has(.tc-lh-filters:only-child) { display: none; } .tc-sk-card > .tc-lh .tc-spacer { display: none; } .tc-sk-card > .tc-lh .tc-lh-status { margin-right: auto; white-space: normal; } @@ -2027,36 +2031,42 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-sk-card .tc-sk-phone-list { margin: 0; gap: 0; } .tc-sk-card .tc-plist { border: 0; border-radius: 0; } .tc-sk-card .tc-plist + .tc-plist { border-top: 1px solid var(--border); } - .tc-mx-hidden { flex-wrap: wrap; padding-block: 10px; } + .tc-mx-hidden { flex-wrap: wrap; padding-block: 0.625rem; } .tc-mx-hidden .tc-mono { display: none; } - .tc-mx-hidden .tc-btn { min-height: 44px; } + .tc-mx-hidden .tc-btn { min-height: var(--touch); } .tc-insp-banner { flex-wrap: wrap; } - .tc-insp-banner > div { flex-basis: calc(100% - 40px); } - .tc-insp-banner > .tc-btn { margin-left: 30px; } + .tc-insp-banner > div { flex-basis: calc(100% - 2.5rem); } + .tc-insp-banner > .tc-btn { margin-left: 1.875rem; } } @media (max-width: 639.98px) { - .tc-layer--sheet > .tc-sheet--hooks { width: 100%; height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); margin-top: 36px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; } - .tc-sheet--hooks .tc-hk-body { padding: 16px; gap: 20px; } - .tc-sheet--hooks .tc-hk { padding: 12px; } - .tc-sheet--hooks .tc-hk-head { flex-wrap: wrap; gap: 6px; } + .tc-layer--sheet > .tc-sheet--hooks { width: 100%; height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); margin-top: 2.25rem; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; } + .tc-sheet--hooks .tc-hk-body { padding: 1rem; gap: 1.25rem; } + .tc-sheet--hooks .tc-hk { padding: 0.75rem; } + .tc-sheet--hooks .tc-hk-head { flex-wrap: wrap; gap: 0.375rem; } .tc-sheet--hooks .tc-hk-head > .tc-hk-event { flex-basis: 100%; } - .tc-sheet--hooks .tc-hk-label, .tc-sheet--hooks .tc-btn { min-height: 44px; } - .tc-sheet--hooks .tc-hk--compact { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; } + .tc-sheet--hooks .tc-hk-label, .tc-sheet--hooks .tc-btn { min-height: var(--touch); } + .tc-sheet--hooks .tc-hk--compact { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.5rem; } .tc-sheet--hooks .tc-hk--compact > .tc-hk-event { grid-column: 1; } .tc-sheet--hooks .tc-hk--compact > .tc-hk-state { grid-column: 1; grid-row: 2; } .tc-sheet--hooks .tc-hk--compact > .tc-hk-switch { grid-column: 2; grid-row: 1 / span 2; } .tc-sheet--hooks .tc-hk--compact > .tc-hk-line { grid-row: 3; } .tc-sheet--hooks .tc-hk-plugin-head > code { max-width: 65%; } - .tc-sheet--hooks .tc-hk-plugin-head > .tc-spacer + span { flex-basis: 100%; margin-left: 23px; } + .tc-sheet--hooks .tc-hk-plugin-head > .tc-spacer + span { flex-basis: 100%; margin-left: 1.4375rem; } .tc-sheet--hooks .tc-hk-foot > .tc-hint { flex-basis: 100%; } } .tc-sk-card { container-type: inline-size; } -.tc-sk-matrix .tc-mx { min-width: calc(264px + var(--mx-agent-count, 5) * 116px + var(--mx-more-space, 0px)); } +/* Keep filters together and move repository actions onto their own row when + the actual card, including the chosen interface type size, needs more room. */ +@container (max-width: 50rem) { + .tc-sk-card > .tc-lh:has(.tc-lh-status) .tc-lh-filters { flex-basis: 100%; } +} + +.tc-sk-matrix .tc-mx { min-width: calc(var(--mx-name-width) + 1.5rem + var(--mx-agent-count, 5) * var(--mx-agent-width) + var(--mx-more-space, 0rem)); } @media (max-width: 639.98px) { - .tc-pur-body .tc-ur-edits { display: grid; grid-template-columns: 18px minmax(0, 1fr); } + .tc-pur-body .tc-ur-edits { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); } .tc-pur-body .tc-ur-edits .tc-notice-actions { grid-column: 2; padding: 0; justify-self: start; } - .tc-pur-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; } + .tc-pur-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--touch); } .tc-pur-head > .tc-ur-title { grid-column: 1 / -1; grid-row: 1; } .tc-pur-head > [data-update-close] { grid-column: 2; grid-row: 1; } .tc-pur-head > .tc-ur-queue { grid-column: 1 / -1; width: fit-content; } @@ -2066,28 +2076,28 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-sk-agent-chips [data-accent] { color: var(--accent); } .tc-sk-phone-row { width: 100%; cursor: pointer; } .tc-sk-phone-row > .tc-prow-name-line { grid-column: 1; min-width: 0; } -.tc-sk-phone-summary .tc-pnote { min-height: 60px; } +.tc-sk-phone-summary .tc-pnote { min-height: 3.75rem; } .tc-sk-phone-summary .tc-pnote > span { min-width: 0; } -.tc-sheet--hooks .tc-insp-meta .tc-warning { display: inline-flex; align-items: center; gap: 6px; color: var(--warn-text); } +.tc-sheet--hooks .tc-insp-meta .tc-warning { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--warn-text); } .tc-sheet--hooks .tc-hk-state .tc-dot { margin: 0; } .tc-sheet--hooks .tc-hk-state[data-tone="ok"] .tc-dot { color: var(--ok); } .tc-layer--sheet:has(> .tc-sheet--hooks) { justify-content: flex-end; align-items: stretch; } -.tc-layer--center:has(> .tc-ur:not(.tc-ur--phone)) { align-items: center; justify-content: center; padding: 16px; } +.tc-layer--center:has(> .tc-ur:not(.tc-ur--phone)) { align-items: center; justify-content: center; padding: 1rem; } @media (max-width: 639.98px) { .tc-layer--center:has(> .tc-ur--compact) { align-items: flex-end; justify-content: center; padding: 0; } .tc-layer--center > .tc-ur--compact { width: 100%; max-width: 100%; max-height: calc(100dvh - 36px); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border-bottom: 0; } } .tc-ur-file-name > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-ur-link-note { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; } +.tc-ur-link-note { display: flex; align-items: baseline; gap: 0.1875rem; white-space: nowrap; } .tc-ur-link-note > span { flex: none; } .tc-ur-link-note > code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } @media (max-width: 639.98px) { - .tc-pur-head h2 { padding-right: 44px; } + .tc-pur-head h2 { padding-right: 2.75rem; } .tc-pur-head > [data-update-close] { align-self: start; } - .tc-ur-save-inline { padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } + .tc-ur-save-inline { padding: 0.25rem 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } } @media (max-width: 1023.98px) { @@ -2099,7 +2109,7 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-skill-inspector [data-inspect-copy-source] { margin-left: auto; flex: none; } @media (max-width: 1023.98px) { - .tc-plist-group .tc-hookchip { min-height: 44px; } + .tc-plist-group .tc-hookchip { min-height: var(--touch); } } .tc-pur-diff { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } @@ -2143,378 +2153,378 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe decisive action and for selection. */ /* ------------------------------------------------------------- page --- */ -#page-files { max-width: 1240px; gap: 0; } -#page-files > .tc-page-head { padding: 0 16px; } -#page-files > .tc-tabs { margin-top: 16px; } -.tc-fpage-body { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; min-width: 0; } +#page-files { max-width: 77.5rem; gap: 0; } +#page-files > .tc-page-head { padding: 0 1rem; } +#page-files > .tc-tabs { margin-top: 1rem; } +.tc-fpage-body { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; min-width: 0; } /* Tabs carry a quiet size or count. */ #files-browser .tc-tab-button .tc-tab-count { letter-spacing: 0; } -#files-browser .tc-tab-button > .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } +#files-browser .tc-tab-button > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } #files-browser .tc-tab-button[aria-selected="true"] > .tc-icon { color: var(--fg); } -#files-browser .tc-tabs .tc-spacer + .tc-tab-aside { align-self: center; font-size: 12px; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 6px; } +#files-browser .tc-tabs .tc-spacer + .tc-tab-aside { align-self: center; font-size: 0.75rem; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 0.375rem; } /* --------------------------------------------------------- toolbar ---- */ -.tc-ftb { display: flex; align-items: center; gap: 8px; min-width: 0; } +.tc-ftb { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .tc-ftb .tc-btn { flex: none; } -.tc-ftb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; flex: none; } +.tc-ftb-sep { width: 1px; height: 1.25rem; background: var(--border); margin: 0 2px; flex: none; } /* Path bar: breadcrumbs in an input-shaped box. Click empty space, or press ⌘L, to type any absolute path. */ -.tc-path { position: relative; display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 2px 0 8px; +.tc-path { position: relative; display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; height: 2rem; padding: 0 2px 0 0.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-xs); } -[data-theme="dark"] .tc-path { background: oklch(1 0 0 / 0.0256); } -.tc-path > .tc-icon:first-child { width: 15px; height: 15px; color: var(--fg-muted); flex: none; margin-right: 4px; } -.tc-crumb { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); - font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; text-decoration: none !important; } +[data-theme="dark"] .tc-path { background: color-mix(in srgb, var(--border-strong) 32%, transparent); } +.tc-path > .tc-icon:first-child { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); flex: none; margin-right: 0.25rem; } +.tc-crumb { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.375rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); + font: inherit; font-size: 0.8125rem; white-space: nowrap; cursor: pointer; text-decoration: none !important; } .tc-crumb:hover { background: var(--hover); color: var(--fg); } .tc-crumb[aria-current="location"] { color: var(--fg); font-weight: 500; } -.tc-crumb-sep { width: 12px; height: 12px; color: var(--fg-subtle); flex: none; } +.tc-crumb-sep { width: 0.75rem; height: 0.75rem; color: var(--fg-subtle); flex: none; } .tc-path-end { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; } -.tc-path-end .tc-badge { height: 20px; font-size: 11px; font-weight: 500; margin-right: 4px; } -.tc-path-real { font: 400 12px/1 var(--font-mono); color: var(--fg-subtle); margin-right: 6px; white-space: nowrap; } -.tc-path[data-editing] { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); padding-left: 8px; } -.tc-path[data-editing] > input { flex: 1; min-width: 0; height: 30px; border: 0; background: none; outline: none; color: var(--fg); font: 400 13px/30px var(--font-mono); padding: 0; } +.tc-path-end .tc-badge { height: 1.25rem; font-size: 0.6875rem; font-weight: 500; margin-right: 0.25rem; } +.tc-path-real { font: 400 0.75rem/1 var(--font-mono); color: var(--fg-subtle); margin-right: 0.375rem; white-space: nowrap; } +.tc-path[data-editing] { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); padding-left: 0.5rem; } +.tc-path[data-editing] > input { flex: 1; min-width: 0; height: 1.875rem; border: 0; background: none; outline: none; color: var(--fg); font: 400 0.8125rem/1.875rem var(--font-mono); padding: 0; } .tc-path[data-editing] > input + .tc-path-ghost { position: absolute; } -.tc-path-ghost { font: 400 13px/30px var(--font-mono); color: var(--fg-subtle); pointer-events: none; } +.tc-path-ghost { font: 400 0.8125rem/1.875rem var(--font-mono); color: var(--fg-subtle); pointer-events: none; } .tc-fsearch { position: relative; display: flex; align-items: center; flex: 0 0 232px; } -.tc-fsearch > .tc-icon { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--fg-muted); pointer-events: none; } -.tc-fsearch > .tc-input { height: 32px; padding-left: 30px; padding-right: 30px; font-size: 13px; } -.tc-fsearch > .tc-kbd { position: absolute; right: 6px; } +.tc-fsearch > .tc-icon { position: absolute; left: 0.5625rem; width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); pointer-events: none; } +.tc-fsearch > .tc-input { height: 2rem; padding-left: 1.875rem; padding-right: 1.875rem; font-size: 0.8125rem; } +.tc-fsearch > .tc-kbd { position: absolute; right: 0.375rem; } .tc-fsearch[data-active] > .tc-input { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); } .tc-segicons { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); flex: none; } -.tc-segicons button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; } -.tc-segicons button .tc-icon { width: 14px; height: 14px; } +.tc-segicons button { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.5625rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--fg-muted); font: inherit; font-size: 0.78125rem; font-weight: 500; cursor: pointer; } +.tc-segicons button .tc-icon { width: 0.875rem; height: 0.875rem; } .tc-segicons button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); } -[data-theme="dark"] .tc-segicons button[aria-pressed="true"] { background: oklch(1 0 0 / 0.08); box-shadow: none; } +[data-theme="dark"] .tc-segicons button[aria-pressed="true"] { background: color-mix(in srgb, var(--border-strong) 72%, transparent); box-shadow: none; } .tc-split { display: inline-flex; flex: none; } .tc-split > .tc-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.tc-split > .tc-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 7px; margin-left: 1px; } +.tc-split > .tc-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 0.4375rem; margin-left: 1px; } .tc-split > .tc-btn--primary:last-child { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--on-accent) 22%, transparent); margin-left: 0; } /* ------------------------------------------------------- summary ------ */ /* What the projects hold, as one bar: kept files, Git history, and what an install or build recreates (hatched). */ -.tc-fsum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; padding: 14px 16px 14px 18px; } -.tc-fsum-lead { display: flex; align-items: baseline; gap: 8px; min-width: 0; } -.tc-fsum-lead strong { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } -.tc-fsum-lead span { font-size: 13px; color: var(--fg-muted); } -.tc-fsum-free { justify-self: end; font-size: 12px; color: var(--fg-muted); text-align: right; white-space: nowrap; } +.tc-fsum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.625rem 1.5rem; padding: 0.875rem 1rem 0.875rem 1.125rem; } +.tc-fsum-lead { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; } +.tc-fsum-lead strong { font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } +.tc-fsum-lead span { font-size: 0.8125rem; color: var(--fg-muted); } +.tc-fsum-free { justify-self: end; font-size: 0.75rem; color: var(--fg-muted); text-align: right; white-space: nowrap; } .tc-fsum-free strong { color: var(--fg); font-weight: 500; } .tc-fsum .tc-comp { grid-column: 1 / -1; } -.tc-fsum-legend { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; font-size: 12px; color: var(--fg-muted); } +.tc-fsum-legend { display: flex; align-items: center; gap: 0.375rem 1.125rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--fg-muted); } .tc-fsum-legend strong { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; } .tc-fsum .tc-btn { justify-self: end; } -.tc-comp { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--hover); } -.tc-comp > span { display: block; height: 100%; min-width: 3px; } +.tc-comp { display: flex; gap: 2px; height: 0.625rem; border-radius: 0.3125rem; overflow: hidden; background: var(--hover); } +.tc-comp > span { display: block; height: 100%; min-width: 0.1875rem; } .tc-comp > [data-part="kept"] { background: color-mix(in srgb, var(--fg) 62%, transparent); } .tc-comp > [data-part="git"] { background: color-mix(in srgb, var(--fg) 30%, transparent); } .tc-comp > [data-part="rebuild"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 22%, transparent) 0 3px, color-mix(in srgb, var(--fg) 9%, transparent) 3px 6px); } .tc-comp > [data-part="free"] { background: transparent; } .tc-comp > [data-part="other"], :is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key > i[data-part="other"] { background: color-mix(in srgb, var(--fg) 14%, transparent); } -:is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } -:is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key > i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } +:is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; } +:is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key > i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; } :is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key > i[data-part="kept"] { background: color-mix(in srgb, var(--fg) 62%, transparent); } :is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key > i[data-part="git"] { background: color-mix(in srgb, var(--fg) 30%, transparent); } :is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key > i[data-part="rebuild"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 28%, transparent) 0 2px, color-mix(in srgb, var(--fg) 10%, transparent) 2px 4px); } /* ------------------------------------------------------- workspace ---- */ -.tc-fx { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 32%, 344px); gap: 12px; align-items: start; min-width: 0; } +.tc-fx { display: grid; grid-template-columns: minmax(0, 1fr) clamp(16.25rem, 32%, 21.5rem); gap: 0.75rem; align-items: start; min-width: 0; } .tc-fx[data-panel="closed"] { grid-template-columns: minmax(0, 1fr); } .tc-fcard { position: relative; min-width: 0; } /* The list. One grid for header and rows. */ -.tc-fl { --fl-cols: 32px minmax(0, 1fr) 176px 96px 32px; position: relative; } -.tc-fl--projects { --fl-cols: 32px minmax(0, 1fr) 168px 92px 84px 32px; } -.tc-fl--wide { --fl-cols: 32px minmax(0, 1fr) 128px 196px 104px 40px; } -.tc-fl-head, .tc-fl-row { display: grid; grid-template-columns: var(--fl-cols); align-items: center; column-gap: 12px; padding: 0 8px 0 10px; } -.tc-fl-head { min-height: 36px; font-size: 12px; font-weight: 500; color: var(--fg-muted); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2%, transparent); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; } -.tc-fl-head > button.tc-sort { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 24px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: inherit; cursor: pointer; } +.tc-fl { --fl-cols: 2rem minmax(0, 1fr) 11rem 6rem 2rem; position: relative; } +.tc-fl--projects { --fl-cols: 2rem minmax(0, 1fr) 10.5rem 5.75rem 5.25rem 2rem; } +.tc-fl--wide { --fl-cols: 2rem minmax(0, 1fr) 8rem 12.25rem 6.5rem 2.5rem; } +.tc-fl-head, .tc-fl-row { display: grid; grid-template-columns: var(--fl-cols); align-items: center; column-gap: 0.75rem; padding: 0 0.5rem 0 0.625rem; } +.tc-fl-head { min-height: 2.25rem; font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2%, transparent); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; } +.tc-fl-head > button.tc-sort { display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start; height: 1.5rem; margin-left: -0.375rem; padding: 0 0.375rem; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: inherit; cursor: pointer; } .tc-fl-head > button.tc-sort:hover { background: var(--hover); color: var(--fg); } .tc-fl-head > button.tc-sort[aria-sort] { color: var(--fg); } -.tc-fl-head > button.tc-sort .tc-icon { width: 12px; height: 12px; } +.tc-fl-head > button.tc-sort .tc-icon { width: 0.75rem; height: 0.75rem; } .tc-fl-head > .tc-right, .tc-fl-row > .tc-right { justify-self: end; text-align: right; } -.tc-fl-row { min-height: 44px; border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none !important; cursor: default; transition: background-color var(--dur-fast); } +.tc-fl-row { min-height: var(--touch); border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none !important; cursor: default; transition: background-color var(--dur-fast); } .tc-fl-head + .tc-fl-row { border-top: 0; } .tc-fl-row:hover, .tc-fl-row[data-hover] { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); } -[data-theme="dark"] .tc-fl-row:hover, [data-theme="dark"] .tc-fl-row[data-hover] { background: oklch(1 0 0 / 0.025); } +[data-theme="dark"] .tc-fl-row:hover, [data-theme="dark"] .tc-fl-row[data-hover] { background: color-mix(in srgb, var(--fg) 2.5%, transparent); } .tc-fl-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 2px 0 0 var(--accent); } [data-theme="dark"] .tc-fl-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); } .tc-fl-row[data-dim] .tc-fname > span:first-child, .tc-fl-row[data-dim] .tc-fl-icon { opacity: 0.62; } -.tc-fl--projects .tc-fl-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; } +.tc-fl--projects .tc-fl-row { min-height: 3.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .tc-fl-row .tc-checkbox { margin: 0; } .tc-fl-row:not(:hover):not([aria-selected="true"]) .tc-checkbox:not(:checked) { opacity: 0; } .tc-fl[data-selecting] .tc-fl-row .tc-checkbox { opacity: 1 !important; } .tc-fl-head .tc-checkbox { margin: 0; } -.tc-fcell { display: flex; align-items: center; gap: 10px; min-width: 0; } -.tc-fl-icon { width: 18px; height: 18px; flex: none; color: var(--fg-muted); } +.tc-fcell { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } +.tc-fl-icon { width: 1.125rem; height: 1.125rem; flex: none; color: var(--fg-muted); } .tc-fl-icon[data-kind="folder"] { color: color-mix(in srgb, var(--fg) 58%, transparent); } .tc-fl-icon[data-kind="image"], .tc-fl-icon[data-kind="video"] { color: var(--id-cursor); } .tc-fl-icon[data-kind="code"] { color: var(--id-grok); } .tc-fl-icon[data-kind="archive"] { color: var(--id-claude); } .tc-fl-icon[data-kind="secret"] { color: var(--warn); } -.tc-ftile { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); color: var(--fg); } -[data-theme="dark"] .tc-ftile { background: oklch(1 0 0 / 0.04); } -.tc-ftile .tc-icon { width: 16px; height: 16px; } -.tc-fname { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; } -.tc-fname > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; } +.tc-ftile { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); color: var(--fg); } +[data-theme="dark"] .tc-ftile { background: color-mix(in srgb, var(--fg) 4%, transparent); } +.tc-ftile .tc-icon { width: 1rem; height: 1rem; } +.tc-fname { display: flex; flex: 1; flex-direction: column; gap: 0.1875rem; min-width: 0; } +.tc-fname > span:first-child { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; } .tc-fname > span:first-child > b { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-fname > span:first-child > b.tc-mono-name { font: 400 13px/20px var(--font-mono); } +.tc-fname > span:first-child > b.tc-mono-name { font: 400 0.8125rem/1.25rem var(--font-mono); } .tc-fname .tc-sep { color: var(--fg-subtle); } /* Small labels beside a name. */ -.tc-ftag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; flex: none; +.tc-ftag { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.125rem; padding: 0 0.375rem; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 500; line-height: 1; white-space: nowrap; flex: none; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 5.5%, transparent); } -.tc-ftag .tc-icon { width: 11px; height: 11px; } +.tc-ftag .tc-icon { width: 0.6875rem; height: 0.6875rem; } .tc-ftag[data-tone="live"] { color: var(--ok-text); background: var(--ok-soft); } -.tc-ftag[data-tone="live"] .tc-dot { width: 6px; height: 6px; color: var(--ok); } +.tc-ftag[data-tone="live"] .tc-dot { width: 0.375rem; height: 0.375rem; color: var(--ok); } .tc-ftag[data-tone="warn"] { color: var(--warn-text); background: var(--warn-soft); } .tc-ftag[data-tone="rebuild"] { color: var(--fg-muted); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent); } -.tc-ftag code { font-size: 11px; } -.tc-git { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font: 600 10.5px/1 var(--font-mono); flex: none; } +.tc-ftag code { font-size: 0.6875rem; } +.tc-git { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 0.25rem; font: 600 0.65625rem/1 var(--font-mono); flex: none; } .tc-git[data-s="M"] { color: var(--warn-text); background: var(--warn-soft); } .tc-git[data-s="A"], .tc-git[data-s="U"] { color: var(--ok-text); background: var(--ok-soft); } .tc-git[data-s="D"] { color: var(--danger-text); background: var(--danger-soft); } /* Size cell: a bar against the largest sibling, the rebuildable part hatched. */ -.tc-fsize { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 10px; min-width: 0; } -.tc-fsize > b { font-size: 13px; font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } +.tc-fsize { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; align-items: center; gap: 0.625rem; min-width: 0; } +.tc-fsize > b { font-size: 0.8125rem; font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tc-fsize > b[data-muted] { color: var(--fg-muted); } -.tc-bar { position: relative; display: flex; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; } +.tc-bar { position: relative; display: flex; height: 0.375rem; border-radius: 0.1875rem; background: color-mix(in srgb, var(--fg) 6%, transparent); overflow: hidden; } .tc-bar > span { display: block; height: 100%; } .tc-bar > [data-part="kept"] { background: color-mix(in srgb, var(--fg) 46%, transparent); } .tc-bar > [data-part="git"] { background: color-mix(in srgb, var(--fg) 28%, transparent); } .tc-bar > [data-part="rebuild"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 26%, transparent) 0 2px, color-mix(in srgb, var(--fg) 10%, transparent) 2px 4px); } .tc-fl-row[aria-selected="true"] .tc-bar > [data-part="kept"] { background: color-mix(in srgb, var(--accent) 80%, var(--fg)); } -.tc-fmeta { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.tc-fmeta { font-size: 0.78125rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-fmeta strong { color: var(--fg); font-weight: 400; } .tc-fl-row > .tc-fmenu { opacity: 0; justify-self: end; } .tc-fl-row:hover > .tc-fmenu, .tc-fl-row[aria-selected="true"] > .tc-fmenu, .tc-fl-row[data-hover] > .tc-fmenu { opacity: 1; } /* Selection summary and actions share a row, wrapping as groups when needed. */ -.tc-fl-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); +.tc-fl-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-height: var(--touch); padding: 0.5rem 0.625rem; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; } [data-theme="dark"] .tc-fl-selbar { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .tc-fl-selbar > .tc-checkbox { flex: none; } -.tc-files-selection-summary { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; font-size: 13px; } +.tc-files-selection-summary { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; font-size: 0.8125rem; } .tc-files-selection-summary strong { font-weight: 500; white-space: nowrap; } -.tc-files-selection-summary span { color: var(--fg-muted); font-size: 12.5px; } -.tc-files-selection-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 100%; margin-left: auto; } +.tc-files-selection-summary span { color: var(--fg-muted); font-size: 0.78125rem; } +.tc-files-selection-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem; max-width: 100%; margin-left: auto; } /* Footer of the list: counts, hidden items, scan time. */ -.tc-fl-foot { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); +.tc-fl-foot { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.75rem 0 1rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2%, transparent); border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px); } .tc-fl-foot .tc-sep { color: var(--fg-subtle); } .tc-fl-foot .tc-btn--link, .tc-linkbtn { height: auto; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; } -.tc-fl-foot .tc-icon { width: 14px; height: 14px; } +.tc-fl-foot .tc-icon { width: 0.875rem; height: 0.875rem; } /* --------------------------------------------------------- details --- */ -.tc-fd { display: flex; flex-direction: column; min-width: 0; position: sticky; top: 16px; } -.tc-fd-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 10px 14px 16px; } +.tc-fd { display: flex; flex-direction: column; min-width: 0; position: sticky; top: 1rem; } +.tc-fd-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 0.625rem 0.875rem 1rem; } .tc-fd-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } -.tc-fd-title h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-fd-title code { font-size: 11.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-fd-sec { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--hairline); } -.tc-fd-label { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--fg-muted); } +.tc-fd-title h2 { margin: 0; font-size: 1rem; line-height: 1.375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-fd-title code { font-size: 0.71875rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-fd-sec { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem 1rem; border-top: 1px solid var(--hairline); } +.tc-fd-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--fg-muted); } .tc-fd-label .tc-spacer + * { color: var(--fg-muted); } -.tc-fd-big { display: flex; align-items: baseline; gap: 8px; } -.tc-fd-big strong { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } -.tc-fd-big span { font-size: 12px; color: var(--fg-muted); } -.tc-fd-keys { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; font-size: 12.5px; } +.tc-fd-big { display: flex; align-items: baseline; gap: 0.5rem; } +.tc-fd-big strong { font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } +.tc-fd-big span { font-size: 0.75rem; color: var(--fg-muted); } +.tc-fd-keys { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.375rem 0.5rem; align-items: center; font-size: 0.78125rem; } .tc-fd-keys > b { font-weight: 400; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; } .tc-fd-keys > span { color: var(--fg-muted); } -.tc-fd-list { display: flex; flex-direction: column; margin: 0 -8px; } -.tc-fd-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--fg); text-decoration: none !important; } +.tc-fd-list { display: flex; flex-direction: column; margin: 0 -0.5rem; } +.tc-fd-item { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-height: 1.875rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--fg); text-decoration: none !important; } .tc-fd-item:hover { background: var(--hover); } -.tc-fd-item > .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } +.tc-fd-item > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } .tc-fd-item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; } .tc-fd-item > span:nth-child(2) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-fd-item > span:nth-child(2) > small { font-size: 11.5px; color: var(--fg-muted); } -.tc-fd-item > b { font-weight: 400; font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } -.tc-fd-item .tc-bar { margin-top: 5px; height: 4px; } -.tc-fd-facts { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 12.5px; line-height: 18px; } +.tc-fd-item > span:nth-child(2) > small { font-size: 0.71875rem; color: var(--fg-muted); } +.tc-fd-item > b { font-weight: 400; font-size: 0.78125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; } +.tc-fd-item .tc-bar { margin-top: 0.3125rem; height: 0.25rem; } +.tc-fd-facts { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 0.375rem 0.625rem; margin: 0; font-size: 0.78125rem; line-height: 1.125rem; } .tc-fd-facts dt { color: var(--fg-muted); } -.tc-fd-facts dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } -.tc-fd-facts code { font-size: 12px; } -.tc-fd-facts .tc-dot { width: 6px; height: 6px; } -.tc-fd-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px 14px; border-top: 1px solid var(--hairline); } +.tc-fd-facts dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } +.tc-fd-facts code { font-size: 0.75rem; } +.tc-fd-facts .tc-dot { width: 0.375rem; height: 0.375rem; } +.tc-fd-foot { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; padding: 0.75rem 1rem 0.875rem; border-top: 1px solid var(--hairline); } .tc-fd-foot .tc-btn--primary { flex: 1 1 auto; } /* Preview inside the details panel. */ -.tc-fprev { position: relative; margin: 0; padding: 10px 0; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-sunken); font: 400 11.5px/19px var(--font-mono); color: var(--fg); max-height: 288px; overflow: hidden; counter-reset: ln; } -.tc-fprev > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding-right: 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; } -.tc-fprev > span::before { counter-increment: ln; content: counter(ln); padding-right: 10px; text-align: right; color: var(--fg-subtle); user-select: none; } +.tc-fprev { position: relative; margin: 0; padding: 0.625rem 0; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-sunken); font: 400 0.71875rem/1.1875rem var(--font-mono); color: var(--fg); max-height: 18rem; overflow: hidden; counter-reset: ln; } +.tc-fprev > span { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); padding-right: 0.625rem; white-space: pre; overflow: hidden; text-overflow: ellipsis; } +.tc-fprev > span::before { counter-increment: ln; content: counter(ln); padding-right: 0.625rem; text-align: right; color: var(--fg-subtle); user-select: none; } .tc-fprev .k { color: var(--accent-text); } [data-theme="dark"] .tc-fprev .k, [data-theme="dark"] .tc-ed .k { color: color-mix(in srgb, var(--accent-text) 55%, white); } .tc-fprev .s { color: var(--ok-text); } .tc-fprev .m { color: var(--fg-muted); } -.tc-fprev::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 48px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(to bottom, transparent, var(--surface-sunken)); } +.tc-fprev::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(to bottom, transparent, var(--surface-sunken)); } .tc-fprev-img { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: conic-gradient(color-mix(in srgb, var(--fg) 5%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--fg) 5%, transparent) 0 75%, transparent 0) 0 0 / 16px 16px; } /* ------------------------------------------------------------ sizes --- */ -.tc-tree { --tree-cols: minmax(0, 1fr) minmax(120px, 0.7fr) 76px 52px 40px; } +.tc-tree { --tree-cols: minmax(0, 1fr) minmax(7.5rem, 0.7fr) 4.75rem 3.25rem 2.5rem; } .tc-tree .tc-fl-head, .tc-tree .tc-fl-row { grid-template-columns: var(--tree-cols); } -.tc-tree .tc-fl-row { min-height: 38px; } -.tc-tnode { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: calc(var(--depth, 0) * 20px); } -.tc-tnode > button { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 0; border-radius: 4px; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; } +.tc-tree .tc-fl-row { min-height: 2.375rem; } +.tc-tnode { display: flex; align-items: center; gap: 0.375rem; min-width: 0; padding-left: calc(var(--depth, 0) * 20px); } +.tc-tnode > button { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border: 0; border-radius: 0.25rem; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; } .tc-tnode > button:hover { background: var(--hover); color: var(--fg); } -.tc-tnode > button .tc-icon { width: 14px; height: 14px; } -.tc-tnode > i { width: 20px; flex: none; } -.tc-tnode > .tc-fl-icon { width: 16px; height: 16px; } -.tc-tnode > b { font-weight: 400; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-tree .tc-bar { height: 8px; border-radius: 4px; } -.tc-tpct { font-size: 12px; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; } +.tc-tnode > button .tc-icon { width: 0.875rem; height: 0.875rem; } +.tc-tnode > i { width: 1.25rem; flex: none; } +.tc-tnode > .tc-fl-icon { width: 1rem; height: 1rem; } +.tc-tnode > b { font-weight: 400; font-size: 0.84375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-tree .tc-bar { height: 0.5rem; border-radius: 0.25rem; } +.tc-tpct { font-size: 0.75rem; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; } .tc-tree .tc-fl-row[data-depth="0"] .tc-tnode > b { font-weight: 500; } /* ---------------------------------------------------------- editor ---- */ -.tc-layer--sheet > .tc-sheet--editor { width: 760px; } -.tc-ed-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--hairline); } +.tc-layer--sheet > .tc-sheet--editor { width: 47.5rem; } +.tc-ed-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0.75rem 0.75rem 1.125rem; border-bottom: 1px solid var(--hairline); } .tc-ed-head > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } -.tc-ed-head strong { font: 500 14px/20px var(--font-mono); } -.tc-ed-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); } -.tc-ed-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } -.tc-ed { flex: 1; min-height: 0; overflow: hidden; padding: 12px 0; font: 400 13px/22px var(--font-mono); color: var(--fg); background: var(--surface-sunken); counter-reset: ln; } -.tc-ed > span { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding-right: 16px; white-space: pre-wrap; } -.tc-ed > span::before { counter-increment: ln; content: counter(ln); padding-right: 14px; text-align: right; color: var(--fg-subtle); } +.tc-ed-head strong { font: 500 0.875rem/1.25rem var(--font-mono); } +.tc-ed-head small { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--fg-muted); } +.tc-ed-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem 0.5rem 1.125rem; border-bottom: 1px solid var(--hairline); font-size: 0.75rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 1.5%, transparent); } +.tc-ed { flex: 1; min-height: 0; overflow: hidden; padding: 0.75rem 0; font: 400 0.8125rem/1.375rem var(--font-mono); color: var(--fg); background: var(--surface-sunken); counter-reset: ln; } +.tc-ed > span { display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding-right: 1rem; white-space: pre-wrap; } +.tc-ed > span::before { counter-increment: ln; content: counter(ln); padding-right: 0.875rem; text-align: right; color: var(--fg-subtle); } .tc-ed > span[data-cur] { background: color-mix(in srgb, var(--accent) 6%, transparent); } .tc-ed > span[data-cur]::before { color: var(--fg); } -.tc-ed .caret { display: inline-block; width: 2px; height: 17px; margin-bottom: -3px; background: var(--accent); } +.tc-ed .caret { display: inline-block; width: 2px; height: 1.0625rem; margin-bottom: -0.1875rem; background: var(--accent); } .tc-ed .m { color: var(--fg-muted); } .tc-ed .k { color: var(--accent-text); } .tc-ed .mask { letter-spacing: 1px; color: var(--fg-muted); } -.tc-ed-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } -.tc-ed-foot .tc-hint { margin: 0; display: inline-flex; align-items: center; gap: 6px; } +.tc-ed-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 0.75rem 1.125rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-ed-foot .tc-hint { margin: 0; display: inline-flex; align-items: center; gap: 0.375rem; } /* ----------------------------------------------------------- dialogs --- */ -.tc-fdlg { position: relative; z-index: 1; width: 560px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-2xl); overflow: hidden; +.tc-fdlg { position: relative; z-index: 1; width: 35rem; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-dialog); } -.tc-fdlg--wide { width: 680px; } -.tc-fdlg-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 4px 22px; } -.tc-fdlg-head > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } -.tc-fdlg-head h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; } -.tc-fdlg-head p { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--fg-muted); } -.tc-fdlg-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 22px 18px; min-height: 0; overflow: hidden; } -.tc-fdlg-foot { display: flex; align-items: center; gap: 8px; padding: 14px 16px 14px 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } -.tc-fdlg-foot .tc-hint { margin: 0; display: inline-flex; align-items: center; gap: 6px; } -.tc-fdlg-foot .tc-hint .tc-icon { width: 14px; height: 14px; } -.tc-fdlg-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-xs); } +.tc-fdlg--wide { width: 42.5rem; } +.tc-fdlg-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1rem 0.25rem 1.375rem; } +.tc-fdlg-head > div { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; } +.tc-fdlg-head h2 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; } +.tc-fdlg-head p { margin: 0; font-size: 0.84375rem; line-height: 1.25rem; color: var(--fg-muted); } +.tc-fdlg-body { display: flex; flex-direction: column; gap: 0.875rem; padding: 0.875rem 1.375rem 1.125rem; min-height: 0; overflow: hidden; } +.tc-fdlg-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem 0.875rem 1.375rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } +.tc-fdlg-foot .tc-hint { margin: 0; display: inline-flex; align-items: center; gap: 0.375rem; } +.tc-fdlg-foot .tc-hint .tc-icon { width: 0.875rem; height: 0.875rem; } +.tc-fdlg-mark { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-xs); } .tc-fdlg-mark[data-tone="danger"] { color: var(--danger-text); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 26%, transparent); box-shadow: none; } .tc-fdlg-mark[data-tone="warn"] { color: var(--warn-text); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); box-shadow: none; } -.tc-fdlg-mark .tc-icon { width: 18px; height: 18px; } -.tc-stat { display: flex; align-items: baseline; gap: 8px; } -.tc-stat strong { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } -.tc-stat span { font-size: 13px; color: var(--fg-muted); } +.tc-fdlg-mark .tc-icon { width: 1.125rem; height: 1.125rem; } +.tc-stat { display: flex; align-items: baseline; gap: 0.5rem; } +.tc-stat strong { font-size: 1.625rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } +.tc-stat span { font-size: 0.8125rem; color: var(--fg-muted); } /* Option rows: a checkbox, a title with its consequence, a size. */ .tc-opts { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } -.tc-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 11px 14px; cursor: pointer; } +.tc-opt { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; gap: 2px 0.75rem; align-items: start; padding: 0.6875rem 0.875rem; cursor: pointer; } .tc-opt + .tc-opt { border-top: 1px solid var(--hairline); } .tc-opt .tc-checkbox, .tc-opt input[type="radio"] { margin-top: 2px; } .tc-opt > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; } -.tc-opt strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 20px; font-weight: 500; } -.tc-opt strong code { font-size: 12.5px; font-weight: 400; } -.tc-opt small { font-size: 12px; line-height: 17px; color: var(--fg-muted); } -.tc-opt small code { font-size: 11.5px; } -.tc-opt > b { font-size: 13px; font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; } +.tc-opt strong { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84375rem; line-height: 1.25rem; font-weight: 500; } +.tc-opt strong code { font-size: 0.78125rem; font-weight: 400; } +.tc-opt small { font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } +.tc-opt small code { font-size: 0.71875rem; } +.tc-opt > b { font-size: 0.8125rem; font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; } .tc-opt[data-off] > b, .tc-opt[data-off] strong { color: var(--fg-muted); } -.tc-opt .tc-opt-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 17px; color: var(--warn-text); } -.tc-opt-warn .tc-icon { width: 13px; height: 13px; flex: none; margin-top: 2px; } -.tc-opts-group { padding: 7px 14px; font-size: 12px; font-weight: 500; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); border-top: 1px solid var(--hairline); } +.tc-opt .tc-opt-warn { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.0625rem; color: var(--warn-text); } +.tc-opt-warn .tc-icon { width: 0.8125rem; height: 0.8125rem; flex: none; margin-top: 2px; } +.tc-opts-group { padding: 0.4375rem 0.875rem; font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2.5%, transparent); border-top: 1px solid var(--hairline); } .tc-opts-group:first-child { border-top: 0; } -.tc-radio { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 2px 0 0; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); box-shadow: var(--shadow-xs); } +.tc-radio { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; margin: 2px 0 0; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); box-shadow: var(--shadow-xs); } .tc-radio:checked { border: 5px solid var(--accent); background: #fff; } /* Risk list in the delete review. */ .tc-risks { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } -.tc-risk { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; align-items: start; } +.tc-risk { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 2px 0.75rem; padding: 0.75rem 0.875rem; align-items: start; } .tc-risk + .tc-risk { border-top: 1px solid var(--hairline); } -.tc-risk > .tc-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--fg-muted); } +.tc-risk > .tc-icon { width: 1rem; height: 1rem; margin-top: 2px; color: var(--fg-muted); } .tc-risk[data-tone="danger"] > .tc-icon { color: var(--danger); } .tc-risk[data-tone="warn"] > .tc-icon { color: var(--warn); } -.tc-risk > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } -.tc-risk strong { font-size: 13.5px; line-height: 20px; font-weight: 500; } -.tc-risk small { font-size: 12px; line-height: 17px; color: var(--fg-muted); } +.tc-risk > div { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } +.tc-risk strong { font-size: 0.84375rem; line-height: 1.25rem; font-weight: 500; } +.tc-risk small { font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } .tc-risk ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } -.tc-risk li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--fg); min-width: 0; } -.tc-risk li code { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-risk li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1.125rem; color: var(--fg); min-width: 0; } +.tc-risk li code { font-size: 0.71875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-risk li .tc-muted { white-space: nowrap; } .tc-risk > .tc-btn { align-self: center; } -.tc-typeconfirm { display: flex; flex-direction: column; gap: 6px; } -.tc-typeconfirm label { font-size: 13px; color: var(--fg); } -.tc-typeconfirm label code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 6%, transparent); } -.tc-typeconfirm .tc-input { height: 34px; font: 400 13px/1 var(--font-mono); } +.tc-typeconfirm { display: flex; flex-direction: column; gap: 0.375rem; } +.tc-typeconfirm label { font-size: 0.8125rem; color: var(--fg); } +.tc-typeconfirm label code { font-size: 0.78125rem; padding: 1px 0.3125rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--fg) 6%, transparent); } +.tc-typeconfirm .tc-input { height: 2.125rem; font: 400 0.8125rem/1 var(--font-mono); } /* Conflict rows: existing vs incoming, one choice each. */ -.tc-conf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; align-items: center; } +.tc-conf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 0.75rem; padding: 0.75rem 0.875rem; align-items: center; } .tc-conf + .tc-conf { border-top: 1px solid var(--hairline); } -.tc-conf > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; } -.tc-conf strong { display: flex; align-items: center; gap: 8px; font: 500 13px/20px var(--font-mono); } -.tc-conf strong .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } -.tc-conf small { display: grid; grid-template-columns: 64px auto; gap: 0 8px; font-size: 12px; line-height: 17px; color: var(--fg-muted); } +.tc-conf > div:first-child { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; } +.tc-conf strong { display: flex; align-items: center; gap: 0.5rem; font: 500 0.8125rem/1.25rem var(--font-mono); } +.tc-conf strong .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } +.tc-conf small { display: grid; grid-template-columns: 4rem auto; gap: 0 0.5rem; font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } .tc-conf small b { font-weight: 400; color: var(--fg); } -.tc-conf .tc-seg button { height: 24px; font-size: 12px; } +.tc-conf .tc-seg button { height: 1.5rem; font-size: 0.75rem; } /* Folder picker. */ .tc-picker { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; } -.tc-picker-places { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); } -.tc-pick-row { display: grid; grid-template-columns: auto 16px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 calc(10px + var(--depth, 0) * 18px); font-size: 13px; } +.tc-picker-places { display: flex; gap: 0.25rem; padding: 0.5rem; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-pick-row { display: grid; grid-template-columns: auto 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 10px 0 calc(10px + var(--depth, 0) * 18px); font-size: 0.8125rem; } .tc-pick-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 2px 0 0 var(--accent); } -.tc-pick-row > button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; background: none; color: var(--fg-muted); padding: 0; } -.tc-pick-row > button .tc-icon { width: 13px; height: 13px; } -.tc-pick-row > i { width: 18px; } -.tc-pick-row > .tc-icon { width: 15px; height: 15px; color: color-mix(in srgb, var(--fg) 58%, transparent); } -.tc-pick-row > small { font-size: 11.5px; color: var(--fg-muted); } +.tc-pick-row > button { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border: 0; background: none; color: var(--fg-muted); padding: 0; } +.tc-pick-row > button .tc-icon { width: 0.8125rem; height: 0.8125rem; } +.tc-pick-row > i { width: 1.125rem; } +.tc-pick-row > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: color-mix(in srgb, var(--fg) 58%, transparent); } +.tc-pick-row > small { font-size: 0.71875rem; color: var(--fg-muted); } .tc-pick-row[data-disabled] { color: var(--fg-muted); } -.tc-dest { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-muted); } -.tc-dest code { font-size: 12px; color: var(--fg); } +.tc-dest { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78125rem; color: var(--fg-muted); } +.tc-dest code { font-size: 0.75rem; color: var(--fg); } /* ------------------------------------------------------ drop + tray --- */ .tc-drop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: var(--radius-xl); border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 7%, color-mix(in srgb, var(--bg) 82%, transparent)); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); } [data-theme="dark"] .tc-drop { background: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--bg) 80%, transparent)); } -.tc-drop > div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } -.tc-drop-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--accent) 60%, transparent); margin-bottom: 8px; } -.tc-drop-mark .tc-icon { width: 24px; height: 24px; } -.tc-drop strong { font-size: 16px; line-height: 22px; font-weight: 600; } -.tc-drop strong code { font-size: 15px; } -.tc-drop span { font-size: 13px; color: var(--fg-muted); } - -.tc-tray { position: absolute; right: 24px; bottom: 20px; z-index: 30; width: 392px; display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; +.tc-drop > div { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; } +.tc-drop-mark { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 1rem; background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--accent) 60%, transparent); margin-bottom: 0.5rem; } +.tc-drop-mark .tc-icon { width: 1.5rem; height: 1.5rem; } +.tc-drop strong { font-size: 1rem; line-height: 1.375rem; font-weight: 600; } +.tc-drop strong code { font-size: 0.9375rem; } +.tc-drop span { font-size: 0.8125rem; color: var(--fg-muted); } + +.tc-tray { position: absolute; right: 1.5rem; bottom: 1.25rem; z-index: 30; width: 24.5rem; display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-popup); } -.tc-tray-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--hairline); } +.tc-tray-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem 0.625rem 0.875rem; border-bottom: 1px solid var(--hairline); } .tc-tray-head > div { display: flex; flex-direction: column; flex: 1; min-width: 0; } -.tc-tray-head strong { font-size: 13.5px; line-height: 20px; font-weight: 600; } -.tc-tray-head small { font-size: 12px; color: var(--fg-muted); } -.tc-tray-head .tc-progress { margin-top: 6px; } -.tc-tray-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 8px 10px 14px; } +.tc-tray-head strong { font-size: 0.84375rem; line-height: 1.25rem; font-weight: 600; } +.tc-tray-head small { font-size: 0.75rem; color: var(--fg-muted); } +.tc-tray-head .tc-progress { margin-top: 0.375rem; } +.tc-tray-item { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; gap: 2px 0.625rem; align-items: center; padding: 0.625rem 0.5rem 0.625rem 0.875rem; } .tc-tray-item + .tc-tray-item { border-top: 1px solid var(--hairline); } -.tc-tray-item > .tc-icon { width: 16px; height: 16px; color: var(--fg-muted); } -.tc-tray-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } -.tc-tray-item b { font: 400 12.5px/18px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-tray-item small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 16px; color: var(--fg-muted); white-space: nowrap; } -.tc-tray-item small .tc-icon { width: 12px; height: 12px; } -.tc-tray-item .tc-progress { height: 3px; } +.tc-tray-item > .tc-icon { width: 1rem; height: 1rem; color: var(--fg-muted); } +.tc-tray-item > div { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; } +.tc-tray-item b { font: 400 0.78125rem/1.125rem var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-tray-item small { display: flex; align-items: center; gap: 0.375rem; font-size: 0.71875rem; line-height: 1rem; color: var(--fg-muted); white-space: nowrap; } +.tc-tray-item small .tc-icon { width: 0.75rem; height: 0.75rem; } +.tc-tray-item .tc-progress { height: 0.1875rem; } .tc-tray-item[data-state="done"] > .tc-icon { color: var(--ok); } .tc-tray-item[data-state="warn"] > .tc-icon { color: var(--warn); } .tc-tray-item[data-state="warn"] small { color: var(--warn-text); } .tc-tray-item > span:last-child { display: flex; gap: 2px; } -.tc-tray-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--fg); } -.tc-tray-sub .tc-checkbox { width: 14px; height: 14px; margin: 0; } -.tc-tray-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--hairline); font-size: 11.5px; line-height: 16px; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2%, transparent); } -.tc-tray-foot .tc-icon { width: 13px; height: 13px; flex: none; } +.tc-tray-sub { display: flex; align-items: center; gap: 0.5rem; margin-top: 2px; font-size: 0.75rem; color: var(--fg); } +.tc-tray-sub .tc-checkbox { width: 0.875rem; height: 0.875rem; margin: 0; } +.tc-tray-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.875rem; border-top: 1px solid var(--hairline); font-size: 0.71875rem; line-height: 1rem; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-tray-foot .tc-icon { width: 0.8125rem; height: 0.8125rem; flex: none; } /* ------------------------------------------------------------ banners --- */ -.tc-fbanner { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2%, transparent); } -.tc-fbanner > .tc-icon { width: 18px; height: 18px; flex: none; color: var(--fg-muted); } +.tc-fbanner { display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 0.75rem 0.6875rem 0.875rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2%, transparent); } +.tc-fbanner > .tc-icon { width: 1.125rem; height: 1.125rem; flex: none; color: var(--fg-muted); } .tc-fbanner > div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } -.tc-fbanner strong { font-size: 13.5px; line-height: 20px; font-weight: 500; } -.tc-fbanner span { font-size: 12.5px; line-height: 18px; color: var(--fg-muted); } +.tc-fbanner strong { font-size: 0.84375rem; line-height: 1.25rem; font-weight: 500; } +.tc-fbanner span { font-size: 0.78125rem; line-height: 1.125rem; color: var(--fg-muted); } .tc-fbanner span a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; } .tc-fbanner[data-tone="managed"] > .tc-icon { color: var(--fg); } .tc-fbanner[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); } @@ -2524,76 +2534,76 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-fbanner .tc-btn { flex: none; } /* ------------------------------------------------------- menus, etc --- */ -.tc-ctx { position: absolute; z-index: 40; width: 260px; } -.tc-menu-item .tc-menu-lock { margin-left: auto; width: 12px; height: 12px; color: var(--fg-subtle); } -.tc-menu-item .tc-kbd { margin-left: auto; height: 18px; min-width: 18px; font-size: 11px; background: transparent; border: 0; box-shadow: none; color: var(--fg-muted); padding: 0 2px; letter-spacing: 0.04em; } +.tc-ctx { position: absolute; z-index: 40; width: 16.25rem; } +.tc-menu-item .tc-menu-lock { margin-left: auto; width: 0.75rem; height: 0.75rem; color: var(--fg-subtle); } +.tc-menu-item .tc-kbd { margin-left: auto; height: 1.125rem; min-width: 1.125rem; font-size: 0.6875rem; background: transparent; border: 0; box-shadow: none; color: var(--fg-muted); padding: 0 2px; letter-spacing: 0.04em; } .tc-menu-item--danger .tc-kbd { color: color-mix(in srgb, var(--danger-text) 70%, transparent); } .tc-menu-item[data-active] { background: var(--hover); } -.tc-rename { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; position: relative; } -.tc-rename .tc-input { height: 28px; font: 400 13px/1 var(--font-mono); padding: 0 8px; } -.tc-rename-err { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--radius-md); - background: var(--danger-text); color: #fff; font-size: 12px; line-height: 16px; white-space: nowrap; box-shadow: var(--shadow-popup); } -.tc-rename-err .tc-icon { width: 13px; height: 13px; } +.tc-rename { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; position: relative; } +.tc-rename .tc-input { height: 1.75rem; font: 400 0.8125rem/1 var(--font-mono); padding: 0 0.5rem; } +.tc-rename-err { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.5625rem; border-radius: var(--radius-md); + background: var(--danger-text); color: #fff; font-size: 0.75rem; line-height: 1rem; white-space: nowrap; box-shadow: var(--shadow-popup); } +.tc-rename-err .tc-icon { width: 0.8125rem; height: 0.8125rem; } -.tc-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 4px; } +.tc-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 0.25rem; } .tc-suggest .tc-menu-label { display: flex; align-items: center; justify-content: space-between; } -.tc-sug { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 13px; } +.tc-sug { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; min-height: 2rem; padding: 0 0.5rem; border-radius: var(--radius-sm); font-size: 0.8125rem; } .tc-sug[data-active] { background: var(--hover); } -.tc-sug > .tc-icon { width: 15px; height: 15px; color: color-mix(in srgb, var(--fg) 58%, transparent); } -.tc-sug > span { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; } +.tc-sug > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: color-mix(in srgb, var(--fg) 58%, transparent); } +.tc-sug > span { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-family: var(--font-mono); font-size: 0.78125rem; } .tc-sug > span mark { background: none; color: var(--fg); font-weight: 600; } .tc-sug > span .tc-ftag { font-family: var(--font-sans); } -.tc-sug > small { font-size: 12px; color: var(--fg-muted); } -.tc-sug-foot { display: flex; align-items: center; gap: 14px; padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--hairline); font-size: 11.5px; color: var(--fg-muted); } -.tc-sug-foot .tc-kbd { height: 18px; min-width: 18px; font-size: 10.5px; } +.tc-sug > small { font-size: 0.75rem; color: var(--fg-muted); } +.tc-sug-foot { display: flex; align-items: center; gap: 0.875rem; padding: 0.5rem 0.5rem 0.25rem; margin-top: 0.25rem; border-top: 1px solid var(--hairline); font-size: 0.71875rem; color: var(--fg-muted); } +.tc-sug-foot .tc-kbd { height: 1.125rem; min-width: 1.125rem; font-size: 0.65625rem; } /* Search filters. */ -.tc-ffilters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } -.tc-fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--fg); cursor: pointer; white-space: nowrap; } -[data-theme="dark"] .tc-fchip { background: oklch(1 0 0 / 0.03); } +.tc-ffilters { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } +.tc-fchip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.625rem; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 0.78125rem; color: var(--fg); cursor: pointer; white-space: nowrap; } +[data-theme="dark"] .tc-fchip { background: color-mix(in srgb, var(--fg) 3%, transparent); } .tc-fchip > span { color: var(--fg-muted); } -.tc-fchip .tc-icon { width: 13px; height: 13px; color: var(--fg-muted); } +.tc-fchip .tc-icon { width: 0.8125rem; height: 0.8125rem; color: var(--fg-muted); } .tc-fchip[data-on] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .tc-fchip[data-on] > span { color: var(--fg); } -.tc-fchip--scope { padding-right: 4px; } -.tc-fchip--scope button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--fg-muted); padding: 0; } -.tc-fchip--scope button .tc-icon { width: 12px; height: 12px; } -.tc-hit { font: 400 11.5px/16px var(--font-mono); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.tc-fchip--scope { padding-right: 0.25rem; } +.tc-fchip--scope button { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 0; border-radius: 50%; background: none; color: var(--fg-muted); padding: 0; } +.tc-fchip--scope button .tc-icon { width: 0.75rem; height: 0.75rem; } +.tc-hit { font: 400 0.71875rem/1rem var(--font-mono); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-hit mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 2px; } .tc-fname mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 2px; } -.tc-skel-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 96px 56px; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-top: 1px solid var(--hairline); } +.tc-skel-row { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) 6rem 3.5rem; align-items: center; gap: 0.75rem; height: 2.5rem; padding: 0 1rem; border-top: 1px solid var(--hairline); } .tc-skel-row:first-child { border-top: 0; } -.tc-keys-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 16px; padding: 16px 18px; font-size: 12.5px; align-items: center; } +.tc-keys-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4375rem 1rem; padding: 1rem 1.125rem; font-size: 0.78125rem; align-items: center; } .tc-keys-grid > span { color: var(--fg); } -.tc-keys-grid > span:nth-child(even) { display: inline-flex; gap: 4px; justify-content: flex-end; } -.tc-keys-grid .tc-kbd { height: 20px; min-width: 20px; font-size: 11px; } +.tc-keys-grid > span:nth-child(even) { display: inline-flex; gap: 0.25rem; justify-content: flex-end; } +.tc-keys-grid .tc-kbd { height: 1.25rem; min-width: 1.25rem; font-size: 0.6875rem; } -.tc-pcrumbs { display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-size: 15px; flex: none; } -.tc-pcrumbs .tc-crumb { font-size: 15px; height: 32px; padding: 0 6px; } -.tc-plist .tc-prow-file { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 60px; padding: 10px 14px; color: inherit; text-decoration: none !important; } +.tc-pcrumbs { display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-size: 0.9375rem; flex: none; } +.tc-pcrumbs .tc-crumb { font-size: 0.9375rem; height: 2rem; padding: 0 0.375rem; } +.tc-plist .tc-prow-file { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; min-height: 3.75rem; padding: 0.625rem 0.875rem; color: inherit; text-decoration: none !important; } .tc-plist .tc-prow-file + .tc-prow-file { border-top: 1px solid var(--hairline); } -.tc-prow-file > .tc-fl-icon { width: 20px; height: 20px; } +.tc-prow-file > .tc-fl-icon { width: 1.25rem; height: 1.25rem; } .tc-prow-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } -.tc-prow-file > div > span { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; line-height: 22px; } +.tc-prow-file > div > span { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 1rem; line-height: 1.375rem; } .tc-prow-file > div > span b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-prow-file > div > small { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; } -.tc-prow-file > b { font-size: 14px; font-weight: 400; color: var(--fg-muted); font-variant-numeric: tabular-nums; } -.tc-prow-file .tc-bar { width: 100%; height: 4px; margin-top: 4px; } +.tc-prow-file > div > small { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; } +.tc-prow-file > b { font-size: 0.875rem; font-weight: 400; color: var(--fg-muted); font-variant-numeric: tabular-nums; } +.tc-prow-file .tc-bar { width: 100%; height: 0.25rem; margin-top: 0.25rem; } .tc-prow-file[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 8%, transparent); } -.tc-prow-file .tc-checkbox { width: 22px; height: 22px; margin: 0; border-radius: 6px; } +.tc-prow-file .tc-checkbox { width: 1.375rem; height: 1.375rem; margin: 0; border-radius: 0.375rem; } .tc-prow-file .tc-checkbox:checked { background-size: 14px; } -#files-browser .tc-prow-file > .tc-btn { min-width: 44px; min-height: 44px; } -.tc-pselbar { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 8px 26px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } -.tc-pselbar button { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 52px; justify-content: center; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; font-size: 12px; } -.tc-pselbar button .tc-icon { width: 20px; height: 20px; } +#files-browser .tc-prow-file > .tc-btn { min-width: var(--touch); min-height: var(--touch); } +.tc-pselbar { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; padding: 0.5rem 0.5rem 1.625rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } +.tc-pselbar button { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; height: 3.25rem; justify-content: center; border: 0; border-radius: 0.625rem; background: none; color: var(--fg); font: inherit; font-size: 0.75rem; } +.tc-pselbar button .tc-icon { width: 1.25rem; height: 1.25rem; } .tc-pselbar button[data-danger] { color: var(--danger-text); } -.tc-psheet-list { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; } -.tc-psheet-item { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 16px; font-size: 16px; color: var(--fg); } +.tc-psheet-list { display: flex; flex-direction: column; border-radius: 0.875rem; border: 1px solid var(--border); overflow: hidden; } +.tc-psheet-item { display: flex; align-items: center; gap: 0.875rem; min-height: 3.125rem; padding: 0 1rem; font-size: 1rem; color: var(--fg); } .tc-psheet-item + .tc-psheet-item { border-top: 1px solid var(--hairline); } -.tc-psheet-item .tc-icon { width: 20px; height: 20px; color: var(--fg-muted); } -.tc-psheet-item small { margin-left: auto; font-size: 14px; color: var(--fg-muted); } +.tc-psheet-item .tc-icon { width: 1.25rem; height: 1.25rem; color: var(--fg-muted); } +.tc-psheet-item small { margin-left: auto; font-size: 0.875rem; color: var(--fg-muted); } .tc-psheet-item[data-danger] { color: var(--danger-text); } .tc-psheet-item[data-danger] .tc-icon { color: var(--danger-text); } .tc-fmeta .tc-muted { color: var(--fg-subtle); } @@ -2605,20 +2615,20 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-fcard > .tc-fl-foot { border-top: 1px solid var(--border); } .tc-btn[data-on] { background: var(--hover); color: var(--fg); } /* One-line "largest" items: name, bar, size. */ -.tc-fd-item { grid-template-columns: 16px minmax(0, 1fr) 56px 56px; } -.tc-fd-item > .tc-bar { margin: 0; height: 4px; } +.tc-fd-item { grid-template-columns: 1rem minmax(0, 1fr) 3.5rem 3.5rem; } +.tc-fd-item > .tc-bar { margin: 0; height: 0.25rem; } .tc-fd-item > b { text-align: right; } .tc-fd-big .tc-spacer + .tc-btn { align-self: center; } /* Code lines: one block per line, the number drawn in a fixed gutter, so highlighted spans inside a line stay inline. */ -.tc-fprev > span { display: block; position: relative; padding-left: 44px; } -.tc-fprev > span::before { position: absolute; left: 0; width: 34px; } -.tc-ed > span { display: block; position: relative; padding-left: 62px; } -.tc-ed > span::before { position: absolute; left: 0; width: 48px; } +.tc-fprev > span { display: block; position: relative; padding-left: 2.75rem; } +.tc-fprev > span::before { position: absolute; left: 0; width: 2.125rem; } +.tc-ed > span { display: block; position: relative; padding-left: 3.875rem; } +.tc-ed > span::before { position: absolute; left: 0; width: 3rem; } .tc-opts--scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); } -.tc-sug-foot > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } -.tc-keys-grid--2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 12px; padding: 18px; } -.tc-keys-grid--2 > span:nth-child(4n+2) { padding-right: 12px; border-right: 1px solid var(--hairline); } +.tc-sug-foot > span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } +.tc-keys-grid--2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.75rem; padding: 1.125rem; } +.tc-keys-grid--2 > span:nth-child(4n+2) { padding-right: 0.75rem; border-right: 1px solid var(--hairline); } /* Phone: search row, full sheet */ @@ -2627,7 +2637,7 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe .tc-layer--center > .tc-fdlg { animation: tc-pop var(--dur-base) ease-out; max-height: min(860px, calc(100dvh - 48px)); } .tc-layer--sheet > .tc-sheet--editor { width: min(760px, calc(100vw - 16px)); } /* The context menu opens at the pointer; Kit.menu positions it. */ -.tc-layer--menu > .tc-menu.tc-ctx { width: 260px; } +.tc-layer--menu > .tc-menu.tc-ctx { width: 16.25rem; } /* ------------------------------------------------- below 1024px ---- */ /* Kit.isPhone() is true below 1024px: the shell shows its phone bar, and @@ -2639,10 +2649,10 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe #page-files { padding-top: 0; } .tc-layer--center > .tc-fdlg { width: 100%; max-width: none; max-height: 88%; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border-bottom: 0; animation: tc-rise-sheet 300ms cubic-bezier(0.32, 0.72, 0, 1); } - .tc-layer--center > .tc-fdlg::before { content: ""; display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--border-strong); } - .tc-layer--center > .tc-fdlg.tc-fdlg--full { position: absolute; left: 0; right: 0; bottom: 0; top: 44px; max-height: none; } + .tc-layer--center > .tc-fdlg::before { content: ""; display: block; flex: none; width: 2.25rem; height: 0.25rem; margin: 0.5rem auto 0; border-radius: 2px; background: var(--border-strong); } + .tc-layer--center > .tc-fdlg.tc-fdlg--full { position: absolute; left: 0; right: 0; bottom: 0; top: 2.75rem; max-height: none; } .tc-fdlg-foot { flex-direction: column-reverse; align-items: stretch; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } - .tc-fdlg-foot .tc-btn { width: 100%; min-height: 44px; } + .tc-fdlg-foot .tc-btn { width: 100%; min-height: var(--touch); } .tc-fdlg-foot .tc-spacer, .tc-fdlg-foot .tc-hint { display: none; } .tc-fx { grid-template-columns: minmax(0, 1fr); } .tc-fx > .tc-fd { display: none; } @@ -2652,262 +2662,269 @@ button.tc-dv-hunk { width: 100%; border-left: 0; border-right: 0; cursor: pointe /* Below 640px the page renders its phone markup: gate it with matchMedia('(max-width: 639.98px)'), as client/skill-update.js does. */ @media (max-width: 639.98px) { - .tc-fp-head { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 0; flex: none; } - .tc-segfull { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; gap: 3px; border-radius: 10px; background: var(--surface-sunken); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } - .tc-segfull button { height: 32px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } + .tc-fp-head { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 1rem 0; flex: none; } + .tc-segfull { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.1875rem; gap: 0.1875rem; border-radius: 0.625rem; background: var(--surface-sunken); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } + .tc-segfull button { height: 2rem; border: 0; border-radius: 0.5rem; background: none; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; } .tc-segfull button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); } - [data-theme="dark"] .tc-segfull button[aria-pressed="true"] { background: oklch(1 0 0 / 0.08); box-shadow: none; } - .tc-segfull button small { font-size: 12px; color: var(--fg-muted); font-weight: 400; } - .tc-sheet--bottom .tc-pbody { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } - .tc-pfoot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 28px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } - .tc-pfoot .tc-btn { height: 44px; font-size: 16px; } - .tc-pfoot .tc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } - .tc-psum { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; } - .tc-psum .tc-fsum-lead strong { font-size: 20px; } - .tc-fab { position: absolute; right: 16px; bottom: 30px; z-index: 6; height: 48px; padding: 0 18px 0 14px; border-radius: 24px; font-size: 16px; box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent); } - .tc-fab .tc-icon { width: 20px; height: 20px; } - .tc-psearch { display: flex; gap: 8px; } + [data-theme="dark"] .tc-segfull button[aria-pressed="true"] { background: color-mix(in srgb, var(--border-strong) 72%, transparent); box-shadow: none; } + .tc-segfull button small { font-size: 0.75rem; color: var(--fg-muted); font-weight: 400; } + .tc-sheet--bottom .tc-pbody { padding: 0.375rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.875rem; overflow: hidden; } + .tc-pfoot { flex: none; display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem 1rem 1.75rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 2.5%, transparent); } + .tc-pfoot .tc-btn { height: var(--touch); font-size: 1rem; } + .tc-pfoot .tc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } + .tc-psum { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem; } + .tc-psum .tc-fsum-lead strong { font-size: 1.25rem; } + .tc-fab { position: absolute; right: 1rem; bottom: 1.875rem; z-index: 6; height: 3rem; padding: 0 1.125rem 0 0.875rem; border-radius: 1.5rem; font-size: 1rem; box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent); } + .tc-fab .tc-icon { width: 1.25rem; height: 1.25rem; } + .tc-psearch { display: flex; gap: 0.5rem; } .tc-psearch .tc-sk-search { flex: 1; min-width: 0; } - .tc-psearch .tc-sk-search > .tc-input { height: 40px; font-size: 16px; border-radius: 10px; } - .tc-psearch .tc-btn--icon { width: 40px; height: 40px; border-radius: 10px; flex: none; } + .tc-psearch .tc-sk-search > .tc-input { height: 2.5rem; font-size: 1rem; border-radius: 0.625rem; } + .tc-psearch .tc-btn--icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex: none; } .tc-plist .tc-prow-file > .tc-ftile, .tc-prow-file > .tc-fl-icon { color: var(--fg-muted); } - .tc-prow-file > div > small .tc-icon { width: 13px; height: 13px; flex: none; } + .tc-prow-file > div > small .tc-icon { width: 0.8125rem; height: 0.8125rem; flex: none; } .tc-prow-file > div > small .w { color: var(--warn-text); } - .tc-prow-file > div > small code { font-size: 12.5px; } - .tc-sheet--bottom .tc-pbody:last-child { padding-bottom: 30px; } + .tc-prow-file > div > small code { font-size: 0.78125rem; } + .tc-sheet--bottom .tc-pbody:last-child { padding-bottom: 1.875rem; } .tc-risk .tc-btn { align-self: center; } #page-files { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } .tc-fab { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); } - .tc-pfoot .tc-btn, .tc-fdlg-foot .tc-btn { height: 44px; font-size: 16px; } + .tc-pfoot .tc-btn, .tc-fdlg-foot .tc-btn { height: var(--touch); font-size: 1rem; } } /* Files' runtime ownership, missing-data states and responsive adaptations. */ #files-browser { min-width: 0; } -#files-browser > .tc-tabs { margin-top: 16px; } -#files-browser .tc-fl--projects[data-no-threads] { --fl-cols: 32px minmax(0, 1fr) 168px 84px 32px; } -#files-browser .tc-fl-head .tc-sort { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; } -#files-browser .tc-sort .tc-icon { width: 12px; height: 12px; } +#files-browser > .tc-tabs { margin-top: 1rem; } +#files-browser .tc-fl--projects[data-no-threads] { --fl-cols: 2rem minmax(0, 1fr) 10.5rem 5.25rem 2rem; } +#files-browser .tc-fl-head .tc-sort { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.5rem; margin-left: -0.375rem; padding: 0 0.375rem; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; } +#files-browser .tc-sort .tc-icon { width: 0.75rem; height: 0.75rem; } #files-browser .tc-fl-head [aria-sort]:not([aria-sort="none"]) { color: var(--fg); } #files-browser .tc-fl-row:focus-visible, #files-browser .tc-prow-file:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } #files-browser .tc-fl-row:focus-within .tc-checkbox, #files-browser .tc-fl-row:focus-within .tc-fmenu { opacity: 1; } -.tc-files-skeleton { display: inline-block; width: 100%; min-width: 24px; height: 6px; max-width: 100%; border-radius: 3px; background: color-mix(in srgb, var(--fg) 9%, transparent); animation: tc-files-pulse 1.8s ease-in-out infinite; } -.tc-comp.tc-files-skeleton { height: 10px; } -.tc-fsize > b .tc-files-skeleton { width: 42px; vertical-align: middle; } +.tc-files-skeleton { display: inline-block; width: 100%; min-width: 1.5rem; height: 0.375rem; max-width: 100%; border-radius: 0.1875rem; background: color-mix(in srgb, var(--fg) 9%, transparent); animation: tc-files-pulse 1.8s ease-in-out infinite; } +.tc-comp.tc-files-skeleton { height: 0.625rem; } +.tc-fsize > b .tc-files-skeleton { width: 2.625rem; vertical-align: middle; } @keyframes tc-files-pulse { 50% { opacity: .4; } } @media (prefers-reduced-motion: reduce) { .tc-files-skeleton { animation: none; } } -.tc-files-state { display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 48px 24px; text-align: center; } -.tc-files-state > .tc-icon { width: 30px; height: 30px; color: var(--fg-subtle); margin-bottom: 4px; } -.tc-files-state h2 { margin: 0; font-size: 16px; font-weight: 600; } -.tc-files-state p { margin: 0; max-width: 380px; color: var(--fg-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } -.tc-files-state .tc-btn { margin-top: 6px; } -.tc-files-detail-empty, .tc-files-preview-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 160px; padding: 24px; color: var(--fg-muted); text-align: center; font-size: 13px; } -.tc-files-detail-empty > .tc-icon { width: 26px; height: 26px; color: var(--fg-subtle); } +.tc-files-state { display: flex; align-items: center; flex-direction: column; gap: 0.625rem; padding: 3rem 1.5rem; text-align: center; } +.tc-files-state > .tc-icon { width: 1.875rem; height: 1.875rem; color: var(--fg-subtle); margin-bottom: 0.25rem; } +.tc-files-state h2 { margin: 0; font-size: 1rem; font-weight: 600; } +.tc-files-state p { margin: 0; max-width: 23.75rem; color: var(--fg-muted); font-size: 0.8125rem; line-height: 1.6; overflow-wrap: anywhere; } +.tc-files-state .tc-btn { margin-top: 0.375rem; } +.tc-files-detail-empty, .tc-files-preview-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 10rem; padding: 1.5rem; color: var(--fg-muted); text-align: center; font-size: 0.8125rem; } +.tc-files-detail-empty > .tc-icon { width: 1.625rem; height: 1.625rem; color: var(--fg-subtle); } .tc-files-path-wrap { white-space: normal; overflow-wrap: anywhere; } -.tc-files-image { display: grid; place-items: center; min-height: 180px; max-height: 360px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface) 0 50%) 0 / 16px 16px; overflow: hidden; } -.tc-files-image img { max-height: 320px; max-width: 100%; object-fit: contain; } -.tc-files-pdf { width: 100%; height: 360px; border: 1px solid var(--border); border-radius: var(--radius-lg); } -.tc-files-preview-fallback { font-size: 13px; color: var(--fg-muted); line-height: 1.6; } -.tc-files-secret, .tc-files-secret > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); } +.tc-files-image { display: grid; place-items: center; min-height: 11.25rem; max-height: 22.5rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface) 0 50%) 0 / 16px 16px; overflow: hidden; } +.tc-files-image img { max-height: 20rem; max-width: 100%; object-fit: contain; } +.tc-files-pdf { width: 100%; height: 22.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); } +.tc-files-preview-fallback { font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.6; } +.tc-files-secret, .tc-files-secret > span { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--fg-muted); } .tc-files-secret { justify-content: space-between; } -.tc-files-secret .tc-icon { width: 14px; height: 14px; } -.tc-files-more, .tc-files-search-status, .tc-files-tree-status { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; font-size: 12px; color: var(--fg-muted); flex-wrap: wrap; } -.tc-files-search-status { justify-content: flex-start; padding: 0 4px; } -.tc-files-notice { margin: 0; padding: 12px 16px; font-size: 12px; color: var(--fg-muted); line-height: 1.6; } +.tc-files-secret .tc-icon { width: 0.875rem; height: 0.875rem; } +.tc-files-more, .tc-files-search-status, .tc-files-tree-status { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--fg-muted); flex-wrap: wrap; } +.tc-files-search-status { justify-content: flex-start; padding: 0 0.25rem; } +.tc-files-notice { margin: 0; padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--fg-muted); line-height: 1.6; } .tc-files-tree-more > span:first-child { min-width: 0; } -.tc-files-goto { width: 600px; } -.tc-files-goto .tc-fdlg-body { display: flex; flex-direction: column; gap: 10px; } +.tc-files-goto { width: 37.5rem; } +.tc-files-goto .tc-fdlg-body { display: flex; flex-direction: column; gap: 0.625rem; } .tc-files-goto #files-suggestions { display: flex; flex-direction: column; gap: 2px; } -.tc-files-suggestion { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--fg); min-height: 36px; padding: 6px 8px; border-radius: var(--radius-md); text-align: left; cursor: pointer; } +.tc-files-suggestion { display: flex; align-items: center; gap: 0.625rem; border: 0; background: none; color: var(--fg); min-height: 2.25rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-md); text-align: left; cursor: pointer; } .tc-files-suggestion:hover, .tc-files-suggestion[aria-selected="true"] { background: var(--hover); } -.tc-files-suggestion > .tc-icon { width: 16px; height: 16px; flex: none; color: var(--fg-muted); } -.tc-files-suggestion code { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } -.tc-files-suggestion > span:last-child { margin-left: auto; color: var(--fg-muted); font-size: 12px; white-space: nowrap; } -.tc-files-recent-label { font-size: 12px; font-weight: 500; color: var(--fg-muted); padding: 4px 8px; } +.tc-files-suggestion > .tc-icon { width: 1rem; height: 1rem; flex: none; color: var(--fg-muted); } +.tc-files-suggestion code { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; } +.tc-files-suggestion > span:last-child { margin-left: auto; color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; } +.tc-files-recent-label { font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); padding: 0.25rem 0.5rem; } .tc-files-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: auto; scrollbar-width: none; } -.tc-files-crumbs > .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); flex: none; } +.tc-files-crumbs > .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); flex: none; } .tc-files-crumbs > button { flex: none; } .tc-files-crumbs > button:last-child { overflow: hidden; text-overflow: ellipsis; } -.tc-files-phone-body { padding: 0 16px; } -.tc-files-phone-selection { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); display: flex; flex-direction: column; gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface-raised); box-shadow: var(--shadow-popup); font-size: 14px; } -.tc-files-phone-selection-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } -.tc-files-phone-selection-head strong { font-size: 12px; font-weight: 500; } -#files-browser .tc-files-phone-selection-head .tc-btn { min-height: 44px; } -.tc-files-phone-actions.tc-pselbar { grid-template-columns: repeat(auto-fit,minmax(60px,1fr)); padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } -#files-browser .tc-files-phone-actions > .tc-btn { width: 100%; min-width: 0; height: 52px; padding: 0 4px; box-shadow: none; } +.tc-files-phone-body { padding: 0 1rem; } +.tc-files-phone-selection { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); display: flex; flex-direction: column; gap: 0.25rem; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface-raised); box-shadow: var(--shadow-popup); font-size: 0.875rem; } +.tc-files-phone-selection-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--touch); } +.tc-files-phone-selection-head strong { font-size: 0.75rem; font-weight: 500; } +#files-browser .tc-files-phone-selection-head .tc-btn { min-height: var(--touch); } +.tc-files-phone-actions.tc-pselbar { grid-template-columns: repeat(auto-fit,minmax(3.75rem,1fr)); padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } +#files-browser .tc-files-phone-actions > .tc-btn { width: 100%; min-width: 0; height: 3.25rem; padding: 0 0.25rem; box-shadow: none; } #files-browser .tc-files-phone-actions > .tc-btn .tc-icon { flex: none; } #files-browser .tc-files-phone-actions > .tc-btn:disabled { color: var(--fg-muted); } @media (max-width:639.98px) { body[data-console-route="files"]:has(.tc-files-phone-selection) .tc-toaster { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } } .tc-files-detail-sheet { max-height: 90dvh; overflow-y: auto; } -.tc-files-detail-sheet .tc-fd-head { padding-top: 24px; } -@media (min-width: 640px) and (max-width: 1023.98px) { #files-browser .tc-fsearch { flex-basis: 180px; } #files-browser .tc-fl--projects { --fl-cols: 32px minmax(0, 1fr) 150px 80px 72px 32px; } } +.tc-files-detail-sheet .tc-fd-head { padding-top: 1.5rem; } +@media (min-width: 640px) and (max-width: 1023.98px) { #files-browser .tc-fsearch { flex-basis: 11.25rem; } #files-browser .tc-fl--projects { --fl-cols: 2rem minmax(0, 1fr) 9.375rem 5rem 4.5rem 2rem; } } @media (max-width: 639.98px) { #files-browser .tc-psearch .tc-fsearch { flex: 1; min-width: 0; } - #files-browser .tc-psearch .tc-fsearch > .tc-input { height: 40px; font-size: 16px; } + #files-browser .tc-psearch .tc-fsearch > .tc-input { height: 2.5rem; font-size: 1rem; } #files-browser .tc-fsearch .tc-kbd { display: none; } - #files-browser .tc-fsum-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } + #files-browser .tc-fsum-keys { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-size: 0.75rem; } #files-browser .tc-fsum-legend .tc-key { white-space: normal; } - #files-browser .tc-fl-foot { flex-wrap: wrap; padding: 10px 12px; gap: 6px; } + #files-browser .tc-fl-foot { flex-wrap: wrap; padding: 0.625rem 0.75rem; gap: 0.375rem; } #files-browser .tc-fl-foot .tc-spacer { display: none; } - #files-browser .tc-prow-file { min-height: 72px; } - #files-browser .tc-prow-file .tc-mono-name { font-family: var(--font-mono); font-size: 13px; } - #files-browser .tc-prow-file > div > span { flex-wrap: wrap; gap: 4px 8px; } - #files-browser .tc-prow-file .tc-ftag { font-size: 10px; } - .tc-files-suggestion { min-height: 44px; } - .tc-files-detail-sheet .tc-fd-foot .tc-btn { min-height: 44px; } - #files-browser .tc-tree { --tree-cols: minmax(0, 1fr) 64px 52px; } + #files-browser .tc-prow-file { min-height: 4.5rem; } + #files-browser .tc-prow-file .tc-mono-name { font-family: var(--font-mono); font-size: 0.8125rem; } + #files-browser .tc-prow-file > div > span { flex-wrap: wrap; gap: 0.25rem 0.5rem; } + #files-browser .tc-prow-file .tc-ftag { font-size: 0.625rem; } + .tc-files-suggestion { min-height: var(--touch); } + .tc-files-detail-sheet .tc-fd-foot .tc-btn { min-height: var(--touch); } + #files-browser .tc-tree { --tree-cols: minmax(0, 1fr) 4rem 3.25rem; } #files-browser .tc-tree .tc-fl-head > :nth-child(2), #files-browser .tc-tree .tc-fl-row > :nth-child(2), #files-browser .tc-tree .tc-fl-head > :nth-child(5), #files-browser .tc-tree .tc-fl-row > :nth-child(5) { display: none; } #files-browser .tc-tree .tc-tnode .tc-ftag { display: none; } - #files-browser .tc-tree .tc-fl-row { min-height: 44px; } + #files-browser .tc-tree .tc-fl-row { min-height: var(--touch); } } /* Data keys in Files are a legend, independent of MCP's credential chips. */ :is(#files-browser, .tc-files-detail-sheet, .tc-fdlg) .tc-key { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--font-sans); font-size: inherit; color: var(--fg-muted); } .tc-fsum-keys strong { color: var(--fg); font-weight: 500; } -#files-browser .tc-tab-count { margin-left: 4px; } +#files-browser .tc-tab-count { margin-left: 0.25rem; } button.tc-fd-item { border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; width: 100%; } button.tc-fd-item:hover { background: var(--hover); } #files-browser .tc-fsum-legend { grid-column: 1 / -1; } #files-browser .tc-prow-file > div > .tc-bar { flex-wrap: nowrap; gap: 0; } #files-browser .tc-prow-file > div > .tc-bar > span { flex-shrink: 0; } @media (max-width: 639.98px) { - #files-browser .tc-segfull button { height: 44px; } - #files-browser .tc-psearch .tc-fsearch > .tc-input { height: 44px; } - #files-browser .tc-psearch .tc-btn--icon { width: 44px; height: 44px; } - #files-browser .tc-fl-foot .tc-btn { min-height: 44px; } - #files-browser .tc-pcrumbs .tc-crumb { min-height: 44px; } - #files-browser .tc-fsum-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } - #files-browser .tc-tree .tc-tnode > button { width: 44px; height: 44px; } -} -.tc-files-largest { grid-template-columns: 16px minmax(0, 1fr) auto; min-height: 44px; } -.tc-files-largest .tc-mono-name { font: 12px var(--font-mono); } -.tc-files-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } -.tc-files-filter-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); cursor: pointer; min-height: 32px; } -@media (max-width: 639.98px) { .tc-files-filters > button, .tc-files-filter-check { min-height: 44px; } } + #files-browser .tc-segfull button { height: var(--touch); } + #files-browser .tc-psearch .tc-fsearch > .tc-input { height: var(--touch); } + #files-browser .tc-psearch .tc-btn--icon { width: var(--touch); height: var(--touch); } + #files-browser .tc-fl-foot .tc-btn { min-height: var(--touch); } + #files-browser .tc-pcrumbs .tc-crumb { min-height: var(--touch); } + #files-browser .tc-fsum-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-size: 0.75rem; } + #files-browser .tc-tree .tc-tnode > button { width: var(--touch); height: var(--touch); } +} +.tc-files-largest { grid-template-columns: 1rem minmax(0, 1fr) auto; min-height: var(--touch); } +.tc-files-largest .tc-mono-name { font: 0.75rem var(--font-mono); } +.tc-files-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } +.tc-files-filter-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--fg-muted); cursor: pointer; min-height: 2rem; } +@media (max-width: 639.98px) { .tc-files-filters > button, .tc-files-filter-check { min-height: var(--touch); } } @media (min-width: 640px) and (max-width: 1023.98px) { #files-browser .tc-fl-row .tc-checkbox { opacity: 1; } - #files-browser .tc-fl-row { min-height: 48px; } + #files-browser .tc-fl-row { min-height: 3rem; } } #files-browser .tc-tnode { padding-left: min(calc(var(--depth, 0) * 20px), 40%); } @media (max-width: 639.98px) { - .tc-files-detail-sheet button.tc-btn { min-width: 44px; min-height: 44px; } + .tc-files-detail-sheet button.tc-btn { min-width: var(--touch); min-height: var(--touch); } .tc-files-detail-sheet .tc-key { white-space: normal; } } -.tc-files-preview-fallback { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; } +.tc-files-preview-fallback { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; margin: 0; } @media (max-width: 639.98px) { #files-browser .tc-fp-head, #files-browser .tc-files-phone-body { padding-left: 0; padding-right: 0; } } .tc-fbanner[data-tone="info"] { border-color: color-mix(in srgb, var(--info) 28%, transparent); background: var(--info-soft); } .tc-fbanner[data-tone="info"] > .tc-icon { color: var(--info-text); } -@media (max-width: 639.98px) { #files-browser .tc-psum .tc-btn { min-height: 44px; } } +@media (max-width: 639.98px) { #files-browser .tc-psum .tc-btn { min-height: var(--touch); } } .tc-fd-facts dd, .tc-fd-facts code { overflow-wrap: anywhere; max-width: 100%; } -.tc-files-size-unknown { width: 96px; height: 20px; vertical-align: middle; } +.tc-files-size-unknown { width: 6rem; height: 1.25rem; vertical-align: middle; } /* The outer Files card owns the border; its phone grid has rows only. */ #files-browser .tc-fcard > .tc-plist { border: 0; border-radius: 0; box-shadow: none; background: none; } .tc-files-goto--anchored { position: fixed; margin: 0; overflow-y: auto; box-shadow: var(--shadow-popup); } -.tc-files-goto--anchored .tc-fdlg-body { padding: 6px; gap: 6px; } -.tc-files-goto--anchored #files-goto-input { margin-bottom: 4px; } -.tc-files-goto--anchored .tc-fdlg-foot { padding: 8px 12px; font-size: 11px; } -.tc-files-goto--anchored .tc-fdlg-foot .tc-hint { max-width: 180px; } +.tc-files-goto--anchored .tc-fdlg-body { padding: 0.375rem; gap: 0.375rem; } +.tc-files-goto--anchored #files-goto-input { margin-bottom: 0.25rem; } +.tc-files-goto--anchored .tc-fdlg-foot { padding: 0.5rem 0.75rem; font-size: 0.6875rem; } +.tc-files-goto--anchored .tc-fdlg-foot .tc-hint { max-width: 11.25rem; } .tc-layer--menu > .tc-files-goto--anchored { pointer-events: auto; } /* Files editor: the native textarea owns input; the mirror paints only the visible lines, keeping 5 MiB documents out of the DOM's patch work. */ .tc-files-editor { overflow: hidden; } -.tc-files-editor-workspace { position: relative; flex: 1; min-height: 180px; overflow: hidden; background: var(--surface-sunken); } -.tc-files-editor-mirror, .tc-files-editor-input { position: absolute; inset: 0; margin: 0; padding: 12px 16px 12px 0; font: 400 13px/22px var(--font-mono); tab-size: 2; letter-spacing: 0; border: 0; border-radius: 0; } +.tc-files-editor-workspace { position: relative; flex: 1; min-height: 11.25rem; overflow: hidden; background: var(--surface-sunken); } +.tc-files-editor-mirror, .tc-files-editor-input { position: absolute; inset: 0; margin: 0; padding: 0.75rem 1rem 0.75rem 0; font: 400 0.8125rem/1.375rem var(--font-mono); tab-size: 2; letter-spacing: 0; border: 0; border-radius: 0; } .tc-files-editor-mirror { overflow: hidden; pointer-events: none; white-space: pre; color: var(--fg); } -.tc-files-editor-line { display: block; position: relative; min-width: 100%; width: max-content; height: 22px; padding-left: 48px; } -.tc-files-editor-line > i { position: sticky; left: 0; display: inline-block; width: 42px; margin-left: -48px; padding-right: 12px; font-style: normal; text-align: right; color: var(--fg-subtle); user-select: none; background: var(--surface-sunken); } +.tc-files-editor-line { display: block; position: relative; min-width: 100%; width: max-content; height: 1.375rem; padding-left: 3rem; } +.tc-files-editor-line > i { position: sticky; left: 0; display: inline-block; width: 2.625rem; margin-left: -3rem; padding-right: 0.75rem; font-style: normal; text-align: right; color: var(--fg-subtle); user-select: none; background: var(--surface-sunken); } .tc-files-editor-line[data-cur] { background: color-mix(in srgb, var(--accent) 6%, transparent); } .tc-files-editor-line[data-cur] > i { color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, var(--surface-sunken)); } -.tc-files-editor-line code { font: inherit; padding-left: 6px; } +.tc-files-editor-line code { font: inherit; padding-left: 0.375rem; } .tc-files-editor-line .c { color: var(--fg-muted); } .tc-files-editor-line .s { color: var(--ok-text); } .tc-files-editor-line .k { color: var(--accent-text); } -.tc-files-editor-input { padding-left: 48px; width: 100%; height: 100%; resize: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--accent); background: transparent; overflow: auto; outline: none; white-space: pre; } +.tc-files-editor-input { padding-left: 3rem; width: 100%; height: 100%; resize: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--accent); background: transparent; overflow: auto; outline: none; white-space: pre; } .tc-files-editor-input::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); } .tc-files-editor-input:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } .tc-files-editor-status { flex: none; border-top: 1px solid var(--hairline); border-bottom: 0; } -.tc-files-editor-status > .tc-icon { flex: none; width: 14px; height: 14px; } +.tc-files-editor-status > .tc-icon { flex: none; width: 0.875rem; height: 0.875rem; } .tc-files-editor .tc-ed-foot { flex: none; } .tc-files-editor .tc-ed-head code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-files-editor .tc-ed-head small { min-width: 0; } -.tc-files-editor-find { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); } +.tc-files-editor-find { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .tc-files-editor-find .tc-input { flex: 1; min-width: 0; } -.tc-files-editor-find > span { white-space: nowrap; font-size: 12px; color: var(--fg-muted); } -.tc-files-editor-message { margin: 0; padding: 10px 18px; font-size: 13px; color: var(--danger-text); border-bottom: 1px solid var(--hairline); } -.tc-files-editor-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; } +.tc-files-editor-find > span { white-space: nowrap; font-size: 0.75rem; color: var(--fg-muted); } +.tc-files-editor-message { margin: 0; padding: 0.625rem 1.125rem; font-size: 0.8125rem; color: var(--danger-text); border-bottom: 1px solid var(--hairline); } +.tc-files-editor-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; padding: 2rem; text-align: center; } .tc-files-editor-state p { max-width: 40ch; color: var(--fg-muted); } -.tc-files-editor .tc-fbanner { flex: none; margin: 12px 12px 0; } +.tc-files-editor .tc-fbanner { flex: none; margin: 0.75rem 0.75rem 0; } .tc-files-compare { display: flex; flex: 1; min-height: 0; flex-direction: column; } .tc-files-compare .tc-dv-pane { flex: 1; overflow: auto; } -.tc-files-compare-limit { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 12px; padding: 16px; } -.tc-files-compare-limit textarea { flex: 1; min-height: 180px; resize: none; } -.tc-files-compare-limit p { margin: 0; font-size: 13px; color: var(--fg-muted); } +.tc-files-compare-limit { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 0.75rem; padding: 1rem; } +.tc-files-compare-limit textarea { flex: 1; min-height: 11.25rem; resize: none; } +.tc-files-compare-limit p { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); } @media (max-width: 639.98px) { .tc-layer--sheet > .tc-sheet--editor { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } - .tc-files-editor .tc-ed-head { padding-top: max(14px, env(safe-area-inset-top)); } - .tc-files-editor .tc-ed-bar { flex-wrap: wrap; gap: 4px 8px; } + .tc-files-editor .tc-ed-head { padding-top: max(0.875rem, env(safe-area-inset-top)); } + .tc-files-editor .tc-ed-bar { flex-wrap: wrap; gap: 0.25rem 0.5rem; } .tc-files-editor .tc-ed-bar > .tc-spacer { display: none; } - .tc-files-editor .tc-btn { min-height: 44px; } - .tc-files-editor .tc-btn--icon { min-width: 44px; } - .tc-files-editor-input, .tc-files-editor-mirror { font-size: 16px; line-height: 24px; } - .tc-files-editor-line { height: 24px; } - .tc-files-editor .tc-ed-foot { flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; } + .tc-files-editor .tc-btn { min-height: var(--touch); } + .tc-files-editor .tc-btn--icon { min-width: var(--touch); } + .tc-files-editor-input, .tc-files-editor-mirror { font-size: 1rem; line-height: 1.5rem; } + .tc-files-editor-line { height: 1.5rem; } + .tc-files-editor .tc-ed-foot { flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 0.5rem; } .tc-files-editor .tc-ed-foot .tc-hint { flex-basis: 100%; } - .tc-files-editor-status { font-size: 11px; } + .tc-files-editor-status { font-size: 0.6875rem; } } /* Files changes use the same row and layer primitives at every breakpoint. */ #files-browser { position: relative; } #files-browser [data-files-row][aria-busy="true"] { opacity: .55; cursor: progress; pointer-events: none; } #files-browser [data-files-row][data-drop="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } -.tc-files-rename-row { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; align-items: start; padding: 10px 12px; background: color-mix(in srgb,var(--accent) 5%,transparent); border-top: 1px solid var(--hairline); } -.tc-files-rename-row > span { padding: 8px; color: var(--fg-muted); } -.tc-files-rename-controls { display: flex; align-items: center; gap: 6px; max-width: 440px; } +.tc-files-rename-row { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: 0.5rem; align-items: start; padding: 0.625rem 0.75rem; background: color-mix(in srgb,var(--accent) 5%,transparent); border-top: 1px solid var(--hairline); } +.tc-files-rename-row > span { padding: 0.5rem; color: var(--fg-muted); } +.tc-files-rename-controls { display: flex; align-items: center; gap: 0.375rem; max-width: 27.5rem; } .tc-files-rename-controls .tc-input { flex: 1; min-width: 0; } .tc-files-rename-controls .tc-input[aria-invalid="true"] { border-color: var(--danger); } -.tc-files-rename-row .tc-field-error { margin: 6px 0 0; font-size: 12px; } -.tc-files-upload-fab { position: fixed; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); border-radius: var(--radius-full); min-height: 48px; padding: 10px 18px; box-shadow: var(--shadow-popup); } -.tc-files-drop { position: fixed; inset: 230px 40px 90px 280px; z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 140px; padding: 24px; pointer-events: none; border: 2px dashed var(--accent); border-radius: var(--radius-xl); background: color-mix(in srgb,var(--surface-raised) 94%,var(--accent)); color: var(--fg); box-shadow: var(--shadow-popup); } -.tc-files-drop > .tc-icon { width: 40px; height: 40px; color: var(--accent); } -.tc-files-drop strong { font-size: 18px; font-weight: 600; } -.tc-files-drop > span { font-size: 13px; color: var(--fg-muted); } +.tc-files-rename-row .tc-field-error { margin: 0.375rem 0 0; font-size: 0.75rem; } +.tc-files-upload-fab { position: fixed; right: 1rem; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); border-radius: var(--radius-full); min-height: 3rem; padding: 0.625rem 1.125rem; box-shadow: var(--shadow-popup); } +.tc-files-drop { position: fixed; inset: 230px 40px 90px 280px; z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 8.75rem; padding: 1.5rem; pointer-events: none; border: 2px dashed var(--accent); border-radius: var(--radius-xl); background: color-mix(in srgb,var(--surface-raised) 94%,var(--accent)); color: var(--fg); box-shadow: var(--shadow-popup); } +.tc-files-drop > .tc-icon { width: 2.5rem; height: 2.5rem; color: var(--accent); } +.tc-files-drop strong { font-size: 1.125rem; font-weight: 600; } +.tc-files-drop > span { font-size: 0.8125rem; color: var(--fg-muted); } .tc-files-conflicts .tc-fdlg-body, .tc-files-move .tc-fdlg-body, .tc-files-in-use .tc-fdlg-body { overflow-y: auto; } -.tc-files-apply-all { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--fg-muted); } -.tc-files-conflicts .tc-conf { gap: 12px; } -.tc-files-conflicts .tc-conf strong { display: flex; align-items: center; gap: 8px; font-weight: 500; } -.tc-files-conflicts .tc-conf strong > .tc-icon { width: 16px; height: 16px; color: var(--fg-muted); } +.tc-files-apply-all { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--fg-muted); } +.tc-files-conflicts .tc-conf { gap: 0.75rem; } +.tc-files-conflicts .tc-conf strong { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; } +.tc-files-conflicts .tc-conf strong > .tc-icon { width: 1rem; height: 1rem; color: var(--fg-muted); } .tc-files-conflicts .tc-conf > div { min-width: 0; } .tc-files-conflicts .tc-conf small { display: block; overflow-wrap: anywhere; } .tc-files-conflicts .tc-conf code { overflow-wrap: anywhere; } -.tc-files-conflicts .tc-hint { display: flex; align-items: center; gap: 8px; margin: 0; } -.tc-files-conflicts .tc-hint > .tc-icon { width: 16px; height: 16px; flex: none; } +.tc-files-conflicts .tc-hint { display: flex; align-items: center; gap: 0.5rem; margin: 0; } +.tc-files-conflicts .tc-hint > .tc-icon { width: 1rem; height: 1rem; flex: none; } .tc-files-stop-option { border: 1px solid var(--border); border-radius: var(--radius-xl); } .tc-files-stop-option .tc-checkbox { margin-top: 2px; } -.tc-files-name-dialog .tc-fdlg-body { gap: 8px; } -.tc-files-name-dialog .tc-fdlg-head { padding-bottom: 6px; } +.tc-files-name-dialog .tc-fdlg-body { gap: 0.5rem; } +.tc-files-name-dialog .tc-fdlg-head { padding-bottom: 0.375rem; } .tc-files-name-dialog .tc-field-error:empty { display: none; } -.tc-files-move { width: 560px; } -.tc-files-picker-tree { min-height: 140px; max-height: 340px; overflow: auto; padding: 6px 0; } +.tc-files-move { width: 35rem; } +.tc-files-picker-tree { min-height: 8.75rem; max-height: 21.25rem; overflow: auto; padding: 0.375rem 0; } .tc-files-picker-tree .tc-pick-row { cursor: pointer; } .tc-files-picker-tree .tc-pick-row[aria-disabled="true"] { opacity: .5; cursor: default; } .tc-files-picker-tree .tc-pick-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } .tc-files-picker-tree .tc-pick-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-files-picker-status { margin: 0; padding: 8px 14px; font-size: 12px; color: var(--fg-muted); } -.tc-files-picker-more { margin-left: 20px; } -.tc-files-picker-path { display: flex; align-items: center; gap: 8px; } -.tc-files-picker-path > input { flex: 1; min-width: 0; font-size: 12px; } -.tc-files-move-dest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; color: var(--fg-muted); } -.tc-files-move-dest > .tc-icon { width: 14px; height: 14px; flex: none; } +.tc-files-picker-status { margin: 0; padding: 0.5rem 0.875rem; font-size: 0.75rem; color: var(--fg-muted); } +.tc-files-picker-more { margin-left: 1.25rem; } +.tc-files-picker-path { display: flex; align-items: center; gap: 0.5rem; } +.tc-files-picker-path > input { flex: 1; min-width: 0; font-size: 0.75rem; } +.tc-files-move-dest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--fg-muted); } +.tc-files-move-dest > .tc-icon { width: 0.875rem; height: 0.875rem; flex: none; } .tc-files-move-dest code { color: var(--fg); overflow-wrap: anywhere; } -.tc-files-move-dest small { margin-left: auto; font-size: 11px; } -.tc-fl--trash { --fl-cols: 32px minmax(130px,1.3fr) minmax(90px,1fr) 80px 72px 80px 86px; } -.tc-files-trash-name { display: flex; align-items: center; gap: 10px; min-width: 0; } +.tc-files-move-dest small { margin-left: auto; font-size: 0.6875rem; } +.tc-fl--trash { --fl-cols: 2rem minmax(8.125rem,1.3fr) minmax(5.625rem,1fr) 5rem 4.5rem 5rem 5.375rem; } +.tc-files-trash-name { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .tc-files-trash-name > span { display: flex; flex-direction: column; min-width: 0; } .tc-files-trash-name strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-files-trash-name small { font-size: 11px; color: var(--fg-muted); } -#files-transfers .tc-tray { position: fixed; right: 24px; bottom: 20px; z-index: var(--z-sticky); max-width: calc(100vw - 32px); } -.tc-files-transfer-list { max-height: min(520px,65dvh); overflow-y: auto; } +.tc-files-trash-name small { font-size: 0.6875rem; color: var(--fg-muted); } +#files-transfers .tc-tray { --_tray-top: var(--topbar); --_tray-bottom: 1.25rem; + position: fixed; right: 1.5rem; bottom: var(--_tray-bottom); z-index: var(--z-sticky); max-width: calc(100vw - 32px); + max-height: calc(100dvh - var(--_tray-top) - var(--_tray-bottom) - 1.25rem); } +/* Keep the summary, collapse control and footer reachable while history scrolls. */ +:is(#files-transfers .tc-tray,.tc-files-transfer-sheet) > :is(.tc-tray-head,.tc-tray-foot) { flex: none; } +.tc-files-transfer-list { min-height: 0; max-height: min(32.5rem,65dvh); overflow-y: auto; } +@media (min-width: 640px) and (max-width: 1023.98px) { + #files-transfers .tc-tray { --_tray-top: var(--phonebar-h); --_tray-bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom,0px)); } +} .tc-files-transfer-list .tc-tray-item small { white-space: normal; overflow-wrap: anywhere; } .tc-files-transfer-list .tc-tray-item b { max-width: 100%; } .tc-files-transfer-list .tc-btn--link[data-transfer-action="show"] { align-self: flex-start; min-width: 0; max-width: 100%; } @@ -2916,42 +2933,42 @@ button.tc-fd-item:hover { background: var(--hover); } the whole window. Dates and thread counts remain available in Details. */ #files-browser .tc-fl--projects { container: files-projects / inline-size; } @container files-projects (max-width: 560px) { - #files-browser .tc-fl--projects :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: 24px minmax(0, 1fr) 112px 28px; } + #files-browser .tc-fl--projects :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: 1.5rem minmax(0, 1fr) 7rem 1.75rem; } #files-browser .tc-fl--projects :is(.tc-fl-head, .tc-fl-row) > :nth-child(4), #files-browser .tc-fl--projects:not([data-no-threads]) :is(.tc-fl-head, .tc-fl-row) > :nth-child(5) { display: none; } } -.tc-files-transfer-pill { position: fixed; left: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: var(--shadow-popup); color: var(--fg); font-size: 13px; } -.tc-files-transfer-pill > .tc-icon { width: 18px; height: 18px; } -.tc-files-transfer-sheet .tc-tray-head { padding-top: 18px; } +.tc-files-transfer-pill { position: fixed; left: 1rem; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: var(--shadow-popup); color: var(--fg); font-size: 0.8125rem; } +.tc-files-transfer-pill > .tc-icon { width: 1.125rem; height: 1.125rem; } +.tc-files-transfer-sheet .tc-tray-head { padding-top: 1.125rem; } .tc-files-transfer-sheet .tc-files-transfer-list { max-height: 70dvh; } .tc-files-transfer-sheet .tc-tray-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } @media (max-width: 639.98px) { - .tc-files-rename-row { grid-template-columns: 20px minmax(0,1fr); padding: 12px 8px; } - .tc-files-rename-controls .tc-input { font-size: 16px; min-height: 44px; } - .tc-files-rename-controls .tc-btn { min-height: 44px; min-width: 44px; } - .tc-files-rename-row > span { padding: 12px 0; } + .tc-files-rename-row { grid-template-columns: 1.25rem minmax(0,1fr); padding: 0.75rem 0.5rem; } + .tc-files-rename-controls .tc-input { font-size: 1rem; min-height: var(--touch); } + .tc-files-rename-controls .tc-btn { min-height: var(--touch); min-width: var(--touch); } + .tc-files-rename-row > span { padding: 0.75rem 0; } .tc-files-conflicts .tc-conf { grid-template-columns: minmax(0,1fr); } .tc-files-conflicts .tc-conf > .tc-seg { justify-self: start; } - .tc-files-conflicts .tc-btn, .tc-files-conflicts .tc-seg > button, .tc-files-in-use .tc-btn, .tc-files-move .tc-btn { min-height: 44px; } - .tc-files-conflicts .tc-seg > button { min-width: 56px; } - .tc-files-move .tc-pick-row { min-height: 44px; gap: 4px; padding-left: calc(6px + min(var(--depth,0),5) * 12px); } - .tc-files-move .tc-pick-row > button { width: 44px; height: 44px; } - .tc-files-move .tc-pick-row > small { max-width: 60px; font-size: 10px; white-space: normal; } - .tc-files-move .tc-picker-places .tc-btn { padding-inline: 6px; } - .tc-files-move .tc-input, .tc-files-name-dialog .tc-input { font-size: 16px; min-height: 44px; } - .tc-files-move .tc-fdlg-body { padding: 12px 16px; gap: 10px; } - .tc-files-transfer-sheet .tc-btn { min-height: 44px; } - .tc-files-transfer-sheet .tc-btn--icon { min-width: 44px; } - .tc-files-transfer-list .tc-tray-item { grid-template-columns: 18px minmax(0,1fr) auto; padding-inline: 12px; } + .tc-files-conflicts .tc-btn, .tc-files-conflicts .tc-seg > button, .tc-files-in-use .tc-btn, .tc-files-move .tc-btn { min-height: var(--touch); } + .tc-files-conflicts .tc-seg > button { min-width: 3.5rem; } + .tc-files-move .tc-pick-row { min-height: var(--touch); gap: 0.25rem; padding-left: calc(6px + min(var(--depth,0),5) * 12px); } + .tc-files-move .tc-pick-row > button { width: var(--touch); height: var(--touch); } + .tc-files-move .tc-pick-row > small { max-width: 3.75rem; font-size: 0.625rem; white-space: normal; } + .tc-files-move .tc-picker-places .tc-btn { padding-inline: 0.375rem; } + .tc-files-move .tc-input, .tc-files-name-dialog .tc-input { font-size: 1rem; min-height: var(--touch); } + .tc-files-move .tc-fdlg-body { padding: 0.75rem 1rem; gap: 0.625rem; } + .tc-files-transfer-sheet .tc-btn { min-height: var(--touch); } + .tc-files-transfer-sheet .tc-btn--icon { min-width: var(--touch); } + .tc-files-transfer-list .tc-tray-item { grid-template-columns: 1.125rem minmax(0,1fr) auto; padding-inline: 0.75rem; } } /* Navigation gets a complete row. Search, display controls and creation actions share the next row in deliberate groups, sized by the console's own width. */ #files-browser .tc-ftb { container: files-toolbar / inline-size; flex-direction: column; align-items: stretch; } #files-browser .tc-path { flex: none; } #files-browser .tc-path-real { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; } -#files-browser .tc-files-toolbar-commands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } -#files-browser .tc-fsearch { flex: 1 1 180px; min-width: 0; max-width: 360px; } -.tc-files-toolbar-view, .tc-files-toolbar-create { display: flex; align-items: center; gap: 8px; flex: none; } +#files-browser .tc-files-toolbar-commands { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; } +#files-browser .tc-fsearch { flex: 1 1 180px; min-width: 0; max-width: 22.5rem; } +.tc-files-toolbar-view, .tc-files-toolbar-create { display: flex; align-items: center; gap: 0.5rem; flex: none; } .tc-files-toolbar-create { margin-left: auto; } @container files-toolbar (max-width: 920px) { .tc-files-toolbar-view .tc-segicons { display: none; } @@ -2967,46 +2984,46 @@ button.tc-fd-item:hover { background: var(--hover); } #files-browser .tc-split > .tc-btn:last-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent); margin-left: 0; box-shadow: inset 1px 0 0 color-mix(in srgb,var(--on-accent) 24%,transparent); } /* Names have their own line. Ownership and status can wrap below them without borrowing space from the Size column or collapsing the filename. */ -#files-browser .tc-fl--files .tc-fl-row { padding-block: 7px; } -#files-browser .tc-files-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } +#files-browser .tc-fl--files .tc-fl-row { padding-block: 0.4375rem; } +#files-browser .tc-files-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; min-width: 0; } #files-browser .tc-files-row-meta:empty { display: none; } -#files-browser .tc-files-row-meta > small { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: 12px; line-height: 18px; } -#files-browser .tc-files-row-meta > small .tc-icon { width: 12px; height: 12px; flex: none; } -#files-browser .tc-files-row-meta > small code { font-size: 11.5px; } +#files-browser .tc-files-row-meta > small { display: flex; align-items: center; gap: 0.375rem; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: 0.75rem; line-height: 1.125rem; } +#files-browser .tc-files-row-meta > small .tc-icon { width: 0.75rem; height: 0.75rem; flex: none; } +#files-browser .tc-files-row-meta > small code { font-size: 0.71875rem; } #files-browser .tc-files-row-meta .w { color: var(--warn-text); } #files-browser .tc-files-row-meta .tc-ftag { min-width: 0; max-width: 100%; } #files-browser .tc-files-tag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #files-browser .tc-ftag .tc-icon { flex: none; } #files-browser .tc-prow-file > div > span:first-child > b { flex: 1; min-width: 0; } -#files-browser .tc-tnode { display: grid; grid-template-columns: 20px 16px minmax(0, 1fr); gap: 4px 6px; } +#files-browser .tc-tnode { display: grid; grid-template-columns: 1.25rem 1rem minmax(0, 1fr); gap: 0.25rem 0.375rem; } #files-browser .tc-tnode > :is(button, .tc-tspacer) { grid-column: 1; grid-row: 1; } #files-browser .tc-tnode > .tc-fl-icon { grid-column: 2; grid-row: 1; } #files-browser .tc-tnode > b { grid-column: 3; grid-row: 1; min-width: 0; } #files-browser .tc-tnode > .tc-ftag { grid-column: 3; grid-row: 2; justify-self: start; max-width: 100%; min-width: 0; } @media (min-width: 640px) { #files-browser .tc-tree { container: files-tree / inline-size; } - #files-browser .tc-tree .tc-fl-row { padding-block: 6px; } + #files-browser .tc-tree .tc-fl-row { padding-block: 0.375rem; } @container files-tree (max-width: 640px) { - .tc-tree :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: minmax(0, 1fr) 80px 72px 28px; column-gap: 8px; } + .tc-tree :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: minmax(0, 1fr) 5rem 4.5rem 1.75rem; column-gap: 0.5rem; } .tc-tree :is(.tc-fl-head, .tc-fl-row) > :nth-child(4) { display: none; } } @container files-tree (max-width: 480px) { - .tc-tree :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: minmax(0, 1fr) 72px 28px; } + .tc-tree :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: minmax(0, 1fr) 4.5rem 1.75rem; } .tc-tree :is(.tc-fl-head, .tc-fl-row) > :nth-child(2) { display: none; } } } @media (max-width: 639.98px) { - #files-browser .tc-tnode { grid-template-columns: 44px 16px minmax(0, 1fr); } + #files-browser .tc-tnode { grid-template-columns: var(--touch) 1rem minmax(0, 1fr); } #files-browser .tc-fsum-lead > strong { flex: none; white-space: nowrap; } } /* Folder lists need the same protection as Projects when Details is open. Modification dates remain in Details when the table's lane is narrow. */ #files-browser .tc-fl--files { container: files-list / inline-size; } @container files-list (max-width: 640px) { - .tc-fl--files :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: 24px minmax(0, 1fr) 128px 80px 28px; column-gap: 8px; } + .tc-fl--files :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: 1.5rem minmax(0, 1fr) 8rem 5rem 1.75rem; column-gap: 0.5rem; } } @container files-list (max-width: 560px) { - .tc-fl--files :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: 24px minmax(0, 1fr) 112px 28px; } + .tc-fl--files :is(.tc-fl-head, .tc-fl-row) { grid-template-columns: 1.5rem minmax(0, 1fr) 7rem 1.75rem; } .tc-fl--files :is(.tc-fl-head, .tc-fl-row) > :nth-child(4) { display: none; } } /* Owned Files layers also hide notices while the main route is changing. */ @@ -3014,125 +3031,140 @@ button.tc-fd-item:hover { background: var(--hover); } @media(max-width:639.98px) { body[data-console-route="files"] .tc-toaster { bottom: calc(86px + env(safe-area-inset-bottom)); } } body[data-console-route="files"]:has(.tc-layer) .tc-toaster { visibility: hidden; } @media(min-width:1024px) and (max-width:1360px) { - #files-browser .tc-fl--projects { --fl-cols: 24px minmax(0,1fr) 112px 58px 72px 28px; } - #files-browser .tc-fl--projects[data-no-threads] { --fl-cols: 24px minmax(0,1fr) 112px 72px 28px; } + #files-browser .tc-fl--projects { --fl-cols: 1.5rem minmax(0,1fr) 7rem 3.625rem 4.5rem 1.75rem; } + #files-browser .tc-fl--projects[data-no-threads] { --fl-cols: 1.5rem minmax(0,1fr) 7rem 4.5rem 1.75rem; } } @media(max-width:639.98px) { #files-browser .tc-fbanner { flex-wrap: wrap; align-items: flex-start; } #files-browser .tc-fbanner > div { flex: 1 1 calc(100% - 32px); } #files-browser .tc-fbanner > .tc-btn { flex: 1 1 calc(50% - 6px); justify-content: center; } } -.tc-files-transfer-keep { display: flex; align-items: center; gap: 12px; margin: 14px 16px 16px; padding: 12px; border: 1px solid color-mix(in srgb,var(--info) 26%,transparent); border-radius: var(--radius-xl); background: var(--info-soft); } -.tc-files-transfer-keep > .tc-icon { flex: none; width: 18px; height: 18px; color: var(--info-text); } -.tc-files-transfer-keep > div { display: flex; flex-direction: column; gap: 4px; } -.tc-files-transfer-keep strong { font-size: 13px; font-weight: 500; } -.tc-files-transfer-keep small { font-size: 12px; line-height: 17px; color: var(--fg-muted); } -.tc-files-transfer-actions { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface-sunken); } +.tc-files-transfer-keep { display: flex; align-items: center; gap: 0.75rem; margin: 0.875rem 1rem 1rem; padding: 0.75rem; border: 1px solid color-mix(in srgb,var(--info) 26%,transparent); border-radius: var(--radius-xl); background: var(--info-soft); } +.tc-files-transfer-keep > .tc-icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--info-text); } +.tc-files-transfer-keep > div { display: flex; flex-direction: column; gap: 0.25rem; } +.tc-files-transfer-keep strong { font-size: 0.8125rem; font-weight: 500; } +.tc-files-transfer-keep small { font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } +.tc-files-transfer-actions { display: flex; gap: 0.5rem; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface-sunken); } .tc-files-transfer-actions > .tc-btn { flex: 1; } .tc-files-name-dialog .tc-field-error:empty { display: none; } @media(max-width:639.98px) { - .tc-files-transfer-sheet .tc-files-transfer-list { margin: 0 16px; max-height: 45dvh; border: 1px solid var(--border); border-radius: var(--radius-xl); } - .tc-files-transfer-sheet .tc-tray-head { padding: 18px 16px 12px; } - .tc-files-transfer-sheet .tc-tray-item { min-height: 78px; } - .tc-files-transfer-sheet .tc-tray-item small { font-size: 12px; line-height: 17px; } + .tc-files-transfer-sheet .tc-files-transfer-list { margin: 0 1rem; max-height: 45dvh; border: 1px solid var(--border); border-radius: var(--radius-xl); } + .tc-files-transfer-sheet .tc-tray-head { padding: 1.125rem 1rem 0.75rem; } + .tc-files-transfer-sheet .tc-tray-item { min-height: 4.875rem; } + .tc-files-transfer-sheet .tc-tray-item small { font-size: 0.75rem; line-height: 1.0625rem; } } -.tc-files-transfer-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--fg-muted); font-size: 12px; border-top: 1px solid var(--hairline); } +.tc-files-transfer-pages { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; color: var(--fg-muted); font-size: 0.75rem; border-top: 1px solid var(--hairline); } /* Files reviews share one visual language and keep their primary actions in view while lists, paths and risk detail scroll within the body. */ :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-head, :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-foot { flex: none; } :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-body { overflow-y: auto; overscroll-behavior: contain; } -.tc-files-review-error { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb,var(--warn) 28%,transparent); border-radius: var(--radius-lg); background: var(--warn-soft); color: var(--warn-text); } -.tc-files-review-error p { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 19px; } +.tc-files-review-error { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; padding: 0.75rem; border: 1px solid color-mix(in srgb,var(--warn) 28%,transparent); border-radius: var(--radius-lg); background: var(--warn-soft); color: var(--warn-text); } +.tc-files-review-error p { flex: 1 1 240px; margin: 0; font-size: 0.8125rem; line-height: 1.1875rem; } .tc-files-review-error .tc-btn { flex: none; } -.tc-files-zip-estimate { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 2px; color: var(--fg-muted); font-size: 13px; } -.tc-files-zip-estimate > .tc-icon { width: 22px; height: 22px; flex: none; } -.tc-files-zip-estimate > div { display: flex; flex-direction: column; gap: 3px; } -.tc-files-zip-estimate strong { color: var(--fg); font-size: 24px; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; } -.tc-files-zip-estimate small { font-size: 12px; line-height: 18px; } -.tc-files-archive-contents { display: grid; gap: 8px; } -.tc-files-archive-contents > div { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); } -.tc-files-archive-contents span:not(.tc-small) { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } -.tc-files-archive-contents .tc-icon { width: 14px; height: 14px; color: var(--fg-muted); } -.tc-files-extract-name { padding: 0 14px 12px 44px; border-bottom: 1px solid var(--hairline); } -.tc-files-skipped { margin: 10px 0 0; padding: 0; list-style: none; max-height: 140px; overflow-y: auto; } -.tc-files-skipped li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 4px 0; font-size: 11px; } +.tc-files-zip-estimate { display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0 2px; color: var(--fg-muted); font-size: 0.8125rem; } +.tc-files-zip-estimate > .tc-icon { width: 1.375rem; height: 1.375rem; flex: none; } +.tc-files-zip-estimate > div { display: flex; flex-direction: column; gap: 0.1875rem; } +.tc-files-zip-estimate strong { color: var(--fg); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; } +.tc-files-zip-estimate small { font-size: 0.75rem; line-height: 1.125rem; } +.tc-files-archive-contents { display: grid; gap: 0.5rem; } +.tc-files-archive-contents > div { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); } +.tc-files-archive-contents span:not(.tc-small) { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; } +.tc-files-archive-contents .tc-icon { width: 0.875rem; height: 0.875rem; color: var(--fg-muted); } +.tc-files-extract-name { padding: 0 0.875rem 0.75rem 2.75rem; border-bottom: 1px solid var(--hairline); } +.tc-files-skipped { margin: 0.625rem 0 0; padding: 0; list-style: none; max-height: 8.75rem; overflow-y: auto; } +.tc-files-skipped li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.75rem; padding: 0.25rem 0; font-size: 0.6875rem; } .tc-files-skipped code { overflow-wrap: anywhere; } -.tc-files-skipped span { color: var(--fg-muted); font-size: 11px; } -.tc-files-extract summary { margin-top: 7px; cursor: pointer; font-size: 12px; } +.tc-files-skipped span { color: var(--fg-muted); font-size: 0.6875rem; } +.tc-files-extract summary { margin-top: 0.4375rem; cursor: pointer; font-size: 0.75rem; } .tc-files-clean-projects { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } .tc-files-clean-project + .tc-files-clean-project { border-top: 1px solid var(--border); } -.tc-files-clean-project-head { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; } -.tc-files-clean-disclosure { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; padding: 0; } -.tc-files-clean-disclosure > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; } -.tc-files-clean-project-head > span { color: var(--fg-muted); font-size: 12px; white-space: nowrap; } -.tc-files-clean-item { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 10px 14px 10px 42px; border-top: 1px solid var(--hairline); cursor: pointer; } -.tc-files-clean-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; } -.tc-files-clean-item strong { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; font-weight: 400; } +.tc-files-clean-project-head { display: grid; grid-template-columns: 1.125rem minmax(0,1fr) auto; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; } +.tc-files-clean-disclosure { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.4375rem; min-width: 0; padding: 0; } +.tc-files-clean-disclosure > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84375rem; font-weight: 500; } +.tc-files-clean-project-head > span { color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; } +.tc-files-clean-item { display: grid; grid-template-columns: 1.125rem minmax(0,1fr) auto; align-items: start; gap: 0.625rem; padding: 0.625rem 0.875rem 0.625rem 2.625rem; border-top: 1px solid var(--hairline); cursor: pointer; } +.tc-files-clean-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; } +.tc-files-clean-item strong { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4375rem; font-size: 0.75rem; font-weight: 400; } .tc-files-clean-item code { overflow-wrap: anywhere; } -.tc-files-clean-item small { font-size: 12px; line-height: 17px; color: var(--fg-muted); } +.tc-files-clean-item small { font-size: 0.75rem; line-height: 1.0625rem; color: var(--fg-muted); } .tc-files-clean-item .tc-files-clean-warning { color: var(--warn-text); } -.tc-files-clean-item > span:last-child { font-size: 12px; color: var(--fg-muted); white-space: nowrap; } -.tc-files-clean-kept { font-size: 13px; color: var(--fg-muted); } -.tc-files-clean-kept summary { cursor: pointer; padding: 4px 0; } -.tc-files-clean-kept > div { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--hairline); } -.tc-files-clean-kept code { font-size: 12px; overflow-wrap: anywhere; } -.tc-files-clean-kept small { font-size: 12px; line-height: 17px; } -.tc-files-clean-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; } -.tc-files-clean-total strong { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; } -.tc-files-clean-total > span { font-size: 12px; color: var(--fg-muted); } -.tc-files-review-empty, .tc-files-review-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 8px; text-align: center; } -.tc-files-review-empty > .tc-icon { width: 28px; height: 28px; color: var(--ok-text); } -.tc-files-review-progress > .tc-spinner { width: 24px; height: 24px; } -.tc-files-review-progress .tc-progress { width: min(100%,320px); } +.tc-files-clean-item > span:last-child { font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; } +.tc-files-clean-kept { font-size: 0.8125rem; color: var(--fg-muted); } +.tc-files-clean-kept summary { cursor: pointer; padding: 0.25rem 0; } +.tc-files-clean-kept > div { display: grid; gap: 0.1875rem; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline); } +.tc-files-clean-kept code { font-size: 0.75rem; overflow-wrap: anywhere; } +.tc-files-clean-kept small { font-size: 0.75rem; line-height: 1.0625rem; } +.tc-files-clean-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0; font-size: 0.8125rem; } +.tc-files-clean-total strong { font-size: 1.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; } +.tc-files-clean-total > span { font-size: 0.75rem; color: var(--fg-muted); } +.tc-files-review-empty, .tc-files-review-progress { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 1.75rem 0.5rem; text-align: center; } +.tc-files-review-empty > .tc-icon { width: 1.75rem; height: 1.75rem; color: var(--ok-text); } +.tc-files-review-progress > .tc-spinner { width: 1.5rem; height: 1.5rem; } +.tc-files-review-progress .tc-progress { width: min(100%,20rem); } .tc-files-review-empty :is(h3,p), .tc-files-review-progress :is(h3,p) { margin: 0; } -.tc-files-review-progress small { font-size: 12px; line-height: 18px; color: var(--fg-muted); } -.tc-files-delete { width: 600px; } -.tc-files-delete-label { font-size: 13px; } +.tc-files-review-progress small { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); } +.tc-files-delete { width: 37.5rem; } +.tc-files-delete-label { font-size: 0.8125rem; } .tc-files-delete .tc-risk small { overflow-wrap: anywhere; } .tc-files-delete .tc-risk li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.tc-files-archive-preview { display: grid; gap: 14px; } -.tc-files-archive-preview > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } +.tc-files-archive-preview { display: grid; gap: 0.875rem; } +.tc-files-archive-preview > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } .tc-files-archive-preview > div .tc-icon { color: var(--fg-muted); } -.tc-files-archive-preview > div strong { font-size: 18px; font-weight: 600; } -.tc-files-archive-preview > div span { color: var(--fg-muted); font-size: 12px; } -.tc-files-archive-preview ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; } -.tc-files-archive-preview li { display: flex; align-items: center; gap: 8px; font-size: 12px; } -.tc-files-archive-preview li .tc-icon { width: 15px; height: 15px; color: var(--fg-muted); } +.tc-files-archive-preview > div strong { font-size: 1.125rem; font-weight: 600; } +.tc-files-archive-preview > div span { color: var(--fg-muted); font-size: 0.75rem; } +.tc-files-archive-preview ul { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; } +.tc-files-archive-preview li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; } +.tc-files-archive-preview li .tc-icon { width: 0.9375rem; height: 0.9375rem; color: var(--fg-muted); } .tc-files-archive-preview code { overflow-wrap: anywhere; } -.tc-storage-data-row:has(a) { grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; } +.tc-storage-data-row:has(a) { grid-template-columns: minmax(0,1fr) auto auto; gap: 0.75rem; } +@container (max-width: 24rem) { + .tc-storage-data-row:has(a) { grid-template-columns: minmax(0,1fr) auto; } + .tc-storage-data-row > a { grid-column: 1 / -1; justify-self: start; } +} + @media(max-width:639.98px) { - :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-head { padding: 14px 16px 4px; } - :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-body { padding: 14px 16px 18px; } - :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-btn { min-height: 44px; } - .tc-files-clean-project-head { padding: 10px; gap: 8px; } - .tc-files-clean-project-head > span { font-size: 11px; } - .tc-files-clean-item { padding: 12px 10px 12px 18px; gap: 8px; } - .tc-files-clean-disclosure strong { font-size: 13px; } - .tc-files-zip .tc-opt { padding: 12px; gap: 10px; } - .tc-files-extract .tc-input, .tc-files-delete .tc-input { min-height: 44px; font-size: 16px; } - .tc-files-delete .tc-risk { grid-template-columns: 18px minmax(0,1fr); padding: 12px; gap: 8px; } + :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-head { padding: 0.875rem 1rem 0.25rem; } + :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-body { padding: 0.875rem 1rem 1.125rem; } + :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-btn { min-height: var(--touch); } + .tc-files-clean-project-head { padding: 0.625rem; gap: 0.5rem; } + .tc-files-clean-project-head > span { font-size: 0.6875rem; } + .tc-files-clean-item { padding: 0.75rem 0.625rem 0.75rem 1.125rem; gap: 0.5rem; } + .tc-files-clean-disclosure strong { font-size: 0.8125rem; } + .tc-files-zip .tc-opt { padding: 0.75rem; gap: 0.625rem; } + .tc-files-extract .tc-input, .tc-files-delete .tc-input { min-height: var(--touch); font-size: 1rem; } + .tc-files-delete .tc-risk { grid-template-columns: 1.125rem minmax(0,1fr); padding: 0.75rem; gap: 0.5rem; } .tc-files-delete .tc-risk > .tc-btn { grid-column: 2; justify-self: start; } .tc-storage-data-row:has(a) { grid-template-columns: minmax(0,1fr) auto; } .tc-storage-data-row > a { grid-column: 1 / -1; justify-self: start; } } -.tc-files-clean-disclosure>span{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;text-align:left} +.tc-files-clean-disclosure>span{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:0.1875rem;text-align:left} .tc-files-clean-disclosure>span>strong{font-weight:550} -.tc-files-clean-disclosure small{font-size:11px;font-weight:400;color:var(--fg-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.tc-files-clean-disclosure small{font-size:0.6875rem;font-weight:400;color:var(--fg-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tc-files-clean-project-head{background:var(--surface-sunken)} .tc-files-clean-project-head>span{white-space:nowrap} -.tc-files-transfer-extract{display:flex;align-items:flex-start;gap:8px;margin-top:7px;font-size:12px;overflow-wrap:anywhere;cursor:pointer} +.tc-files-transfer-extract{display:flex;align-items:flex-start;gap:0.5rem;margin-top:0.4375rem;font-size:0.75rem;overflow-wrap:anywhere;cursor:pointer} .tc-files-transfer-extract input{flex:0 0 auto;margin-top:2px} -@media(max-width:639.98px){.tc-files-clean-total>strong{font-size:23px}.tc-files-clean-project-head{gap:8px}.tc-files-clean-disclosure{gap:6px}.tc-files-clean-project-head>span{white-space:normal;text-align:right;font-size:11px}.tc-files-transfer-extract{min-height:44px;align-items:center}} +@media(max-width:639.98px){.tc-files-clean-total>strong{font-size:1.4375rem}.tc-files-clean-project-head{gap:0.5rem}.tc-files-clean-disclosure{gap:0.375rem}.tc-files-clean-project-head>span{white-space:normal;text-align:right;font-size:0.6875rem}.tc-files-transfer-extract{min-height:2.75rem;align-items:center}} /* The body owns scrolling; flex children must retain their full contents. */ :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-body > * { flex: none; } :is(.tc-files-zip,.tc-files-extract,.tc-files-clean,.tc-files-delete) .tc-fdlg-head h2, .tc-files-delete-label { overflow-wrap: anywhere; } -.tc-files-risk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } +.tc-files-risk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; } .tc-files-delete .tc-risk .tc-files-risk-actions .tc-btn { width: auto; padding-inline: 0; align-self: flex-start; } -.tc-files-zip-option-size { flex: none; white-space: nowrap; font-size: 12px; color: var(--fg-muted); font-style: normal; } +.tc-files-zip-option-size { flex: none; white-space: nowrap; font-size: 0.75rem; color: var(--fg-muted); font-style: normal; } .tc-files-zip .tc-opt small { overflow-wrap: anywhere; } .tc-files-archive-contents span:not(.tc-small) { max-width: 100%; min-width: 0; } .tc-files-archive-contents code { min-width: 0; overflow-wrap: anywhere; } + +/* The Settings breadcrumb stays with the page while its content scrolls. */ +.tc-console-topbar { flex: none; height: var(--topbar); min-height: var(--topbar); border-bottom: 1px solid var(--border); padding-inline: var(--space-4); background: var(--bg); } +.tc-console-topbar .tc-crumbs { gap: var(--space-3); } +.tc-console-topbar .tc-crumbs a { color: var(--fg-muted); } +.tc-console-topbar .tc-crumbs > li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.tc-console-topbar .tc-crumbs > li + li::before { margin-right: var(--space-3); } +.tc-console-topbar .tc-embed-close { background: transparent; } +.tc-nav-group > .tc-nav-label { font-size: 0.75rem; font-weight: 500; } +@media (max-width: 1023.98px) { .tc-console-topbar { display: none; } } diff --git a/docker/setup/design/README.md b/docker/setup/design/README.md index edc3bad..f281528 100644 --- a/docker/setup/design/README.md +++ b/docker/setup/design/README.md @@ -1,18 +1,87 @@ -# Vendored design system +# Setup design system -These three files come from the T3 Code Console design handoff -(`t3code-console-handoff/design-system/`). They are the component layer the -console is built from, and are kept as close to the handoff as possible so a -newer handoff can be dropped in and diffed: +Setup uses the existing vanilla JavaScript Kit and `tc-` components. Its shared +appearance follows native T3 Code Settings. The measured reference is **T3 0.1.4**, +[commit 783581d](https://github.com/pingdotgg/t3code/tree/783581d461dc72cdd8f78fc8abb4ad536dfc4547/apps/web/src). +Stable **0.1.5**, [commit 6d450a4](https://github.com/pingdotgg/t3code/tree/6d450a4284852af137b2f3407fddd89eb76e7644/apps/web/src), +and the checked `0.1.5-nightly.20261029.3867` use the same shared recipes. -| File | From | Notes | -| --- | --- | --- | -| `tokens.css` | `tokens.css` | The custom properties only; the generated type classes (`.display`, `.title`, `.body`…) are left out because they are too generic for a page. | -| `components.css` | `components/bundle.css` | Verbatim except the fixes below. | -| `ui.js` | `components/bundle.js` | Verbatim except the fixes below. Exposes `window.T3C`. | +| File | Responsibility | +| --- | --- | +| `tokens.css` | Standalone native light/dark defaults, semantic roles, rem geometry and density. | +| `components.css` | Shared controls, rows, groups, typography, navigation and feedback. | +| `ui.js` | Existing `window.T3C` icons, provider marks and shared behavior. | +| `../console.css` | Console composition, page layouts, overlays and responsive navigation. | +| `../client/appearance.js` | Validated native appearance messages mapped to Kit tokens. | -The page's own layout (the shell, the phone bar, overlays, the toaster) lives in -`../console.css`, never here. +These files started with `t3code-console-handoff/design-system/`. They are now +maintained here, rather than replaced by an unreviewed handoff bundle. Preserve +the fixes and additions below when updating recipes. + +## Following native T3 + +Compare `apps/web/src/index.css`, `themePalette.ts`, `appearanceFonts.ts`, +`components/ui`, `components/AppRouteModal.tsx` and `components/settings` in the +pinned native source. The console uses its neutral canvas, foreground/muted text, +40% card fills, 60% card borders, control radius, switches and inset focus rings. +The sidebar is 15rem and the breadcrumb header is 3rem. Embedded modal bounds +match native Settings: 80rem by 60rem, 1.5rem gutters, 2.5rem on large screens, +and full screen below 640px. + +Native `primary` maps to Setup `--accent`, the action color. Native `accent` +is a neutral interactive surface and maps to `--hover`/`--pressed`. Warning, +error, success and information keep separate semantic colors. Do not use the +primary color for all status indicators or hardcode blue in action recipes. + +`setup-bridge.js` sends a versioned appearance snapshot on the existing trusted +ready/theme exchange. It reads resolved semantic values, including native +contrast adjustments, font families, smoothing, interface size and control +radius. Root class/style/theme mutations are coalesced per animation frame; +identical snapshots are skipped. The receiver accepts only allowlisted, +browser-supported literal values from its same-origin parent. There are no +arbitrary CSS selectors, URLs, font downloads or configuration writes. + +Palette-only changes update CSS without rendering the application, preserving +drafts, menus, selection and focus. Missing roles fall back to native standalone +defaults; theme-only legacy messages clear previous overrides. The unlock page +uses the same receiver. Standalone Setup retains its own Light/Dark/System +selector. Native interface size is bounded to its supported 12px to 20px range; +rem geometry follows it while hairlines, switch end insets and minimum 44px +touch targets retain their physical size. + +The mobile information architecture intentionally stays specific to Setup: +primary bottom tabs, More, and focused Files/Skills/MCP screens. Keeping these +flows avoids compressing twelve sections and management tables into the native +phone settings icon rail. The desktop sidebar switches at 1024px to leave room +for these data-heavy pages. Colors and controls remain shared across both modes. + +### Font asset + +`fonts/inter-latin-variable.woff2` is the unmodified 48,256-byte Latin variable +Inter asset from the official T3 0.1.4 ARM64 client archive +(`client/assets/inter-latin-wght-normal-Dx4kXJAl.woff2`). `fonts/OFL.txt` contains +the [Inter SIL Open Font License](https://github.com/rsms/inter/blob/v4.1/LICENSE.txt). +`page.mjs` inlines the font once with the styles, preserving the console's single +HTML response and offline operation. CSP permits `font-src data:` only. System +and non-Latin fallback stacks match native T3. No runtime font dependency or +external font service is needed. + +### Verification when syncing + +`tests/fixtures/native-appearance.json` records the measured reference version, +commit and light/dark roles. `tests/appearance.test.mjs` covers the transport, +validation, legacy fallback and self-contained font delivery. + +`node scripts/appearance-ui-audit.js URL KEY` compares the real standalone +console with those roles in light/dark at 360px, 820px and 1440px. It checks +loaded fonts, focus, forced colors, header navigation and page containment. +`scripts/setup-bridge-audit.js` additionally checks live native role parity, +custom palette/contrast/font changes, draft and focus preservation, coalescing, +legacy fallback and message source guards through a real native T3 frame. +Run the existing shared geometry, row and feature audits from CONTRIBUTING as +well. Capture source and implementation at the same viewport, then inspect +combined comparisons. Include representative light, dark, phone and embedded +screenshots in the PR, with its scoped visual QA findings. ## Local fixes @@ -20,7 +89,7 @@ Each of these is a bug in the handoff, not a restyle. Keep them when syncing. 1. **`--sidebar` meant two things.** The handoff's `tokens.css` declares `--sidebar` as the sidebar's colour in each theme block and again as the - 256px layout width in `:root`. With `data-theme` on `` both selectors + sidebar layout width in `:root`. With `data-theme` on `` both selectors match the same element with equal specificity, so the width won and the sidebar lost its background in both themes. The width is now `--sidebar-w`, in `tokens.css` and in `.tc-app`'s grid in `components.css`. (The handoff's diff --git a/docker/setup/design/components.css b/docker/setup/design/components.css index 831e6a2..f4dc375 100644 --- a/docker/setup/design/components.css +++ b/docker/setup/design/components.css @@ -1,33 +1,32 @@ -/* T3 Code Console v2.1 — component stylesheet. +/* T3 Code Console component stylesheet, aligned with native T3 0.1.4. Geometry and recipes follow upstream T3 Code (pingdotgg/t3code apps/web, components/ui/*): coss-ui controls on base-ui, zinc/neutral surfaces, one - T3 blue. Every colour, length and duration comes from tokens.css. */ + semantic action color. Shared appearance values come from tokens.css. */ /* ------------------------------------------------------------ base ---- */ .tc-root, .tc-root *, .tc-root *::before, .tc-root *::after { box-sizing: border-box; } .tc-root { font-family: var(--font-sans); - font-size: 14px; line-height: 20px; + font-size: 0.875rem; line-height: 1.25rem; color: var(--fg); background-color: var(--bg); - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: 256px 256px; - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: var(--font-smoothing, antialiased); } :where(.tc-root) :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } :where(.tc-root a) { color: var(--accent-text); text-decoration: none; } :where(.tc-root a:hover) { text-decoration: underline; text-underline-offset: 4px; } -.tc-mono, .tc-root code { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } -.tc-mono--body { font-size: 13px; } +.tc-mono, .tc-root code { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; } +.tc-mono--body { font-size: 0.8125rem; } .tc-num { font-variant-numeric: tabular-nums; } -.tc-small { font-size: 12px; line-height: 18px; } +.tc-small { font-size: 0.75rem; line-height: 1.125rem; } .tc-muted { color: var(--fg-muted); } .tc-subtle { color: var(--fg-subtle); } .tc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } -.tc-eyebrow { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); } +.tc-eyebrow { font-size: 0.6875rem; line-height: 0.875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); } .tc-icon { width: var(--icon); height: var(--icon); flex: none; stroke-width: 2; display: inline-block; vertical-align: middle; } -.tc-icon--sm { width: 14px; height: 14px; } -.tc-icon--xs { width: 12px; height: 12px; } -.tc-icon--lg { width: 18px; height: 18px; } +.tc-icon--sm { width: 0.875rem; height: 0.875rem; } +.tc-icon--xs { width: 0.75rem; height: 0.75rem; } +.tc-icon--lg { width: 1.125rem; height: 1.125rem; } .tc-stack { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .tc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .tc-spacer { flex: 1 1 auto; } @@ -35,19 +34,19 @@ /* ------------------------------------------------------------- brand -- */ /* The console's own app icon (blue gradient on the 4/16px grid). */ -.tc-mark { width: 24px; height: 24px; flex: none; border-radius: 6px; display: inline-block; +.tc-mark { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 0.375rem; display: inline-block; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJUMyBDb2RlIj4KICA8dGl0bGU+VDMgQ29kZTwvdGl0bGU+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InQzLXBhcGVyIiB4MT0iMzYiIHkxPSIwIiB4Mj0iOTIiIHkyPSIxMjgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzY3QzJGRiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNDQiIHN0b3AtY29sb3I9IiMzNDdGRjgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMTUzOEQwIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJ0My1nbG93IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIgogICAgICBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDkyIDIyKSByb3RhdGUoMTM3KSBzY2FsZSg3OCA3MCkiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRDRGNkZGIiBzdG9wLW9wYWNpdHk9IjAuNjIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjUyIiBzdG9wLWNvbG9yPSIjNjVDOEZGIiBzdG9wLW9wYWNpdHk9IjAuMjQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjc2QUYxIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8cGF0dGVybiBpZD0idDMtbWlub3IiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8cGF0aCBkPSJNNCAwSDBWNCIgc3Ryb2tlPSIjRDlGN0ZGIiBzdHJva2Utd2lkdGg9IjAuMTgiIG9wYWNpdHk9IjAuMzgiLz4KICAgIDwvcGF0dGVybj4KICAgIDxwYXR0ZXJuIGlkPSJ0My1tYWpvciIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ1cmwoI3QzLW1pbm9yKSIvPgogICAgICA8cGF0aCBkPSJNMTYgMEgwVjE2IiBzdHJva2U9IiNGMEZDRkYiIHN0cm9rZS13aWR0aD0iMC4zNCIgb3BhY2l0eT0iMC41MiIvPgogICAgPC9wYXR0ZXJuPgogICAgPGNsaXBQYXRoIGlkPSJ0My1mcmFtZSI+CiAgICAgIDxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMTAiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgogIDxnIGNsaXAtcGF0aD0idXJsKCN0My1mcmFtZSkiPgogICAgPHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIGZpbGw9InVybCgjdDMtcGFwZXIpIi8+CiAgICA8cmVjdCB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgZmlsbD0idXJsKCN0My1nbG93KSIvPgogICAgPHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9InVybCgjdDMtbWFqb3IpIiBvcGFjaXR5PSIwLjk2Ii8+CiAgICA8cGF0aCBkPSJNNjQgNFYxMjRNNCA2NEgxMjQiIHN0cm9rZT0iI0YwRkNGRiIgc3Ryb2tlLXdpZHRoPSIwLjMiIG9wYWNpdHk9IjAuNDYiLz4KICAgIDxyZWN0IHg9IjUuNzUiIHk9IjUuNzUiIHdpZHRoPSIxMTYuNSIgaGVpZ2h0PSIxMTYuNSIgcng9IjUuNSIgc3Ryb2tlPSIjRjFGQ0ZGIiBzdHJva2Utd2lkdGg9IjAuNSIgb3BhY2l0eT0iMC42NiIvPgogIDwvZz4KICA8cGF0aCBkPSJNMzMuNDUwOSA5M1Y0Ny41NkgxNS41MzA5VjM3SDY0LjMzMDlWNDcuNTZINDYuNDEwOVY5M0gzMy40NTA5Wk04Ni43MjUzIDkzLjk2QzgyLjgzMiA5My45NiA3OC45NjUzIDkzLjQ1MzMgNzUuMTI1MyA5Mi40NEM3MS4yODUzIDkxLjM3MzMgNjguMDMyIDg5Ljg4IDY1LjM2NTMgODcuOTZMNzAuNDA1MyA3OC4wNEM3Mi41Mzg2IDc5LjU4NjcgNzUuMDE4NiA4MC44MTMzIDc3Ljg0NTMgODEuNzJDODAuNjcyIDgyLjYyNjcgODMuNTI1MyA4My4wOCA4Ni40MDUzIDgzLjA4Qzg5LjY1ODYgODMuMDggOTIuMjE4NiA4Mi40NCA5NC4wODUzIDgxLjE2Qzk1Ljk1MiA3OS44OCA5Ni44ODUzIDc4LjEyIDk2Ljg4NTMgNzUuODhDOTYuODg1MyA3My43NDY3IDk2LjA1ODYgNzIuMDY2NyA5NC40MDUzIDcwLjg0QzkyLjc1MiA2OS42MTMzIDkwLjA4NTMgNjkgODYuNDA1MyA2OUg4MC40ODUzVjYwLjQ0TDk2LjA4NTMgNDIuNzZMOTcuNTI1MyA0Ny40SDY4LjE2NTNWMzdIMTA3LjM2NVY0NS40TDkxLjg0NTMgNjMuMDhMODUuMjg1MyA1OS4zMkg4OS4wNDUzQzk1LjkyNTMgNTkuMzIgMTAxLjEyNSA2MC44NjY3IDEwNC42NDUgNjMuOTZDMTA4LjE2NSA2Ny4wNTMzIDEwOS45MjUgNzEuMDI2NyAxMDkuOTI1IDc1Ljg4QzEwOS45MjUgNzkuMDI2NyAxMDkuMDk5IDgxLjk4NjcgMTA3LjQ0NSA4NC43NkMxMDUuNzkyIDg3LjQ4IDEwMy4yNTkgODkuNjkzMyA5OS44NDUzIDkxLjRDOTYuNDMyIDkzLjEwNjcgOTIuMDU4NiA5My45NiA4Ni43MjUzIDkzLjk2WiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K") center / cover no-repeat; } -.tc-mark--lg { width: 40px; height: 40px; border-radius: 10px; } -.tc-mark--xl { width: 56px; height: 56px; border-radius: 14px; } +.tc-mark--lg { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; } +.tc-mark--xl { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; } /* Upstream sidebar brand: the T3 glyphs at cap height, "Code" muted. */ -.tc-wordmark { display: inline-flex; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; } -.tc-wordmark::before { content: ""; width: 13.5px; height: 8.2px; background: currentColor; +.tc-wordmark { display: inline-flex; align-items: baseline; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; } +.tc-wordmark::before { content: ""; width: 0.84375rem; height: 0.5125rem; background: currentColor; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1LjUzMDkgMzcgOTQuMzk0MSA1Ni45NiI+PHBhdGggZD0iTTMzLjQ1MDkgOTNWNDcuNTZIMTUuNTMwOVYzN0g2NC4zMzA5VjQ3LjU2SDQ2LjQxMDlWOTNIMzMuNDUwOVpNODYuNzI1MyA5My45NkM4Mi44MzIgOTMuOTYgNzguOTY1MyA5My40NTMzIDc1LjEyNTMgOTIuNDRDNzEuMjg1MyA5MS4zNzMzIDY4LjAzMiA4OS44OCA2NS4zNjUzIDg3Ljk2TDcwLjQwNTMgNzguMDRDNzIuNTM4NiA3OS41ODY3IDc1LjAxODYgODAuODEzMyA3Ny44NDUzIDgxLjcyQzgwLjY3MiA4Mi42MjY3IDgzLjUyNTMgODMuMDggODYuNDA1MyA4My4wOEM4OS42NTg2IDgzLjA4IDkyLjIxODYgODIuNDQgOTQuMDg1MyA4MS4xNkM5NS45NTIgNzkuODggOTYuODg1MyA3OC4xMiA5Ni44ODUzIDc1Ljg4Qzk2Ljg4NTMgNzMuNzQ2NyA5Ni4wNTg2IDcyLjA2NjcgOTQuNDA1MyA3MC44NEM5Mi43NTIgNjkuNjEzMyA5MC4wODUzIDY5IDg2LjQwNTMgNjlIODAuNDg1M1Y2MC40NEw5Ni4wODUzIDQyLjc2TDk3LjUyNTMgNDcuNEg2OC4xNjUzVjM3SDEwNy4zNjVWNDUuNEw5MS44NDUzIDYzLjA4TDg1LjI4NTMgNTkuMzJIODkuMDQ1M0M5NS45MjUzIDU5LjMyIDEwMS4xMjUgNjAuODY2NyAxMDQuNjQ1IDYzLjk2QzEwOC4xNjUgNjcuMDUzMyAxMDkuOTI1IDcxLjAyNjcgMTA5LjkyNSA3NS44OEMxMDkuOTI1IDc5LjAyNjcgMTA5LjA5OSA4MS45ODY3IDEwNy40NDUgODQuNzZDMTA1Ljc5MiA4Ny40OCAxMDMuMjU5IDg5LjY5MzMgOTkuODQ1MyA5MS40Qzk2LjQzMiA5My4xMDY3IDkyLjA1ODYgOTMuOTYgODYuNzI1MyA5My45NloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") center / contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1LjUzMDkgMzcgOTQuMzk0MSA1Ni45NiI+PHBhdGggZD0iTTMzLjQ1MDkgOTNWNDcuNTZIMTUuNTMwOVYzN0g2NC4zMzA5VjQ3LjU2SDQ2LjQxMDlWOTNIMzMuNDUwOVpNODYuNzI1MyA5My45NkM4Mi44MzIgOTMuOTYgNzguOTY1MyA5My40NTMzIDc1LjEyNTMgOTIuNDRDNzEuMjg1MyA5MS4zNzMzIDY4LjAzMiA4OS44OCA2NS4zNjUzIDg3Ljk2TDcwLjQwNTMgNzguMDRDNzIuNTM4NiA3OS41ODY3IDc1LjAxODYgODAuODEzMyA3Ny44NDUzIDgxLjcyQzgwLjY3MiA4Mi42MjY3IDgzLjUyNTMgODMuMDggODYuNDA1MyA4My4wOEM4OS42NTg2IDgzLjA4IDkyLjIxODYgODIuNDQgOTQuMDg1MyA4MS4xNkM5NS45NTIgNzkuODggOTYuODg1MyA3OC4xMiA5Ni44ODUzIDc1Ljg4Qzk2Ljg4NTMgNzMuNzQ2NyA5Ni4wNTg2IDcyLjA2NjcgOTQuNDA1MyA3MC44NEM5Mi43NTIgNjkuNjEzMyA5MC4wODUzIDY5IDg2LjQwNTMgNjlIODAuNDg1M1Y2MC40NEw5Ni4wODUzIDQyLjc2TDk3LjUyNTMgNDcuNEg2OC4xNjUzVjM3SDEwNy4zNjVWNDUuNEw5MS44NDUzIDYzLjA4TDg1LjI4NTMgNTkuMzJIODkuMDQ1M0M5NS45MjUzIDU5LjMyIDEwMS4xMjUgNjAuODY2NyAxMDQuNjQ1IDYzLjk2QzEwOC4xNjUgNjcuMDUzMyAxMDkuOTI1IDcxLjAyNjcgMTA5LjkyNSA3NS44OEMxMDkuOTI1IDc5LjAyNjcgMTA5LjA5OSA4MS45ODY3IDEwNy40NDUgODQuNzZDMTA1Ljc5MiA4Ny40OCAxMDMuMjU5IDg5LjY5MzMgOTkuODQ1MyA5MS40Qzk2LjQzMiA5My4xMDY3IDkyLjA1ODYgOTMuOTYgODYuNzI1MyA5My45NloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") center / contain no-repeat; align-self: center; } .tc-wordmark > span { color: var(--fg-muted); } /* Brand masthead: upstream AuthSurfaceShell (stage gradient, radial light, bottom shade) with the mark's blueprint grid drawn in stage-line. */ -.tc-masthead { position: relative; height: 96px; overflow: hidden; color: var(--on-stage); +.tc-masthead { position: relative; height: 6rem; overflow: hidden; color: var(--on-stage); background: radial-gradient(circle at 75% 25%, rgb(136 204 255 / 0.5), transparent 38%), linear-gradient(135deg, var(--stage-mid), var(--stage-bottom)); } @@ -61,10 +60,10 @@ -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 85%); mask-image: linear-gradient(105deg, transparent 30%, #000 85%); } .tc-masthead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgb(7 18 55 / 0.46) 100%); } .tc-masthead > * { position: relative; z-index: 1; } -.tc-masthead .tc-eyebrow { color: color-mix(in srgb, var(--on-stage) 80%, transparent); letter-spacing: 0.1em; font-size: 10px; } +.tc-masthead .tc-eyebrow { color: color-mix(in srgb, var(--on-stage) 80%, transparent); letter-spacing: 0.1em; font-size: 0.625rem; } /* Standalone page: upstream StandalonePage (radial glow at top, angled shade). */ -.tc-standalone { position: relative; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 40px 24px; } +.tc-standalone { position: relative; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; } .tc-standalone::before { content: ""; position: absolute; inset: 0; opacity: 0.8; pointer-events: none; background: radial-gradient(48rem 20rem at top, color-mix(in srgb, var(--info) 12%, transparent), transparent), @@ -74,16 +73,16 @@ radial-gradient(44rem 16rem at top, color-mix(in srgb, var(--ok) 14%, transparent), transparent), radial-gradient(28rem 18rem at left, color-mix(in srgb, oklch(0.685 0.169 237.323) 10%, transparent), transparent), linear-gradient(145deg, color-mix(in srgb, var(--bg) 90%, #000) 0%, var(--bg) 55%); } -.tc-standalone-card { position: relative; width: 100%; max-width: 576px; border-radius: var(--radius-2xl); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); +.tc-standalone-card { position: relative; width: 100%; max-width: 36rem; border-radius: var(--radius-2xl); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.2); backdrop-filter: blur(12px); overflow: hidden; } -.tc-standalone-body { padding: 32px; display: flex; flex-direction: column; gap: 0; } -.tc-standalone-title { margin: 12px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; } -.tc-standalone-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.625; color: var(--fg-muted); } -.tc-note { border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent); padding: 12px; font-size: 12px; line-height: 1.625; color: var(--fg-muted); } +.tc-standalone-body { padding: 2rem; display: flex; flex-direction: column; gap: 0; } +.tc-standalone-title { margin: 0.75rem 0 0; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; } +.tc-standalone-desc { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); } +.tc-note { border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent); padding: 0.75rem; font-size: 0.75rem; line-height: 1.625; color: var(--fg-muted); } /* Brand glow on a group (Readiness, pairing): upstream "brand" tone, contained. */ .tc-group--brand { position: relative; overflow: hidden; } -.tc-group--brand::before { content: ""; position: absolute; inset: 0 0 auto; height: 176px; pointer-events: none; +.tc-group--brand::before { content: ""; position: absolute; inset: 0 0 auto; height: 11rem; pointer-events: none; background: radial-gradient(40rem 11rem at top, color-mix(in srgb, var(--info) 12%, transparent), transparent); } .tc-group--brand > * { position: relative; } @@ -92,21 +91,21 @@ press scale .97, 2px ring offset 1px, disabled 64%. */ .tc-btn { --_h: var(--control-md); --_icon: var(--fg-muted); - position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; - height: var(--_h); padding: 0 11px; border-radius: var(--radius-md); border: 1px solid transparent; - font: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; + position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none; + height: var(--_h); padding: 0 0.6875rem; border-radius: var(--radius-md); border: 1px solid transparent; + font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--fg); background: transparent; cursor: pointer; user-select: none; text-decoration: none !important; transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), scale var(--dur-fast); } -.tc-btn .tc-icon { width: 16px; height: 16px; margin: 0 -2px; color: var(--_icon); } +.tc-btn .tc-icon { width: 1rem; height: 1rem; margin: 0 -2px; color: var(--_icon); } .tc-btn:active:not([aria-haspopup]) { scale: 0.97; } .tc-btn:disabled, .tc-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; } -:where(.tc-root) .tc-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--focus); } +:where(.tc-root) .tc-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 3px var(--focus); } /* default = upstream "outline" */ .tc-btn, .tc-btn--outline, .tc-btn--secondary { border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow-xs); } .tc-btn:hover, .tc-btn--outline:hover, .tc-btn--secondary:hover { background: color-mix(in srgb, var(--hover) 50%, var(--surface)); } -[data-theme="dark"] .tc-btn:not(.tc-btn--primary):not(.tc-btn--ghost):not(.tc-btn--danger-solid):not(.tc-btn--link):not(.tc-btn--warning) { background: oklch(1 0 0 / 0.0256); } -[data-theme="dark"] .tc-btn:not(.tc-btn--primary):not(.tc-btn--ghost):not(.tc-btn--danger-solid):not(.tc-btn--link):not(.tc-btn--warning):hover { background: oklch(1 0 0 / 0.05); } +[data-theme="dark"] .tc-btn:not(.tc-btn--primary):not(.tc-btn--ghost):not(.tc-btn--danger-solid):not(.tc-btn--link):not(.tc-btn--warning) { background: color-mix(in srgb, var(--border-strong) 32%, transparent); } +[data-theme="dark"] .tc-btn:not(.tc-btn--primary):not(.tc-btn--ghost):not(.tc-btn--danger-solid):not(.tc-btn--link):not(.tc-btn--warning):hover { background: color-mix(in srgb, var(--border-strong) 64%, transparent); } .tc-btn--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-primary); --_icon: currentColor; } .tc-btn--primary:hover { background: var(--accent-hover); } .tc-btn--primary:active { box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.08); } @@ -121,13 +120,13 @@ .tc-btn--warning { border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); color: var(--warn-text); box-shadow: none; --_icon: currentColor; } .tc-btn--link { border-color: transparent; background: none; box-shadow: none; padding: 0; height: auto; color: var(--fg); } .tc-btn--link:hover { text-decoration: underline !important; text-underline-offset: 4px; background: none; } -.tc-btn--xs { --_h: var(--control-xs); padding: 0 7px; gap: 4px; font-size: 12px; } -.tc-btn--xs .tc-icon { width: 14px; height: 14px; } -.tc-btn--sm { --_h: var(--control-sm); padding: 0 9px; gap: 6px; } -.tc-btn--lg { --_h: var(--control-lg); padding: 0 13px; } +.tc-btn--xs { --_h: var(--control-xs); padding: 0 0.4375rem; gap: 0.25rem; font-size: 0.75rem; } +.tc-btn--xs .tc-icon { width: 0.875rem; height: 0.875rem; } +.tc-btn--sm { --_h: var(--control-sm); padding: 0 0.5625rem; gap: 0.375rem; } +.tc-btn--lg { --_h: var(--control-lg); padding: 0 0.8125rem; } .tc-btn--icon { padding: 0; width: var(--_h); } .tc-btn--block { width: 100%; } -.tc-btn .tc-kbd { margin-right: -4px; } +.tc-btn .tc-kbd { margin-right: -0.25rem; } .tc-btn--primary .tc-kbd { background: rgb(255 255 255 / 0.16); color: var(--on-accent); } .tc-btn[data-busy] { pointer-events: none; } .tc-btn[data-busy] > .tc-icon:first-child { animation: tc-spin 0.9s linear infinite; } @@ -135,38 +134,44 @@ .tc-btngroup > .tc-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .tc-btngroup > .tc-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } +/* Native buttons keep a 44px hit area on coarse pointers without enlarging + every visible control. This also holds at the minimum native font size. */ +@media (pointer: coarse) { + .tc-btn::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; } +} + /* --------------------------------------------------------------- kbd -- */ /* Upstream Kbd: muted fill, no border, sans, 20px. */ -.tc-kbd { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 20px; height: 20px; padding: 0 4px; - border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--fg-muted); font: 500 12px/1 var(--font-sans); } -[data-theme="dark"] .tc-kbd { background: oklch(1 0 0 / 0.06); } -.tc-kbdgroup { display: inline-flex; align-items: center; gap: 4px; } +.tc-kbd { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; + border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--fg-muted); font: 500 0.75rem/1 var(--font-sans); } +[data-theme="dark"] .tc-kbd { background: color-mix(in srgb, var(--fg) 6%, transparent); } +.tc-kbdgroup { display: inline-flex; align-items: center; gap: 0.25rem; } /* ------------------------------------------------------------- forms -- */ -.tc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } -.tc-label { font-size: 14px; font-weight: 500; color: var(--fg); } -.tc-label-opt { font-weight: 400; color: var(--fg-muted); margin-left: 4px; } -.tc-hint { font-size: 12px; line-height: 18px; color: var(--fg-muted); margin: 0; } +.tc-field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } +.tc-label { font-size: 0.875rem; font-weight: 500; color: var(--fg); } +.tc-label-opt { font-weight: 400; color: var(--fg-muted); margin-left: 0.25rem; } +.tc-hint { font-size: 0.75rem; line-height: 1.125rem; color: var(--fg-muted); margin: 0; } .tc-hint--err { color: var(--danger-text); } /* Upstream Input: 10px radius wrapper, border-input, bg-background, shadow-xs/5, 30px tall. */ .tc-input, .tc-select { - height: var(--input); width: 100%; min-width: 0; padding: 0 11px; + height: var(--input); width: 100%; min-width: 0; padding: 0 0.6875rem; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); color: var(--fg); box-shadow: var(--shadow-xs); - font: inherit; font-size: 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); + font: inherit; font-size: 0.875rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } -[data-theme="dark"] .tc-input, [data-theme="dark"] .tc-select { background-color: oklch(1 0 0 / 0.0256); } -.tc-input::placeholder { color: var(--fg-muted); opacity: 0.8; } -.tc-input:focus, .tc-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent); } +[data-theme="dark"] .tc-input, [data-theme="dark"] .tc-select { background-color: color-mix(in srgb, var(--border-strong) 32%, transparent); } +.tc-input::placeholder { color: var(--fg-subtle); opacity: 1; } +.tc-input:focus, .tc-select:focus { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent); } .tc-input[aria-invalid="true"] { border-color: color-mix(in srgb, var(--danger) 36%, transparent); } -.tc-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); } -.tc-input--mono { font-family: var(--font-mono); font-size: 13px; } -.tc-input--lg { height: 34px; } +.tc-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); } +.tc-input--mono { font-family: var(--font-mono); font-size: 0.8125rem; } +.tc-input--lg { height: 2.125rem; } .tc-inputwrap { position: relative; display: flex; align-items: center; min-width: 0; } -.tc-inputwrap > .tc-icon { position: absolute; left: 10px; color: var(--fg-muted); pointer-events: none; } -.tc-inputwrap > .tc-icon ~ .tc-input { padding-left: 32px; } -.tc-inputwrap > .tc-btn { position: absolute; right: 3px; } -.tc-select { appearance: none; padding-right: 30px; +.tc-inputwrap > .tc-icon { position: absolute; left: 0.625rem; color: var(--fg-muted); pointer-events: none; } +.tc-inputwrap > .tc-icon ~ .tc-input { padding-left: 2rem; } +.tc-inputwrap > .tc-btn { position: absolute; right: 0.1875rem; } +.tc-select { appearance: none; padding-right: 1.875rem; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%; background-size: 4px 4px; background-repeat: no-repeat; } /* Native