532 lines
23 KiB
CSS
532 lines
23 KiB
CSS
*{box-sizing:border-box}
|
|
:root{
|
|
--bg:#090b10;
|
|
--bg-2:#0d1118;
|
|
--surface:#11161f;
|
|
--surface-2:#151d28;
|
|
--surface-3:#1a2431;
|
|
--surface-soft:rgba(20,28,39,.88);
|
|
--panel:rgba(20,28,39,.9);
|
|
--line:rgba(173,190,211,.12);
|
|
--line-strong:rgba(173,190,211,.24);
|
|
--text:#e8eef8;
|
|
--muted:#97a6bb;
|
|
--muted-2:#6f8199;
|
|
--accent:#4f8cff;
|
|
--accent-strong:#3e75d9;
|
|
--accent-soft:rgba(79,140,255,.14);
|
|
--danger:#ff6861;
|
|
--shadow:0 24px 60px rgba(0,0,0,.36);
|
|
--shadow-soft:0 10px 26px rgba(0,0,0,.24);
|
|
}
|
|
html,body{height:100%}
|
|
body{
|
|
margin:0;
|
|
background:radial-gradient(circle at top left,#131a25 0,#0d1118 38%,#090b10 100%);
|
|
color:var(--text);
|
|
font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
|
}
|
|
button,input,select{font:inherit}
|
|
button{user-select:none}
|
|
code{background:#121820;border-radius:4px;padding:1px 4px}
|
|
.app{min-height:100dvh}
|
|
.page-shell{width:100%}
|
|
.top-stage{
|
|
height:100dvh;
|
|
display:grid;
|
|
grid-template-columns:minmax(0,1fr) 320px;
|
|
gap:12px;
|
|
padding:12px 12px 0;
|
|
}
|
|
.map-section,.generation-section{min-height:0}
|
|
.map-section{min-width:0}
|
|
.canvas-shell{
|
|
position:relative;
|
|
height:100%;
|
|
border:1px solid var(--line);
|
|
border-radius:18px;
|
|
overflow:hidden;
|
|
background:linear-gradient(180deg,#0d131c 0,#0b1017 100%);
|
|
box-shadow:var(--shadow);
|
|
cursor:grab;
|
|
user-select:none;
|
|
touch-action:none;
|
|
}
|
|
.canvas-shell::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:0;
|
|
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
|
|
pointer-events:none;
|
|
}
|
|
.canvas-shell.panning{cursor:grabbing}
|
|
.canvas-shell.selecting,.canvas-shell.patch-intent{cursor:crosshair}
|
|
.canvas-stage{
|
|
position:absolute;
|
|
inset:0;
|
|
display:flex;
|
|
align-items:flex-end;
|
|
justify-content:center;
|
|
padding:12px;
|
|
}
|
|
.map-canvas{
|
|
display:block;
|
|
background:#0c1118;
|
|
border-radius:16px;
|
|
box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 40px rgba(0,0,0,.28);
|
|
}
|
|
.generation-section{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
overflow:auto;
|
|
padding-bottom:0;
|
|
}
|
|
.settings-card,
|
|
.summary-section,
|
|
.advanced-details{
|
|
background:var(--surface);
|
|
border:1px solid var(--line);
|
|
border-radius:16px;
|
|
box-shadow:var(--shadow-soft);
|
|
}
|
|
.settings-card{padding:12px}
|
|
.settings-header-card{padding:10px 12px}
|
|
.section-title-row{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:0 0 10px}
|
|
.section-title-row.compact{align-items:center;margin-bottom:10px}
|
|
.card-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
|
|
.card-heading.tight{margin-bottom:0}
|
|
.eyebrow{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);font-weight:900;margin-bottom:5px}
|
|
h2,h3{margin:0;letter-spacing:-.02em}h2{font-size:16px}h3{font-size:14px}
|
|
.field{display:block;margin-bottom:10px}.field:last-child{margin-bottom:0}
|
|
.field-label{display:block;margin:0 0 6px;color:#cad5e5;font-size:12px;font-weight:850;letter-spacing:.01em}
|
|
.input{
|
|
width:100%;
|
|
border:1px solid var(--line-strong);
|
|
background:var(--surface-3);
|
|
color:var(--text);
|
|
border-radius:10px;
|
|
padding:9px 10px;
|
|
outline:none;
|
|
transition:border-color .16s,box-shadow .16s,background .16s;
|
|
min-height:38px;
|
|
}
|
|
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,140,255,.18)}
|
|
.primary-button,.secondary-button,.ghost-button,.mode-button,.segmented-button{
|
|
border-radius:10px;
|
|
padding:9px 10px;
|
|
cursor:pointer;
|
|
font-weight:800;
|
|
transition:background .16s,border-color .16s,color .16s,transform .16s, box-shadow .16s;
|
|
min-height:38px;
|
|
}
|
|
.primary-button{border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:0 8px 16px rgba(79,140,255,.18)}
|
|
.primary-button:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
|
|
.secondary-button{border:1px solid rgba(79,140,255,.42);background:rgba(79,140,255,.10);color:#dbe7ff}
|
|
.secondary-button:hover{background:rgba(79,140,255,.16);border-color:rgba(79,140,255,.55)}
|
|
.ghost-button{border:1px solid var(--line-strong);background:transparent;color:#c8d2e1}.ghost-button:hover{background:rgba(255,255,255,.04);border-color:rgba(173,190,211,.32)}
|
|
.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled{background:#1a2029;color:#76859a;border-color:rgba(173,190,211,.08);box-shadow:none;cursor:not-allowed}
|
|
.button-stack{display:grid;gap:8px;margin-top:8px}.button-stack.two-col{grid-template-columns:1fr 1fr}.button-stack button{width:100%;font-size:12px;white-space:nowrap}
|
|
.segmented-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;width:100%}
|
|
.segmented-button,.mode-button{border:1px solid var(--line-strong);background:var(--surface-3);color:#d2dbeb;box-shadow:none;white-space:nowrap}
|
|
.segmented-button{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding-left:8px;padding-right:8px}
|
|
.segmented-button:hover,.mode-button:hover{background:#202b3a}
|
|
.segmented-button.active,.mode-button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 16px rgba(79,140,255,.16)}
|
|
.microcopy{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
|
|
.mode-grid{display:grid;grid-template-columns:1fr;gap:6px}.mode-button{min-height:32px;padding:7px 9px;font-size:12px;border-radius:9px;text-align:left}
|
|
.checkbox-row{display:flex;gap:8px;align-items:center;margin-top:9px;color:#d2dbeb;font-size:13px;cursor:pointer}.checkbox-row input{accent-color:var(--accent)}
|
|
.patch-status{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.patch-status.invalid{color:var(--danger);font-weight:750}
|
|
|
|
.map-dock{
|
|
position:absolute;
|
|
top:16px;
|
|
right:16px;
|
|
z-index:24;
|
|
width:min(240px,28vw);
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
}
|
|
.dock-card{
|
|
background:rgba(17,22,31,.86);
|
|
border:1px solid rgba(173,190,211,.16);
|
|
border-radius:14px;
|
|
box-shadow:0 16px 34px rgba(0,0,0,.26);
|
|
overflow:hidden;
|
|
backdrop-filter:blur(12px);
|
|
}
|
|
.dock-card summary{
|
|
list-style:none;
|
|
cursor:pointer;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:8px;
|
|
min-height:42px;
|
|
padding:10px 10px;
|
|
font-size:13px;
|
|
font-weight:900;
|
|
color:var(--text);
|
|
border-bottom:1px solid transparent;
|
|
}
|
|
.dock-card summary::-webkit-details-marker{display:none}
|
|
.dock-card[open] summary{border-bottom-color:rgba(173,190,211,.10)}
|
|
.summary-button{
|
|
border:1px solid rgba(173,190,211,.24);
|
|
background:rgba(255,255,255,.04);
|
|
color:var(--muted);
|
|
border-radius:999px;
|
|
padding:2px 7px;
|
|
font-size:10px;
|
|
font-weight:850;
|
|
line-height:1.4;
|
|
}
|
|
.dock-card:not([open]) .summary-button::before{content:"Open"}
|
|
.dock-card[open] .summary-button::before{content:"Close"}
|
|
.summary-button{font-size:0}.summary-button::before{font-size:10px}
|
|
.dock-body{padding:10px}.divider{height:1px;background:rgba(173,190,211,.10);margin:10px 0}
|
|
|
|
.stats{display:flex;flex-direction:column;gap:0}
|
|
.summary-section{margin:12px;padding:12px}
|
|
.summary-stats{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
|
|
.stat-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;align-items:baseline;padding:9px 10px;border-bottom:1px solid rgba(173,190,211,.08)}
|
|
.summary-stats .stat-row{display:grid;grid-template-columns:1fr;gap:4px;border-bottom:0;border-right:1px solid rgba(173,190,211,.08);min-height:58px}.summary-stats .stat-row:last-child{border-right:0}
|
|
.stat-row strong{color:#edf3fe;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;text-align:right;white-space:nowrap}.summary-stats .stat-row strong{text-align:left;font-size:15px}
|
|
.legend-grid{display:flex;flex-direction:column;gap:8px}.legend-row{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;min-height:20px;color:#d0dae9;font-size:12px;line-height:1.35}
|
|
.legend-line{display:inline-block;width:24px;height:4px;border-radius:999px;justify-self:center}.express-line{background:#87a087;border:1px solid #697d69}.road-line{background:#f5e182;border:1px solid #beaf8c}.river-major{background:#74a5ca;border:none;height:3px}.old-road-line{background:#fff;border:1px solid #8f8f86;height:3px}.minor-road-line{background:#fff;border:1px solid #a7a7a0;height:3px}.rail-line{background:#e8e8e8;height:1.5px;position:relative;border:none;margin-top:2px;border-radius:0}.rail-line::after{content:"";position:absolute;top:-2.5px;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,transparent,transparent 5px,#343a43 5px,#343a43 6px)}
|
|
.legend-swatch{display:inline-block;width:24px;height:14px;border-radius:4px;background:#f5f5f5;justify-self:center}.border-swatch{border:2px dashed rgba(171,145,171,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,1),0 0 0 1px rgba(255,255,255,1)}.admin-swatch{border:2px dashed rgba(190,180,190,.9);background:#fff}.terrain-swatch{background:linear-gradient(90deg,#7da564,#e3daa2,#98a58f)}.urban-swatch{background:#f0dccd;border:1px solid rgba(0,0,0,.1)}.sea-swatch{background:#9fc7df;border:1px solid rgba(70,120,160,.35)}
|
|
.legend-icon{display:inline-block;width:14px;height:14px;justify-self:center;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15)}.city-icon{background:#f06e6e}.town-icon{width:10px;height:10px;border-radius:3px;background:#f06e6e}.station-icon{background:#fff;border-color:#444}.industry-icon{background:#8caaa0;border-radius:3px}.port-icon{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:14px solid #4682c8;border-top:0;box-shadow:none;background:transparent;border-radius:0}.castle-icon{background:#b44646;border-radius:3px}
|
|
|
|
.zoom-control{position:absolute;left:18px;bottom:18px;z-index:25;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:rgba(12,17,24,.84);border:1px solid rgba(173,190,211,.16);box-shadow:0 14px 30px rgba(0,0,0,.26);backdrop-filter:blur(10px)}
|
|
.zoom-control button{min-width:58px;height:40px;border:0;border-bottom:1px solid rgba(173,190,211,.10);background:transparent;color:var(--text);font-weight:850;cursor:pointer}.zoom-control button:last-child{border-bottom:0;font-size:12px}.zoom-control button:hover{background:rgba(79,140,255,.12);color:#fff}
|
|
.map-hint{position:absolute;left:18px;top:18px;z-index:25;max-width:440px;background:rgba(14,27,50,.86);border:1px solid rgba(79,140,255,.36);color:#dce8ff;border-radius:13px;box-shadow:0 10px 26px rgba(0,0,0,.22);padding:10px 12px;font-size:13px;font-weight:800;backdrop-filter:blur(8px)}
|
|
.hidden{display:none!important}
|
|
.map-tooltip{position:absolute;z-index:26;pointer-events:none;min-width:200px;max-width:280px;background:rgba(17,22,31,.92);border:1px solid rgba(173,190,211,.16);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28);backdrop-filter:blur(10px);padding:10px 12px;color:var(--text);font-size:12px;line-height:1.5;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;font-weight:500}.map-tooltip.visible{opacity:1;transform:translateY(0)}
|
|
.generation-progress{position:absolute;inset:18px auto auto 18px;z-index:30;min-width:300px;max-width:440px;background:rgba(17,22,31,.96);border:1px solid rgba(173,190,211,.16);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.34);padding:14px 16px;color:var(--text);font-size:13px;line-height:1.5}.progress-title{font-weight:850;margin-bottom:4px}.progress-stage{color:var(--muted);margin-bottom:10px}.progress-timings{display:flex;flex-direction:column;gap:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#cfdbef}.progress-timing-row{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(173,190,211,.08);padding-top:4px}
|
|
.map-selection-svg{position:absolute;left:0;top:0;width:0;height:0;z-index:18;display:none;pointer-events:none;overflow:visible}.map-selection-svg polygon{fill:rgba(79,140,255,.16);stroke:rgba(79,140,255,.92);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}.map-selection-svg.invalid polygon{fill:rgba(255,104,97,.14);stroke:rgba(255,104,97,.92)}.map-selection{position:absolute;z-index:18;display:none;pointer-events:none;border:2px solid rgba(79,140,255,.88);background:rgba(79,140,255,.16);box-shadow:0 0 0 1px rgba(255,255,255,.20) inset,0 8px 22px rgba(79,140,255,.20)}.map-selection.invalid{border-color:rgba(255,104,97,.92);background:rgba(255,104,97,.14);box-shadow:0 0 0 1px rgba(255,255,255,.20) inset,0 8px 22px rgba(255,104,97,.18)}
|
|
.map-canvas.is-zooming{image-rendering:auto;pointer-events:auto}
|
|
|
|
.advanced-section{padding:0 12px 12px}
|
|
.advanced-details{overflow:hidden}
|
|
.advanced-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;color:var(--text);font-size:13px;font-weight:900}
|
|
.advanced-details summary::-webkit-details-marker{display:none}
|
|
.advanced-summary-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
|
|
.copy-debug-button{
|
|
border:1px solid rgba(79,140,255,.42);
|
|
background:rgba(79,140,255,.10);
|
|
color:#dbe7ff;
|
|
border-radius:999px;
|
|
padding:4px 10px;
|
|
font-size:11px;
|
|
font-weight:850;
|
|
line-height:1.2;
|
|
cursor:pointer;
|
|
}
|
|
.copy-debug-button:hover{background:rgba(79,140,255,.18);border-color:rgba(79,140,255,.58)}
|
|
.copy-debug-status{min-width:48px;color:var(--muted-2);font-size:11px;font-weight:800;text-align:right}
|
|
.copy-debug-status.error{color:var(--danger)}
|
|
.advanced-toggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:850;min-width:52px}
|
|
.advanced-details[open] .advanced-toggle{font-size:0}.advanced-details[open] .advanced-toggle::before{content:"Close";font-size:11px}
|
|
.advanced-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--line);padding:12px;background:var(--surface-2)}
|
|
.debug-note{background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:10px}.debug-note strong{display:block;font-size:12px;color:var(--text);margin-bottom:4px}.debug-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
|
|
|
|
@media (max-width:1280px){
|
|
.top-stage{grid-template-columns:minmax(0,1fr) 292px}
|
|
.summary-stats{grid-template-columns:repeat(3,minmax(120px,1fr))}
|
|
}
|
|
@media (max-width:980px){
|
|
.top-stage{height:auto;grid-template-columns:1fr;padding-top:10px}
|
|
.map-section{min-height:72dvh}
|
|
.generation-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
|
|
.settings-header-card{grid-column:1/-1}
|
|
.map-dock{width:min(220px,38vw)}
|
|
.advanced-body{grid-template-columns:1fr}
|
|
}
|
|
@media (max-width:720px){
|
|
.generation-section{grid-template-columns:1fr}
|
|
.summary-stats{grid-template-columns:1fr}
|
|
.summary-stats .stat-row{border-right:0;border-bottom:1px solid rgba(173,190,211,.08)}
|
|
.summary-stats .stat-row:last-child{border-bottom:0}
|
|
.map-dock{top:12px;right:12px;left:auto;width:min(210px,48vw)}
|
|
.map-hint{left:12px;right:12px;top:12px;max-width:none}
|
|
.zoom-control{left:12px;bottom:12px}
|
|
}
|
|
@media (max-width:560px){
|
|
.top-stage{padding:8px 8px 0;gap:8px}
|
|
.summary-section{margin:8px;padding:10px}
|
|
.advanced-section{padding:0 8px 8px}
|
|
.canvas-stage{padding:8px}
|
|
.map-dock{position:absolute;width:min(200px,58vw)}
|
|
.button-stack.two-col,.segmented-group{grid-template-columns:1fr}
|
|
}
|
|
|
|
.debug-panel{
|
|
background:var(--surface-3);
|
|
border:1px solid var(--line);
|
|
border-radius:14px;
|
|
padding:12px;
|
|
min-width:0;
|
|
}
|
|
.debug-panel.wide{grid-column:span 2}
|
|
.debug-panel-header{
|
|
display:flex;
|
|
align-items:flex-start;
|
|
justify-content:space-between;
|
|
gap:16px;
|
|
margin-bottom:10px;
|
|
}
|
|
.debug-panel-header p{
|
|
margin:0;
|
|
color:var(--muted);
|
|
font-size:12px;
|
|
line-height:1.45;
|
|
max-width:360px;
|
|
text-align:right;
|
|
}
|
|
.debug-note.flat{
|
|
background:rgba(255,255,255,.03);
|
|
box-shadow:none;
|
|
margin-top:8px;
|
|
}
|
|
.perf-history{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
}
|
|
.perf-empty{
|
|
border:1px dashed rgba(173,190,211,.18);
|
|
border-radius:12px;
|
|
padding:12px;
|
|
color:var(--muted);
|
|
font-size:12px;
|
|
text-align:center;
|
|
}
|
|
.perf-empty.inline{
|
|
grid-column:1/-1;
|
|
text-align:left;
|
|
}
|
|
.perf-run{
|
|
background:rgba(10,14,20,.34);
|
|
border:1px solid rgba(173,190,211,.12);
|
|
border-radius:12px;
|
|
overflow:hidden;
|
|
}
|
|
.perf-run summary::-webkit-details-marker{display:none}
|
|
.perf-summary{
|
|
list-style:none;
|
|
cursor:pointer;
|
|
display:grid;
|
|
grid-template-columns:42px 1.2fr .7fr 1fr 1fr;
|
|
gap:10px;
|
|
align-items:center;
|
|
padding:9px 10px;
|
|
color:#dbe5f4;
|
|
font-size:12px;
|
|
}
|
|
.perf-summary strong{
|
|
color:#fff;
|
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
|
|
font-size:12px;
|
|
}
|
|
.perf-summary span:last-child{color:#b8c8dd}
|
|
.perf-rank{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-width:32px;
|
|
border-radius:999px;
|
|
padding:3px 7px;
|
|
background:rgba(79,140,255,.14);
|
|
color:#dce8ff;
|
|
font-weight:900;
|
|
}
|
|
.timing-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,minmax(0,1fr));
|
|
gap:6px;
|
|
padding:0 10px 10px;
|
|
}
|
|
.timing-pill{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:8px;
|
|
padding:7px 8px;
|
|
border-radius:9px;
|
|
background:rgba(255,255,255,.04);
|
|
color:var(--muted);
|
|
font-size:11px;
|
|
min-width:0;
|
|
}
|
|
.timing-pill span{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.timing-pill strong{
|
|
color:#edf3fe;
|
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
|
|
font-size:11px;
|
|
white-space:nowrap;
|
|
}
|
|
.interaction-table{
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
border:1px solid rgba(173,190,211,.10);
|
|
border-radius:12px;
|
|
}
|
|
.interaction-row{
|
|
display:grid;
|
|
grid-template-columns:1.1fr .75fr .55fr .55fr;
|
|
gap:8px;
|
|
align-items:center;
|
|
min-height:34px;
|
|
padding:7px 9px;
|
|
border-bottom:1px solid rgba(173,190,211,.08);
|
|
color:var(--muted);
|
|
font-size:12px;
|
|
}
|
|
.interaction-row:last-child{border-bottom:0}
|
|
.interaction-row strong{
|
|
color:#fff;
|
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
|
|
font-size:12px;
|
|
}
|
|
@media (max-width:1280px){.debug-panel.wide{grid-column:1/-1}.timing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
@media (max-width:720px){.advanced-summary-actions{gap:6px}.copy-debug-status{display:none}.copy-debug-button{padding:4px 8px}.debug-panel-header{display:block}.debug-panel-header p{text-align:left;margin-top:6px}.perf-summary{grid-template-columns:36px 1fr;gap:7px}.perf-summary strong,.perf-summary span:nth-child(n+4){grid-column:2}.timing-grid{grid-template-columns:1fr}.interaction-row{grid-template-columns:1fr .8fr}}
|
|
.metric-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(6,minmax(0,1fr));
|
|
gap:6px;
|
|
margin-bottom:10px;
|
|
}
|
|
.metric-card{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:3px;
|
|
min-width:0;
|
|
padding:8px 9px;
|
|
border:1px solid rgba(173,190,211,.10);
|
|
border-radius:10px;
|
|
background:rgba(255,255,255,.035);
|
|
}
|
|
.metric-card span{
|
|
color:var(--muted);
|
|
font-size:10px;
|
|
font-weight:800;
|
|
text-transform:uppercase;
|
|
letter-spacing:.06em;
|
|
}
|
|
.metric-card strong{
|
|
color:#fff;
|
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
|
|
font-size:13px;
|
|
white-space:nowrap;
|
|
}
|
|
.metric-card small{
|
|
color:var(--muted-2);
|
|
font-size:10px;
|
|
line-height:1.25;
|
|
}
|
|
.perf-summary.patch{
|
|
grid-template-columns:42px 1.5fr .7fr 1.25fr 1fr;
|
|
}
|
|
.timing-pill.meta{
|
|
background:rgba(79,140,255,.08);
|
|
border:1px solid rgba(79,140,255,.12);
|
|
}
|
|
.aggregate-header,
|
|
.aggregate-row{
|
|
display:grid;
|
|
grid-template-columns:minmax(160px,1.3fr) .55fr .7fr .7fr .7fr;
|
|
gap:8px;
|
|
align-items:center;
|
|
}
|
|
.aggregate-header{
|
|
padding:0 9px 6px;
|
|
color:var(--muted-2);
|
|
font-size:10px;
|
|
font-weight:900;
|
|
text-transform:uppercase;
|
|
letter-spacing:.06em;
|
|
}
|
|
.aggregate-table{
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
border:1px solid rgba(173,190,211,.10);
|
|
border-radius:12px;
|
|
margin-bottom:10px;
|
|
}
|
|
.aggregate-row{
|
|
min-height:34px;
|
|
padding:7px 9px;
|
|
border-bottom:1px solid rgba(173,190,211,.08);
|
|
color:var(--muted);
|
|
font-size:12px;
|
|
}
|
|
.aggregate-row:last-child{border-bottom:0}
|
|
.aggregate-row span{color:#dbe5f4;font-weight:800}
|
|
.aggregate-row small{color:var(--muted-2)}
|
|
.aggregate-row strong{
|
|
color:#fff;
|
|
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
|
|
font-size:12px;
|
|
}
|
|
@media (max-width:1280px){.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
|
@media (max-width:720px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.aggregate-header,.aggregate-row{grid-template-columns:1fr .55fr}.aggregate-header strong,.aggregate-row strong{grid-column:2}.aggregate-header strong:nth-of-type(1)::before,.aggregate-row strong:nth-of-type(1)::before{content:"Avg ";color:var(--muted-2);font-family:inherit}.aggregate-header strong:nth-of-type(2)::before,.aggregate-row strong:nth-of-type(2)::before{content:"Max ";color:var(--muted-2);font-family:inherit}.aggregate-header strong:nth-of-type(3)::before,.aggregate-row strong:nth-of-type(3)::before{content:"P95 ";color:var(--muted-2);font-family:inherit}}
|
|
.diagnostic-grid{margin-bottom:10px}
|
|
.diagnostic-table{
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
border:1px solid rgba(173,190,211,.10);
|
|
border-radius:12px;
|
|
background:rgba(10,14,20,.22);
|
|
}
|
|
.diagnostic-table.stacked{margin-top:10px}
|
|
.diagnostic-row{
|
|
display:grid;
|
|
grid-template-columns:minmax(130px,1fr) minmax(90px,.75fr) minmax(120px,1fr);
|
|
gap:8px;
|
|
align-items:center;
|
|
min-height:34px;
|
|
padding:7px 9px;
|
|
border-bottom:1px solid rgba(173,190,211,.08);
|
|
color:var(--muted);
|
|
font-size:12px;
|
|
}
|
|
.diagnostic-row:last-child{border-bottom:0}
|
|
.diagnostic-row span{color:#dbe5f4;font-weight:800}
|
|
.diagnostic-row strong{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.diagnostic-row small{color:var(--muted-2);line-height:1.25}
|
|
.diagnostic-log{
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
border:1px solid rgba(173,190,211,.10);
|
|
border-radius:12px;
|
|
background:rgba(10,14,20,.22);
|
|
}
|
|
.diagnostic-log-row{
|
|
display:grid;
|
|
grid-template-columns:86px minmax(140px,.7fr) minmax(0,1.8fr);
|
|
gap:10px;
|
|
align-items:start;
|
|
padding:8px 10px;
|
|
border-bottom:1px solid rgba(173,190,211,.08);
|
|
color:var(--muted);
|
|
font-size:12px;
|
|
}
|
|
.diagnostic-log-row:last-child{border-bottom:0}
|
|
.diagnostic-log-row span{color:var(--muted-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;white-space:nowrap}
|
|
.diagnostic-log-row strong{color:#edf3fe;font-size:12px}
|
|
.diagnostic-log-row p{margin:0;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
|
|
.diagnostic-log-row.warning strong{color:#ffd38a}
|
|
.diagnostic-log-row.error strong{color:#ff9c96}
|
|
.diagnostic-log-row.info strong{color:#b8d0ff}
|
|
@media (max-width:720px){
|
|
.diagnostic-row{grid-template-columns:1fr;gap:3px}
|
|
.diagnostic-log-row{grid-template-columns:1fr;gap:4px}
|
|
}
|