/* ========================================================================== 
   BOSSEO DATA PATTERNS
   Canonical visual language shared by /design/ and the My Day widget runtime.
   Keep pattern-specific styling here so gallery examples and live widgets do
   not drift into separate component systems again.
   ========================================================================== */
.pattern-surface{
  --p-surface:var(--surface,#fff);--p-soft:var(--surface-2,#f8fafc);
  --p-ink:var(--ink,#0f172a);--p-ink-2:var(--ink-2,#334155);
  --p-muted:var(--ink-5,#64748b);--p-muted-2:#94a3b8;
  --p-line:var(--line,#e2e8f0);--p-line-strong:var(--line-strong,#cbd5e1);
  --p-blue:var(--brand,#2563eb);--p-blue-dark:#1d4ed8;--p-blue-soft:var(--brand-2,#eff6ff);
  --p-teal:var(--chart-teal,#0f766e);--p-teal-soft:#ecfdf5;
  --p-green:#16a34a;--p-green-soft:#f0fdf4;--p-amber:var(--chart-amber,#d97706);
  --p-amber-soft:#fffbeb;--p-red:#dc2626;--p-red-soft:#fef2f2;
  --p-plum:var(--chart-plum,#7c3aed);--p-plum-soft:#f5f3ff;
  --p-shadow:0 1px 2px rgba(15,23,42,.04),0 3px 10px rgba(15,23,42,.05);
  color:var(--p-ink);font-family:var(--sans,"Inter",sans-serif);
}
.pattern-card-header{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--p-line);padding:0 18px}
.pattern-card-header>div:first-child{min-width:0;display:flex;align-items:center;gap:10px}
.pattern-code{min-width:28px;height:25px;display:grid;place-items:center;border-radius:6px;background:var(--p-blue-soft);color:var(--p-blue-dark);font-size:10px;font-weight:800;letter-spacing:.05em}
.pattern-card-header h3{overflow:hidden;margin:0;font-size:17px;font-weight:650;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.pattern-body{min-height:0;flex:1;overflow:auto;padding:18px;background:var(--p-surface)}
.pattern-body.flush{padding:0}.pattern-body.table-scroll{overflow:auto}
.pattern-tag,.pattern-trend{flex:0 0 auto;border-radius:99px;padding:5px 8px;background:var(--p-soft);color:var(--p-muted);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pattern-tag.success,.pattern-trend.positive{background:var(--p-green-soft);color:#15803d}.pattern-tag.warning{background:var(--p-amber-soft);color:#b45309}.pattern-tag.danger{background:var(--p-red-soft);color:var(--p-red)}
.pattern-runtime{width:100%;min-height:100%;display:flex}.pattern-runtime>.pattern-body{width:100%}

/* Tables */
.pattern-surface .data-table{width:100%;min-width:900px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pattern-surface .data-table th{height:38px;background:var(--p-soft);padding:0 12px;color:var(--p-muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap}
.pattern-surface .data-table td{height:64px;border-bottom:1px solid var(--p-line);padding:8px 12px;color:var(--p-ink-2);font-size:12px;vertical-align:middle}
.pattern-surface .data-table tbody tr:hover{background:#fbfdff}.pattern-surface .data-table tbody tr:last-child td{border-bottom:0}.pattern-surface .data-table .num{text-align:right}
.pattern-surface .data-table td>strong,.pattern-surface .matter-cell strong,.pattern-surface .person strong{display:block;color:var(--p-ink);font-size:12px}
.pattern-surface .data-table td>small,.pattern-surface .matter-cell small,.pattern-surface .person small{display:block;margin-top:3px;color:var(--p-muted);font-size:10px}
.pattern-surface .matter-cell,.pattern-surface .person,.pattern-surface .avatar-name{display:inline-flex;align-items:center;gap:9px;min-width:0}
.pattern-surface .file-icon{width:34px;height:34px;display:grid;flex:0 0 34px;place-items:center;border-radius:8px;background:var(--p-blue-soft);color:var(--p-blue-dark);font-size:10px;font-weight:800}
.pattern-surface .file-icon.teal{background:var(--p-teal-soft);color:var(--p-teal)}.pattern-surface .file-icon.plum{background:var(--p-plum-soft);color:var(--p-plum)}.pattern-surface .file-icon.amber{background:var(--p-amber-soft);color:var(--p-amber)}
.pattern-surface .person img,.pattern-surface .avatar-name img,.pattern-surface .heat-person img,.pattern-surface .activity-avatar img{width:32px;height:32px;flex:0 0 32px;border-radius:8px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}
.pattern-surface .avatar-name img{width:27px;height:27px;flex-basis:27px;border-radius:7px}
.pattern-surface .badge{display:inline-flex;align-items:center;border:1px solid var(--p-line);border-radius:99px;padding:4px 7px;background:var(--p-soft);color:var(--p-ink-2);font-size:9px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.pattern-surface .badge.info{border-color:#bfdbfe;background:var(--p-blue-soft);color:var(--p-blue-dark)}.pattern-surface .badge.success{border-color:#bbf7d0;background:var(--p-green-soft);color:#15803d}.pattern-surface .badge.warning{border-color:#fde68a;background:var(--p-amber-soft);color:#b45309}.pattern-surface .badge.danger{border-color:#fecaca;background:var(--p-red-soft);color:var(--p-red)}.pattern-surface .badge.neutral{background:var(--p-soft);color:var(--p-muted)}
.pattern-surface .danger-text{color:var(--p-red)!important}.pattern-surface .success-text{color:var(--p-green)}
.pattern-surface .priority{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:var(--p-soft);color:var(--p-muted);font-weight:700}.pattern-surface .priority.critical{background:var(--p-red-soft);color:var(--p-red)}.pattern-surface .priority.high{background:var(--p-amber-soft);color:var(--p-amber)}
.pattern-surface .total-row{background:var(--p-soft)}.pattern-surface .capacity{min-width:150px;display:grid;grid-template-columns:minmax(80px,1fr) 35px;align-items:center;gap:8px}.pattern-surface .capacity::before{content:"";grid-column:1;grid-row:1;height:7px;border-radius:99px;background:var(--p-line)}.pattern-surface .capacity i{grid-column:1;grid-row:1;width:var(--load);height:7px;border-radius:99px;background:var(--p-blue)}.pattern-surface .capacity b{color:var(--p-ink-2);font-size:10px}

/* Charts */
.pattern-surface .chart-body{display:flex;flex-direction:column}.pattern-surface .chart-summary{display:flex;gap:30px;margin-bottom:10px}.pattern-surface .chart-summary span{display:flex;flex-direction:column}.pattern-surface .chart-summary small{color:var(--p-muted);font-size:10px}.pattern-surface .chart-summary strong{margin-top:2px;font-size:22px;letter-spacing:-.03em}.pattern-surface .chart-summary.compact{justify-content:space-between}
.pattern-surface .bar-chart,.pattern-surface .line-chart{width:100%;height:260px;min-width:440px;min-height:190px;max-height:260px;flex:0 1 260px;overflow:visible}.pattern-surface .grid-lines line{stroke:var(--p-line);stroke-width:1}.pattern-surface .axis-labels text,.pattern-surface .month-labels text{fill:var(--p-muted);font:9px var(--sans,"Inter",sans-serif);text-anchor:middle}.pattern-surface .axis-labels text{text-anchor:start}.pattern-surface .bars rect{rx:4px}.pattern-surface .bars.billed rect{fill:var(--p-blue)}.pattern-surface .bars.collected rect{fill:#5eead4}
.pattern-surface .chart-legend{display:flex;justify-content:center;gap:20px;color:var(--p-muted);font-size:10px}.pattern-surface .chart-legend span{display:inline-flex;align-items:center;gap:5px}.pattern-surface .chart-legend i{width:9px;height:9px;border-radius:3px}.pattern-surface .legend-blue{background:var(--p-blue)}.pattern-surface .legend-teal{background:#5eead4}.pattern-surface .legend-amber{background:var(--p-amber)}
.pattern-surface .line-chart .area{fill:url(#leadArea)}.pattern-surface .line-chart polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pattern-surface .lead-line{stroke:var(--p-blue)}.pattern-surface .consult-line{stroke:var(--p-teal)}.pattern-surface .signed-line{stroke:var(--p-amber)}
.day-widget[data-day-widget="conversion"] .pattern-body{justify-content:space-between;gap:10px}
.day-widget[data-day-widget="conversion"] .chart-summary{display:grid;width:100%;margin:0 auto;gap:10px 24px}
.day-widget[data-day-widget="conversion"] .line-chart{width:100%;height:auto;min-width:0;min-height:0;max-height:none;aspect-ratio:1000/245;flex:0 0 auto;margin:auto}
.day-widget[data-day-widget="conversion"][data-day-span="2"] .chart-summary{max-width:920px;grid-template-columns:repeat(4,minmax(0,1fr))}
.day-widget[data-day-widget="conversion"][data-day-span="2"] .line-chart{max-width:920px}
.day-widget[data-day-widget="conversion"][data-day-span="1"] .chart-summary{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
.pattern-surface .donut-layout{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(190px,1.1fr);align-items:center;gap:22px}.pattern-surface .donut{width:min(210px,100%);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--donut-bg,conic-gradient(var(--p-blue) 0 42%,var(--p-teal) 42% 68%,var(--p-amber) 68% 86%,var(--p-plum) 86% 100%))}.pattern-surface .donut::before{content:"";grid-area:1/1;width:67%;aspect-ratio:1;border-radius:50%;background:var(--p-surface);box-shadow:0 0 0 1px var(--p-line)}.pattern-surface .donut>div{z-index:1;grid-area:1/1;display:flex;flex-direction:column;align-items:center}.pattern-surface .donut strong{font-size:30px;line-height:1}.pattern-surface .donut span{margin-top:4px;color:var(--p-muted);font-size:10px}
.pattern-surface .legend-list{margin:0;padding:0;list-style:none}.pattern-surface .legend-list li{display:grid;grid-template-columns:10px 1fr auto 30px;align-items:center;gap:8px;border-bottom:1px solid var(--p-line);padding:10px 0}.pattern-surface .legend-list li:last-child{border-bottom:0}.pattern-surface .legend-list span,.pattern-surface .legend-list small{color:var(--p-muted);font-size:10px}.pattern-surface .swatch{width:9px;height:9px;border-radius:3px}.pattern-surface .swatch.blue{background:var(--p-blue)}.pattern-surface .swatch.teal{background:var(--p-teal)}.pattern-surface .swatch.amber{background:var(--p-amber)}.pattern-surface .swatch.plum{background:var(--p-plum)}

/* Graphs */
.pattern-surface .network-graph{position:relative;min-height:340px;overflow:hidden;background:radial-gradient(circle at center,#f8fbff 0,var(--p-surface) 66%)}.pattern-surface .network-graph>svg{position:absolute;inset:0;width:100%;height:100%}.pattern-surface .network-lines line{stroke:#b8c5d8;stroke-width:2;stroke-dasharray:5 5}
.pattern-surface .node{position:absolute;min-width:110px;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:3px 7px;border:1px solid var(--p-line);border-radius:9px;background:var(--p-surface);padding:9px 10px;box-shadow:var(--p-shadow);transform:translate(-50%,-50%)}.pattern-surface .node i,.pattern-surface .node img{grid-row:1/3;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;object-fit:cover;color:var(--p-blue);font-style:normal;font-weight:800}.pattern-surface .node strong{font-size:10px}.pattern-surface .node small{color:var(--p-muted);font-size:8px}.pattern-surface .node-main{left:50%;top:48%;border-color:#93c5fd;background:var(--p-blue-soft)}.pattern-surface .node-main i{background:#dbeafe}.pattern-surface .node-a{left:20%;top:21%}.pattern-surface .node-b{left:81%;top:21%}.pattern-surface .node-c{left:17%;top:76%}.pattern-surface .node-d{left:82%;top:76%}.pattern-surface .node-e{left:50%;top:88%}
.pattern-surface .flow-graph{min-width:520px;display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:10px}.pattern-surface .flow-node{min-width:0;min-height:70px;display:flex;align-items:center;gap:10px;border:1px solid var(--p-line);border-radius:9px;background:var(--p-soft);padding:11px}.pattern-surface .flow-node>i{width:32px;height:32px;display:grid;flex:0 0 32px;place-items:center;border-radius:8px;background:var(--p-surface);color:var(--p-muted);font-style:normal;font-weight:800}.pattern-surface .flow-node span{min-width:0;display:flex;flex-direction:column}.pattern-surface .flow-node strong{font-size:11px}.pattern-surface .flow-node small{margin-top:3px;color:var(--p-muted);font-size:9px}.pattern-surface .flow-node.done{border-color:#bbf7d0;background:var(--p-green-soft)}.pattern-surface .flow-node.done>i{color:var(--p-green)}.pattern-surface .flow-node.active{border-color:#fcd34d;background:var(--p-amber-soft);box-shadow:0 0 0 3px rgba(217,119,6,.08)}.pattern-surface .flow-node.active>i{color:var(--p-amber)}.pattern-surface .flow-arrow{color:var(--p-muted-2);font-style:normal;text-align:center}
.day-widget[data-day-widget="workflow-graph"] .flow-graph{width:100%;min-width:0}
.day-widget[data-day-widget="workflow-graph"][data-day-span="2"] .flow-graph{grid-template-columns:repeat(5,minmax(0,1fr) 18px) minmax(0,1fr);gap:8px}
.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-graph{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);grid-template-rows:70px 18px 70px 18px 70px;gap:5px 10px;align-content:center}
.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node{min-height:0;height:70px}
.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node:nth-child(1){grid-area:1/1}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-arrow:nth-child(2){grid-area:1/2}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node:nth-child(3){grid-area:1/3}
.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-arrow:nth-child(4){grid-area:2/3;transform:rotate(90deg)}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node:nth-child(5){grid-area:3/3}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-arrow:nth-child(6){grid-area:3/2;transform:rotate(180deg)}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node:nth-child(7){grid-area:3/1}
.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-arrow:nth-child(8){grid-area:4/1;transform:rotate(90deg)}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node:nth-child(9){grid-area:5/1}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-arrow:nth-child(10){grid-area:5/2}.day-widget[data-day-widget="workflow-graph"][data-day-span="1"] .flow-node:nth-child(11){grid-area:5/3}
.pattern-surface .heatmap-wrap{min-width:480px}.pattern-surface .heatmap{display:grid;grid-template-columns:125px repeat(5,minmax(48px,1fr));gap:7px;align-items:center}.pattern-surface .heatmap>b{color:var(--p-muted);font-size:9px;text-align:center}.pattern-surface .heat-person{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600}.pattern-surface .heat-person img{width:27px;height:27px;flex-basis:27px;border-radius:7px}.pattern-surface .heatmap>i{height:46px;display:grid;place-items:center;border-radius:7px;font-style:normal;font-size:10px;font-weight:700}.pattern-surface .heat-1{background:#eff6ff;color:#1d4ed8}.pattern-surface .heat-2{background:#dbeafe;color:#1d4ed8}.pattern-surface .heat-3{background:#93c5fd;color:#172554}.pattern-surface .heat-4{background:#3b82f6;color:#fff}.pattern-surface .heat-5{background:#1e3a8a;color:#fff}.pattern-surface .heat-key{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:18px;color:var(--p-muted);font-size:9px}.pattern-surface .heat-key i{width:18px;height:10px;border-radius:3px}

/* Lists and timelines */
.pattern-surface .priority-list,.pattern-surface .message-list,.pattern-surface .document-list,.pattern-surface .vertical-timeline,.pattern-surface .activity-timeline,.pattern-surface .lifecycle-timeline{margin:0;padding:0;list-style:none}
.pattern-surface .priority-list li{min-height:67px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;border-bottom:1px solid var(--p-line);padding:9px 16px}.pattern-surface .priority-list li:last-child,.pattern-surface .message-list li:last-child,.pattern-surface .document-list li:last-child{border-bottom:0}.pattern-surface .rank{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:var(--p-soft);color:var(--p-muted);font-size:10px;font-weight:800}.pattern-surface .rank.urgent{background:var(--p-red-soft);color:var(--p-red)}.pattern-surface .priority-list div,.pattern-surface .document-list div{min-width:0;display:flex;flex-direction:column}.pattern-surface .priority-list strong,.pattern-surface .document-list strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.pattern-surface .priority-list small,.pattern-surface .document-list small{margin-top:3px;color:var(--p-muted);font-size:9px}
.pattern-surface .message-list li{min-height:86px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;border-bottom:1px solid var(--p-line);padding:12px 16px}.pattern-surface .message-list li.unread{background:#fbfdff;box-shadow:inset 3px 0 var(--p-blue)}.pattern-surface .client-avatar{width:38px;height:38px;display:block;overflow:hidden;border-radius:9px;background:var(--p-blue-soft);box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}.pattern-surface .client-avatar img{width:100%;height:100%;display:block;object-fit:cover}.pattern-surface .message-list li>div{min-width:0}.pattern-surface .message-list li>div>span{display:flex;justify-content:space-between;gap:10px}.pattern-surface .message-list strong{font-size:11px}.pattern-surface .message-list time{color:var(--p-muted);font-size:9px}.pattern-surface .message-list p{overflow:hidden;margin:5px 0;color:var(--p-ink-2);font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.pattern-surface .message-list small{color:var(--p-blue-dark);font-size:9px}
.pattern-surface .document-list li{min-height:72px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;border-bottom:1px solid var(--p-line);padding:10px 16px}.pattern-surface .doc-type{width:42px;height:32px;display:grid;place-items:center;border-radius:7px;background:var(--p-blue-soft);color:var(--p-blue-dark);font-size:8px;font-weight:800}.pattern-surface .doc-type.pdf{background:var(--p-red-soft);color:var(--p-red)}.pattern-surface .doc-type.sheet{background:var(--p-green-soft);color:var(--p-green)}
.pattern-surface .vertical-timeline{position:relative}.pattern-surface .vertical-timeline::before{content:"";position:absolute;top:17px;bottom:17px;left:92px;width:2px;background:var(--p-line)}.pattern-surface .vertical-timeline li{position:relative;min-height:78px;display:grid;grid-template-columns:70px 20px 1fr;gap:11px}.pattern-surface .vertical-timeline time{padding-top:3px;color:var(--p-ink-2);font-size:10px;font-weight:700;text-align:right}.pattern-surface .vertical-timeline li>i{z-index:1;width:12px;height:12px;margin-top:2px;border:3px solid var(--p-surface);border-radius:50%;background:var(--p-muted-2);box-shadow:0 0 0 1px var(--p-line-strong)}.pattern-surface .vertical-timeline li.current>i{background:var(--p-green);box-shadow:0 0 0 3px #dcfce7}.pattern-surface .vertical-timeline li>div{display:flex;flex-direction:column;align-items:flex-start}.pattern-surface .vertical-timeline strong{margin-top:5px;font-size:11px}.pattern-surface .vertical-timeline small{margin-top:3px;color:var(--p-muted);font-size:9px}
.pattern-surface .matter-summary{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--p-line);padding-bottom:16px}.pattern-surface .matter-summary>div{display:flex;flex:1;flex-direction:column}.pattern-surface .matter-summary>div>strong{font-size:13px}.pattern-surface .matter-summary>div>small{margin-top:3px;color:var(--p-muted);font-size:10px}.pattern-surface .lifecycle-timeline{position:relative;display:grid;grid-template-columns:repeat(6,minmax(86px,1fr));gap:0;margin-top:36px}.pattern-surface .lifecycle-timeline::before{content:"";position:absolute;top:16px;right:8%;left:8%;height:3px;background:var(--p-line)}.pattern-surface .lifecycle-timeline::after{content:"";position:absolute;top:16px;left:8%;width:51%;height:3px;background:var(--p-blue)}.pattern-surface .lifecycle-timeline li{z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}.pattern-surface .lifecycle-timeline li>i{width:34px;height:34px;display:grid;place-items:center;border:4px solid var(--p-surface);border-radius:50%;background:var(--p-line);color:var(--p-muted);font-size:10px;font-style:normal;box-shadow:0 0 0 1px var(--p-line-strong)}.pattern-surface .lifecycle-timeline li.complete>i{background:var(--p-blue);color:#fff}.pattern-surface .lifecycle-timeline li.active>i{background:var(--p-amber);color:#fff;box-shadow:0 0 0 3px #fef3c7}.pattern-surface .lifecycle-timeline strong{margin-top:9px;font-size:9px}.pattern-surface .lifecycle-timeline small{margin-top:3px;color:var(--p-muted);font-size:8px}
.pattern-surface .activity-timeline{position:relative}.pattern-surface .activity-timeline::before{content:"";position:absolute;top:18px;bottom:18px;left:17px;width:2px;background:var(--p-line)}.pattern-surface .activity-timeline li{position:relative;min-height:88px;display:grid;grid-template-columns:36px 1fr;gap:11px}.pattern-surface .activity-avatar,.pattern-surface .activity-icon{z-index:1;width:35px;height:35px;display:grid;place-items:center;border:3px solid var(--p-surface);border-radius:9px;background:var(--p-blue-soft);color:var(--p-blue);font-style:normal;font-weight:800}.pattern-surface .activity-avatar img{width:29px;height:29px;border-radius:6px}.pattern-surface .activity-icon.mail{background:var(--p-teal-soft);color:var(--p-teal)}.pattern-surface .activity-icon.note{background:var(--p-amber-soft);color:var(--p-amber)}.pattern-surface .activity-timeline li>div{display:flex;flex-direction:column}.pattern-surface .activity-timeline strong{font-size:11px}.pattern-surface .activity-timeline small{margin-top:3px;color:var(--p-muted);font-size:9px}.pattern-surface .activity-timeline p{margin:7px 0 0;color:var(--p-ink-2);font-size:10px;line-height:1.4}

@media(max-width:720px){
  .pattern-surface .chart-summary{gap:14px;justify-content:space-between}
  .pattern-surface .chart-summary strong{font-size:18px}
  .pattern-surface .bar-chart,.pattern-surface .line-chart{width:100%;height:auto;min-width:0;min-height:175px;aspect-ratio:620/260}
  .pattern-surface .donut-layout{grid-template-columns:1fr}.pattern-surface .donut{width:165px;margin:0 auto}
  .pattern-surface .network-graph{min-width:0;min-height:310px}
  .pattern-surface .network-graph .node{min-width:84px;padding:7px 8px}
  .pattern-surface .network-graph .node strong{font-size:9px}.pattern-surface .network-graph .node small{font-size:7px}
  .pattern-surface .network-graph,.pattern-surface .flow-graph,.pattern-surface .heatmap-wrap{overflow:auto}
}