{
  "id": "meter-room-scales",
  "name": "Scale Settings",
  "theme": "meter-room",
  "category": "Settings & Forms",
  "description": "Where the ceilings are declared, one per unit, with a live preview showing what a quiet meter looks like at each candidate ceiling.",
  "layout": "Ruled rows of unit and ceiling in mono, and a preview pair below showing the same data at two ceilings so the trade-off is visible before saving.",
  "modules": [
    {
      "key": "head",
      "name": "Scales header",
      "html": "\n<header class=\"sh\"><span class=\"k\">Theme settings</span><h1>Declared scales</h1><p>Every chart of a given unit uses the ceiling set here. There is no per-chart override and there is no auto-scale, so two screens showing the same unit are always directly comparable.</p></header>"
    },
    {
      "key": "rows",
      "name": "Unit ceilings",
      "html": "\n<section class=\"sc2\">\n<div class=\"rw\"><span class=\"un\">Electrical demand</span><span class=\"ut mn\">kW</span><span class=\"ct\"><input class=\"mn\" value=\"250\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 268 kW</span></div>\n<div class=\"rw\"><span class=\"un\">Electrical consumption</span><span class=\"ut mn\">kWh</span><span class=\"ct\"><input class=\"mn\" value=\"3000\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 2,690 kWh</span></div>\n<div class=\"rw\"><span class=\"un\">Gas</span><span class=\"ut mn\">kW</span><span class=\"ct\"><input class=\"mn\" value=\"400\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 344 kW</span></div>\n<div class=\"rw\"><span class=\"un\">Water</span><span class=\"ut mn\">m³/h</span><span class=\"ct\"><input class=\"mn\" value=\"12\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 9.4 m³/h</span></div>\n<div class=\"rw\"><span class=\"un\">Heat</span><span class=\"ut mn\">kW</span><span class=\"ct\"><input class=\"mn\" value=\"500\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 418 kW</span></div>\n</section>"
    },
    {
      "key": "preview",
      "name": "Ceiling preview",
      "html": "\n<section class=\"pv\"><span class=\"k\">The same meter at two ceilings</span><div class=\"pair\"><article><span class=\"k\">Ceiling 250 kW · proposed</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>125</span><span>0</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 25,91 50,93 75,92 100,93 125,92 150,91 175,92 200,92\"/></svg></div></div><p class=\"nt2\">The car park, correctly, as almost nothing.</p></article><article><span class=\"k\">Auto-scaled · not available</span><div class=\"row\"><div class=\"yl\"><span>13</span><span>12</span><span>11</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 25,40 50,80 75,52 100,86 125,44 150,20 175,58 200,64\"/></svg></div></div><p class=\"nt2\">The same twelve kilowatts, made to look like an event.</p></article></div></section>"
    },
    {
      "key": "save",
      "name": "Save bar",
      "html": "\n<footer class=\"sv\"><span class=\"wn mn\">RAISING A CEILING CHANGES EVERY HISTORIC CHART OF THAT UNIT. THE DATA DOES NOT CHANGE.</span><button class=\"pri\">Save scales</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "meter-room-scales",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:44:43+09:00",
    "updatedAt": "2026-09-02T01:44:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/meter-room-scales.json",
  "structure": "Ruled rows of unit and ceiling in mono, and a preview pair below showing the same data at two ceilings so the trade-off is visible before saving.",
  "html": "<div class=\"dz dz-meter-room-scales\" data-design=\"meter-room-scales\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Scales header\">\n<header class=\"sh\"><span class=\"k\">Theme settings</span><h1>Declared scales</h1><p>Every chart of a given unit uses the ceiling set here. There is no per-chart override and there is no auto-scale, so two screens showing the same unit are always directly comparable.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Unit ceilings\">\n<section class=\"sc2\">\n<div class=\"rw\"><span class=\"un\">Electrical demand</span><span class=\"ut mn\">kW</span><span class=\"ct\"><input class=\"mn\" value=\"250\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 268 kW</span></div>\n<div class=\"rw\"><span class=\"un\">Electrical consumption</span><span class=\"ut mn\">kWh</span><span class=\"ct\"><input class=\"mn\" value=\"3000\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 2,690 kWh</span></div>\n<div class=\"rw\"><span class=\"un\">Gas</span><span class=\"ut mn\">kW</span><span class=\"ct\"><input class=\"mn\" value=\"400\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 344 kW</span></div>\n<div class=\"rw\"><span class=\"un\">Water</span><span class=\"ut mn\">m³/h</span><span class=\"ct\"><input class=\"mn\" value=\"12\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 9.4 m³/h</span></div>\n<div class=\"rw\"><span class=\"un\">Heat</span><span class=\"ut mn\">kW</span><span class=\"ct\"><input class=\"mn\" value=\"500\"></span><span class=\"hd2 mn\">HIGHEST IN 12 MONTHS · 418 kW</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Ceiling preview\">\n<section class=\"pv\"><span class=\"k\">The same meter at two ceilings</span><div class=\"pair\"><article><span class=\"k\">Ceiling 250 kW · proposed</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>125</span><span>0</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 25,91 50,93 75,92 100,93 125,92 150,91 175,92 200,92\"/></svg></div></div><p class=\"nt2\">The car park, correctly, as almost nothing.</p></article><article><span class=\"k\">Auto-scaled · not available</span><div class=\"row\"><div class=\"yl\"><span>13</span><span>12</span><span>11</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 25,40 50,80 75,52 100,86 125,44 150,20 175,58 200,64\"/></svg></div></div><p class=\"nt2\">The same twelve kilowatts, made to look like an event.</p></article></div></section></section>\n<section class=\"dz-mod\" data-mod=\"save\" aria-label=\"Save bar\">\n<footer class=\"sv\"><span class=\"wn mn\">RAISING A CEILING CHANGES EVERY HISTORIC CHART OF THAT UNIT. THE DATA DOES NOT CHANGE.</span><button class=\"pri\">Save scales</button></footer></section>\n</div>",
  "css": "\n.dz-meter-room-scales { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px; max-width: 900px; }\n.dz-meter-room-scales .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-meter-room-scales .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-meter-room-scales h1 { font-size: 29px; font-weight: 600; letter-spacing: -.012em; margin: 5px 0 8px; }\n.dz-meter-room-scales .sh p { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); max-width: 68ch; }\n.dz-meter-room-scales .rw { display: grid; grid-template-columns: 1fr 90px 120px 260px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }\n.dz-meter-room-scales .un { font-size: 14px; }\n.dz-meter-room-scales .ut { color: var(--muted-foreground); }\n.dz-meter-room-scales .ct input { width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 3px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 16px; padding: 8px 10px; text-align: right; }\n.dz-meter-room-scales .ct input:focus { outline: none; border-color: var(--primary); }\n.dz-meter-room-scales .hd2 { color: var(--muted-foreground); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; }\n.dz-meter-room-scales .pv { margin-top: 24px; }\n.dz-meter-room-scales .pv .k { margin-bottom: 12px; }\n.dz-meter-room-scales .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n.dz-meter-room-scales .row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin-top: 8px; }\n\n.dz-meter-room-scales .ch { position: relative; height: 96px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-meter-room-scales .ch .gl { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in oklab, var(--muted-foreground) 40%, transparent); }\n.dz-meter-room-scales .ch svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.dz-meter-room-scales .ch polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-meter-room-scales .ch polyline.clip { stroke: var(--accent); stroke-width: 3; }\n.dz-meter-room-scales .ch .cap { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }\n.dz-meter-room-scales .ax { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); margin-top: 5px; }\n.dz-meter-room-scales .yl { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); display: flex; flex-direction: column; justify-content: space-between; height: 96px; text-align: right; }\n.dz-meter-room-scales .nt2 { margin: 10px 0 0; font-size: 13px; color: var(--muted-foreground); }\n.dz-meter-room-scales .sv { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }\n.dz-meter-room-scales .wn { color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; }\n.dz-meter-room-scales .pri { margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 10px 18px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-scales *, .dz-meter-room-scales *::before, .dz-meter-room-scales *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/meter-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}