/* Memory Lens composition uses FirmwareKit's existing tokens and panel styles. */
.lens-workspace,.lens-dialog {
  --blue: var(--green);
  --teal: #156e6b;
  --violet: #52762d;
  --amber: #946020;
  --border: var(--line);
  --panel: #fff;
  --text: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lens-start-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr); gap:24px; margin-bottom:24px; }
.lens-workspace .panel { margin-bottom:0; }
.lens-workspace .drop { margin:18px; padding:23px 14px; }
.lens-import-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:16px; }
.lens-import-actions button { margin-top:0; }
.lens-import-actions .example-button { background:#fff; color:var(--green); box-shadow:none; }
.lens-settings { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.lens-settings .help { margin-top:0; }
.lens-copy-summary { padding:12px 20px; border-top:1px dashed var(--line); }
.lens-view-nav { display:flex; flex-wrap:wrap; gap:0; margin-bottom:20px; }
.lens-view-nav button { display:flex; align-items:center; gap:8px; font-size:12px; padding:8px 12px; margin:0 -1px -1px 0; background:#fbfffc; border-radius:0; font-weight:500; }
.lens-view-nav button.active { background:var(--green); color:#fff; border-color:var(--green); position:relative; }
.lens-view-heading { margin-bottom:18px; border-left:3px solid var(--green); padding-left:14px; }
.lens-view-heading h2 { font-size:18px; }
.lens-view-heading p { font-size:12px; margin-top:4px; }
.lens-workspace .view { min-width:0; }
.lens-workspace .icon,.lens-dialog .icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.lens-workspace .primary,.lens-dialog .primary { background:var(--green); color:white; border-color:var(--green); }
.lens-workspace .primary:hover,.lens-dialog .primary:hover { background:#075e34; }
.lens-workspace button.small,.lens-dialog button.small { padding:5px 9px; font-size:12px; color:var(--green); }
.lens-workspace button.ghost,.lens-dialog button.ghost { background:transparent; }
.lens-workspace .muted,.lens-dialog .muted { color:var(--muted); }
.lens-workspace .meta,.lens-dialog .meta { font-size:12px; color:var(--muted); }
.lens-workspace .num,.lens-dialog .num { font-family:var(--mono); }
.lens-workspace .nowrap,.lens-dialog .nowrap { white-space:nowrap; }
.lens-workspace .bad,.lens-dialog .bad { color:var(--red); }
.lens-workspace .good,.lens-dialog .good { color:var(--green); }
.lens-workspace .badge.blue,.lens-dialog .badge.blue { color:var(--green); }
.lens-workspace .badge.teal,.lens-dialog .badge.teal { color:var(--teal); background:#eefaf7; }
.lens-workspace .badge.amber,.lens-dialog .badge.amber { color:var(--amber); background:#fff9eb; border-color:#d7c39d; }
.lens-workspace .note,.lens-dialog .note { font-size:12px; line-height:1.8; color:var(--muted); margin-top:12px; overflow-wrap:anywhere; }
.lens-workspace .message { border-left:3px solid var(--red); padding:12px; background:#fff1f1; color:var(--red); margin-bottom:18px; font-size:13px; }
.lens-workspace .message.info { border-color:var(--green); background:#effbf2; color:var(--ink); }
.lens-workspace .busy { opacity:.65; pointer-events:none; }
.lens-workspace .drop.dragover { background-color:#daf9e4; border-color:var(--green); }
.lens-workspace .statusbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; margin-bottom:20px; }
.lens-workspace .statusbar:empty { display:none; }
.lens-workspace .statusbar button { margin-left:auto; }
.lens-workspace .filename { overflow-wrap:anywhere; min-width:0; }
.lens-workspace .sep { color:#8ba895; }
.lens-workspace .metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:24px; }
.lens-workspace .metric { padding:18px; border:1px solid var(--line); border-top:3px solid var(--accent,var(--green)); background:white; box-shadow:3px 3px 0 #dceee2; min-width:0; }
.lens-workspace .metriclabel { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.lens-workspace .metricvalue { font-size:27px; line-height:1.3; font-weight:600; margin:12px 0; color:var(--ink); overflow-wrap:anywhere; }
.lens-workspace .metricvalue .unit { font-size:13px; color:var(--muted); font-weight:400; margin-left:5px; }
.lens-workspace .metricmeta { font-size:11px; margin-top:8px; color:var(--muted); }
.lens-workspace .meter { height:6px; background:#e4efe8; overflow:hidden; }
.lens-workspace .meter span { display:block; height:100%; background:var(--accent,var(--green)); }
.lens-workspace .overviewgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.lens-workspace .span2 { grid-column:1 / -1; }
.lens-workspace .subtitle { font-size:12px; color:var(--muted); margin-top:4px; }
.lens-workspace .segments { display:flex; height:30px; gap:2px; background:#e4efe8; margin:12px 0; }
.lens-workspace .segment { display:block; background:var(--seg); height:100%; border:0; padding:0; min-width:0; border-radius:0; }
.lens-workspace .segment:hover { filter:brightness(1.2); }
.lens-workspace .legend,.lens-dialog .legend { display:flex; flex-wrap:wrap; gap:10px 16px; font-size:11px; }
.lens-workspace .legend span,.lens-dialog .legend span { display:flex; align-items:center; gap:6px; }
.lens-workspace .swatch,.lens-dialog .swatch { display:inline-block; width:9px; height:9px; flex-shrink:0; }
.lens-workspace .composition-row { padding:12px 0; border-bottom:1px solid #dcebe1; display:flex; align-items:center; gap:9px; font-size:13px; }
.lens-workspace .composition-row:last-of-type { border-bottom:0; }
.lens-workspace .composition-row .value { margin-left:auto; }
.lens-workspace .composition-row .percent { color:var(--muted); font-size:11px; width:46px; text-align:right; }
.lens-workspace .treemap,.lens-dialog .treemap { height:280px; position:relative; overflow:hidden; background:#e4efe8; width:100%; }
.lens-workspace .tile,.lens-dialog .tile { position:absolute; border:2px solid white; border-radius:0; background:var(--tile); color:var(--ink); display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; overflow:hidden; min-width:0; white-space:normal; text-align:left; padding:5px; }
.lens-workspace .tile:hover,.lens-dialog .tile:hover { border-color:var(--green); filter:brightness(.98); }
.lens-workspace .tile:focus-visible,.lens-dialog .tile:focus-visible { outline-offset:-4px; z-index:2; }
.lens-workspace .tile strong,.lens-dialog .tile strong { font-family:var(--mono); font-size:inherit; font-weight:500; white-space:pre-wrap; overflow-wrap:anywhere; line-height:var(--tile-line-height,1.3); }
.lens-workspace .tile small,.lens-dialog .tile small { color:var(--muted); font-size:inherit; }
.lens-workspace .tile-label,.lens-dialog .tile-label { display:flex; flex-direction:column; gap:2px; max-width:100%; }
.lens-workspace .tile-label[data-mode=inline],.lens-dialog .tile-label[data-mode=inline] { flex-direction:row; gap:5px; align-items:center; }
.lens-workspace .quicklist { display:flex; flex-direction:column; }
.lens-workspace .quickitem,.lens-dialog .quickitem { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #dcebe1; font-size:13px; }
.lens-workspace .quickitem:last-child,.lens-dialog .quickitem:last-child { border-bottom:0; }
.lens-workspace .quickname { min-width:0; display:flex; flex-direction:column; gap:3px; }
.lens-workspace .quickname strong { font-family:var(--mono); font-weight:400; overflow-wrap:anywhere; font-size:12px; }
.lens-workspace .quickname span { color:var(--muted); font-size:11px; }
.lens-workspace .mini { height:5px; width:70px; background:#e4efe8; margin-top:5px; }
.lens-workspace .mini div { background:var(--green); height:100%; }
.lens-workspace .insight-preview { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); background:#f6fcf8; padding:13px; margin-bottom:12px; }
.lens-workspace .hinticon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:#fff3d9; color:var(--amber); border:1px solid #ddc8a1; flex-shrink:0; }
.lens-workspace .insight-preview strong { font-size:13px; font-weight:600; }
.lens-workspace .insight-preview p { font-size:12px; margin-top:5px; }
.lens-workspace .insight-preview .badge { margin-left:auto; }
.lens-workspace .toolbar,.lens-dialog .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.lens-workspace .toolbar input[type=search],.lens-dialog .toolbar input[type=search] { flex:1; min-width:180px; }
.lens-workspace .toolbar select,.lens-dialog .toolbar select { width:auto; max-width:100%; }
.lens-workspace .tablewrap,.lens-dialog .tablewrap { width:100%; overflow:auto; max-height:620px; }
.lens-workspace table,.lens-dialog table { font-size:12px; }
.lens-workspace th button { padding:0; border:0; background:transparent; color:var(--muted); font-size:11px; font-weight:600; }
.lens-workspace td .name { font-family:var(--mono); overflow-wrap:anywhere; min-width:140px; max-width:380px; }
.lens-workspace tr.clickable:hover { background:#edf9f1; }
.lens-workspace .right,.lens-dialog .right { text-align:right; }
.lens-workspace .tablefoot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 20px; font-size:12px; color:var(--muted); }
.lens-workspace .pager { padding:0; flex-wrap:wrap; }
.lens-workspace .empty p { font-size:13px; max-width:550px; margin:10px auto 0; }
.lens-workspace .empty button { margin-top:18px; }
.lens-workspace .empty h3 { font-size:16px; font-weight:600; margin:0; }
.lens-workspace .emptyregion { font-size:13px; line-height:1.8; }
.lens-workspace .regioncard { padding:16px; border:1px solid var(--line); background:#fbfffc; margin-bottom:14px; }
.lens-workspace .regioncard:last-child { margin-bottom:0; }
.lens-workspace .regiontop { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.lens-workspace .regionstats { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:10px; color:var(--muted); font-size:12px; }
.lens-workspace .insightcard { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:20px; border-bottom:1px solid var(--line); }
.lens-workspace .insightcard:last-child { border-bottom:0; }
.lens-workspace .insightcard h3 { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 8px; font-size:15px; }
.lens-workspace .insightcard p { font-size:13px; line-height:1.8; }
.lens-workspace .insightcard .evidence { margin:8px 0; font-size:12px; overflow-wrap:anywhere; }
.lens-workspace .insightcard button { margin-top:12px; }
.lens-workspace .toolsgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.lens-workspace .formrow,.lens-dialog .formrow { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.lens-workspace .formrow label,.lens-dialog .formrow label { display:flex; flex:1; flex-direction:column; gap:8px; min-width:120px; font-size:13px; font-weight:600; }
.lens-workspace .formrow input,.lens-dialog .formrow input { width:100%; }
.lens-dialog input[type=number] { border:1px solid #9cbda8; border-radius:1px; background:#fbfffc; color:var(--ink); padding:10px; font:14px var(--mono); }
.lens-workspace .toolresult { font-size:13px; margin-top:16px; line-height:1.8; overflow-wrap:anywhere; }
.lens-workspace .codeblock { padding:12px; border:1px dashed var(--line); background:#f2fbf5; font-family:var(--mono); font-size:12px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.lens-workspace .toolsection { margin-bottom:18px; }
.lens-workspace .toolsection:last-child { margin-bottom:0; }
.lens-workspace .toolsection h3 { margin:0 0 8px; font-size:13px; font-weight:600; }
.lens-workspace .comparemetrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.lens-workspace .comparemetric { padding:16px; border:1px solid var(--line); background:#fbfffc; }
.lens-workspace .comparemetric .delta { font-size:25px; margin:8px 0; }
.lens-workspace .tabsinline,.lens-dialog .tabsinline { display:flex; flex-wrap:wrap; gap:5px; }
.lens-workspace .tabsinline button.active,.lens-dialog .tabsinline button.active { background:#c8ffd9; border-color:var(--green); color:var(--ink); }
.lens-workspace .warnlist { padding-left:20px; margin:0; font-size:13px; line-height:1.9; color:var(--muted); }
.lens-workspace .footprint-preview-head { flex-wrap:wrap; }
.lens-workspace .footprint-preview-actions { display:flex; flex-wrap:wrap; gap:8px; }
.lens-workspace .footprint-title-button { border:0; padding:0; font-size:16px; color:var(--ink); font-weight:600; background:transparent; text-decoration:underline; text-underline-offset:4px; }
.lens-workspace .lens-guide { margin-top:24px; }
.lens-endnote { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:24px 0; }
.lens-dialog { background:#fff; color:var(--ink); font:14px/1.6 var(--mono); border:1px solid var(--green); border-radius:2px; width:min(720px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; box-shadow:5px 5px 0 #dceee2; }
.lens-dialog::backdrop { background:#103e2b66; }
.lens-dialog .dialoghead { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#e8f7ec,#f8fcf9); }
.lens-dialog .dialoghead h2 { overflow-wrap:anywhere; }
.lens-dialog .dialogbody { padding:20px; }
.lens-dialog .detailgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.lens-dialog .detailitem { font-size:13px; overflow-wrap:anywhere; }
.lens-dialog .detailitem span { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
.lens-dialog .helpsection { margin-bottom:18px; }
.lens-dialog .helpsection h3 { margin:0 0 8px; font-size:14px; }
.lens-dialog .helpsection p { font-size:13px; line-height:1.8; }
.lens-dialog .sources { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; }
.lens-dialog.footprint-window { width:min(1480px,calc(100% - 24px)); overflow:hidden; }
.lens-dialog.footprint-window[open] { display:flex; flex-direction:column; }
.lens-dialog.footprint-window .dialoghead { flex-shrink:0; }
.lens-dialog.footprint-window .dialogbody { overflow:auto; min-height:0; }
.lens-dialog.footprint-window .treemap { height:clamp(320px,55dvh,650px); }
.lens-dialog .tile.selected { border:3px solid var(--green); box-shadow:inset 0 0 0 1px white; }
.lens-dialog .footprint-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; }
.lens-dialog .footprint-detail { border:1px solid var(--line); padding:16px; background:#f6fcf8; align-self:start; min-width:0; }
.lens-dialog .footprint-detail h3 { margin:0 0 6px; font-size:15px; overflow-wrap:anywhere; }
.lens-dialog .detailvalue { font-size:24px; margin:12px 0; color:var(--green); }
.lens-dialog .footprint-context { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.lens-dialog .chart-empty { display:grid; place-content:center; height:100%; padding:20px; text-align:center; font-size:13px; color:var(--muted); }
body[data-page=memory-lens].footprint-open { overflow:hidden; }
@media(max-width:1100px) {
  .lens-start-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
  .lens-start-grid > .result-panel { grid-column:1 / -1; }
  .lens-start-grid .result-row { display:inline-block; width:50%; vertical-align:top; }
  .lens-workspace .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lens-dialog .footprint-layout { grid-template-columns:1fr; }
}
@media(max-width:850px) {
  .lens-workspace .overviewgrid,.lens-workspace .toolsgrid { grid-template-columns:1fr; }
  .lens-workspace .span2 { grid-column:auto; }
}
@media(max-width:550px) {
  .lens-start-grid { grid-template-columns:1fr; gap:20px; }
  .lens-start-grid > .result-panel { grid-column:auto; }
  .lens-start-grid .result-row { display:block; width:100%; }
  .lens-workspace .drop { margin:15px; }
  .lens-workspace .lens-view-nav button { font-size:11px; padding:7px 9px; }
  .lens-view-nav .icon { display:none; }
  .lens-workspace .metric { padding:13px; }
  .lens-workspace .metricvalue { font-size:22px; }
  .lens-workspace .metriclabel { flex-wrap:wrap; }
  .lens-workspace .metrics { gap:12px; }
  .lens-workspace .comparemetrics { grid-template-columns:1fr; }
  .lens-workspace .statusbar button { margin-left:0; }
  .lens-workspace .insight-preview .badge { display:none; }
  .lens-workspace .tablefoot { padding:14px; }
  .lens-workspace .composition-row { font-size:12px; gap:6px; }
  .lens-workspace .composition-row .percent { width:auto; }
  .lens-dialog .dialoghead,.lens-dialog .dialogbody { padding:15px; }
  .lens-dialog .detailgrid { grid-template-columns:1fr; }
  .lens-dialog .toolbar select,.lens-workspace .toolbar select { width:100%; }
  .lens-dialog .treemap { height:320px; }
}