/* Hub map look (L5a). Loaded AFTER styles.css. Colours, radii, shadows, fonts come only from --hm-* variables. */
:root {
  --hm-radius: 18px; --hm-radius-s: 10px; --hm-radius-pill: 999px; --hm-gap: 16px; --hm-gap-s: 8px;
  --hm-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --hm-font-size: 14px; --hm-font-size-s: 11px; --hm-font-size-xl: 44px; --hm-weight-light: 300; --hm-weight-bold: 600;
  --hm-press-ms: 120ms; --hm-flash-ms: 900ms;
  --hm-bg-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hm-teal-1:#c9f5ee; --hm-teal-2:#93ebdc; --hm-teal-3:#5ddcc8; --hm-teal-4:#2fc7b3; --hm-teal-5:#17a897; --hm-teal-6:#0f8a7c; --hm-teal-7:#0b6b61; --hm-teal-8:#074a44;
  --hm-purple-1:#e6dcff; --hm-purple-2:#cdb9ff; --hm-purple-3:#b393f5; --hm-purple-4:#9a74e6; --hm-purple-5:#7f5bd0; --hm-purple-6:#6747b0; --hm-purple-7:#4f3589; --hm-purple-8:#372463;
  --hm-blue-1:#d4ecff; --hm-blue-2:#a3d6fb; --hm-blue-3:#6fbcf2; --hm-blue-4:#3fa0e6; --hm-blue-5:#2a85cc; --hm-blue-6:#1f6aa8; --hm-blue-7:#164f81; --hm-blue-8:#0e3558;
  --hm-pink-1:#ffe0ee; --hm-pink-2:#ffc2dc; --hm-pink-3:#ffa1c8; --hm-pink-4:#f77fb0; --hm-pink-5:#e05c95; --hm-pink-6:#bf4378; --hm-pink-7:#92305a; --hm-pink-8:#66203d;
  --hm-orange-1:#ffe9c7; --hm-orange-2:#ffd08f; --hm-orange-3:#ffb85c; --hm-orange-4:#ff9f2e; --hm-orange-5:#ee8512; --hm-orange-6:#c96a0b; --hm-orange-7:#99500a; --hm-orange-8:#683507;
  --hm-green-1:#d3f8df; --hm-green-2:#a4efbd; --hm-green-3:#6fe19a; --hm-green-4:#3fcd7c; --hm-green-5:#28b066; --hm-green-6:#1d8e52; --hm-green-7:#156c3f; --hm-green-8:#0d4a2b;
  --hm-white-1:#ffffff; --hm-white-2:#f7f8fb; --hm-white-3:#eceef4; --hm-white-4:#dde0ea; --hm-white-5:#c9cddb; --hm-white-6:#b0b5c8; --hm-white-7:#9399ad; --hm-white-8:#777d92;
  --hm-charcoal-1:#4a4d5c; --hm-charcoal-2:#3d4050; --hm-charcoal-3:#353747; --hm-charcoal-4:#2e3040; --hm-charcoal-5:#2a2c3a; --hm-charcoal-6:#232532; --hm-charcoal-7:#1c1e2a; --hm-charcoal-8:#10111a;
  --hm-grad-blue-purple:   linear-gradient(135deg,#3fa0e6 0%,#9a74e6 100%);
  --hm-grad-pink-purple:   linear-gradient(135deg,#ffa1c8 0%,#b393f5 100%);
  --hm-grad-orange-yellow: linear-gradient(135deg,#ee8512 0%,#ffd45c 100%);
  --hm-grad-teal-blue:     linear-gradient(135deg,#2fc7b3 0%,#2a85cc 100%);
  --hm-grad-green-teal:    linear-gradient(135deg,#3fcd7c 0%,#17a897 100%);
  --hm-grad-pink-orange:   linear-gradient(135deg,#f77fb0 0%,#ff9f2e 100%);
  --hm-grad-sky-blue:      linear-gradient(135deg,#a3d6fb 0%,#2a85cc 100%);
  --hm-grad-purple-dusk:   linear-gradient(160deg,#9a74e6 0%,#372463 100%);
  --hm-grad-charcoal:      linear-gradient(160deg,#3d4050 0%,#232532 100%);
  --hm-grad-accent:        linear-gradient(135deg,#7f5bd0 0%,#5d7be0 100%);
}
:root[data-hm-theme="dark"] {
  --hm-bg: #2a2c3a;
  --hm-panel: #353747; --hm-panel-2: #2e3040; --hm-panel-edge: rgba(255,255,255,.12);
  --hm-text: #f3f4f8; --hm-muted: #9a9db0; --hm-accent: #7f5bd0; --hm-accent-2: #5d7be0;
  --hm-ok: #3fcd7c; --hm-warn: #ff9f2e; --hm-bad: #f0527a;
  --hm-shadow-raised: 0 10px 24px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.30);
  --hm-shadow-pressed: inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 rgba(0,0,0,0);
  --hm-shadow-inset: inset 0 2px 6px rgba(0,0,0,.35);
  --hm-highlight: inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-hm-theme="colourful"] {
  --hm-bg: #eef0f5;
  --hm-bg-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hm-panel: #ffffff; --hm-panel-2: #f6f7fb; --hm-panel-edge: rgba(30,35,60,.10);
  --hm-text: #2a2c3a; --hm-muted: #8a8fa6; --hm-accent: #17a897; --hm-accent-2: #9a74e6;
  --hm-ok: #28b066; --hm-warn: #ee8512; --hm-bad: #f0523e;
  --hm-shadow-raised: 0 8px 20px rgba(40,50,90,.14), 0 1px 3px rgba(40,50,90,.10);
  --hm-shadow-pressed: inset 0 3px 7px rgba(40,50,90,.22);
  --hm-shadow-inset: inset 0 2px 5px rgba(40,50,90,.15);
  --hm-highlight: inset 0 1px 0 rgba(255,255,255,.8);
}
:root:not([data-hm-theme]) { color-scheme: dark; }
body.hm-themed, .hm-root { background-color: var(--hm-bg); background-image: var(--hm-bg-grain); color: var(--hm-text); font-family: var(--hm-font); font-size: var(--hm-font-size); }

/* === L5a OVERRIDES: restyle the plain shell === */
:root[data-hm-theme] {
  --bg: var(--hm-bg); --card: var(--hm-panel); --text: var(--hm-text); --muted: var(--hm-muted);
  --line: var(--hm-panel-edge); --accent: var(--hm-accent-2); --ok: var(--hm-ok); --warn: var(--hm-warn);
  --bad: var(--hm-bad); --none: var(--hm-muted); --radius: var(--hm-radius); --radius-s: var(--hm-radius-s);
  --gap: var(--hm-gap); --gap-s: var(--hm-gap-s);
  background-color: var(--hm-bg);
}
:root[data-hm-theme] body { background-color: var(--hm-bg); background-image: var(--hm-bg-grain); color: var(--hm-text); font-family: var(--hm-font); font-size: var(--hm-font-size); line-height: 1.4; }
:root[data-hm-theme] .shell { gap: var(--hm-gap); }
:root[data-hm-theme] .top .title { font-size: 18px; font-weight: 600; color: var(--hm-text); }

/* raised tile: every block is a tile with no markup change */
.hm-tile, :root[data-hm-theme] .block {
  position: relative;
  background: linear-gradient(160deg, var(--hm-panel) 0%, var(--hm-panel-2) 100%);
  border: 1px solid var(--hm-panel-edge);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-highlight), var(--hm-shadow-raised);
  color: var(--hm-text);
  padding: var(--hm-gap);
  transition: box-shadow var(--hm-press-ms) ease, transform var(--hm-press-ms) ease;
}
@media (hover: hover) {
  .hm-tile:hover, :root[data-hm-theme] .block:hover { transform: translateY(-1px); box-shadow: var(--hm-highlight), 0 14px 28px rgba(0,0,0,.30); }
}
.hm-tile:active, .hm-tile[aria-pressed="true"] {
  transform: translateY(1px); box-shadow: var(--hm-shadow-pressed);
  background: linear-gradient(160deg, var(--hm-panel-2) 0%, var(--hm-panel) 100%);
}
.hm-tile:focus-visible, .hm-btn:focus-visible, .hm-input:focus-visible, .hm-tab:focus-visible, .hm-pill:focus-visible, .hm-toggle:focus-visible, .hm-select:focus-visible, .hm-search:focus-visible, .hm-side-item:focus-visible {
  outline: 2px solid var(--hm-accent-2); outline-offset: 2px;
}
.hm-tile[disabled], .hm-tile[aria-disabled="true"], .hm-btn[disabled] { opacity: .45; filter: saturate(.5); pointer-events: none; box-shadow: none; }
.hm-tile--c, :root[data-hm-theme] .block.hm-tile--c { background: var(--hm-fill, var(--hm-grad-blue-purple)); color: #fff; border-color: rgba(255,255,255,.18); }
.hm-tile--c.hm-ink-dark, :root[data-hm-theme] .block.hm-tile--c.hm-ink-dark { color: var(--hm-charcoal-5); }
.hm-tile--p, :root[data-hm-theme] .block.hm-tile--p { color: #fff; border-color: rgba(255,255,255,.18); }
.hm-tile--p.hm-ink-dark, :root[data-hm-theme] .block.hm-tile--p.hm-ink-dark { color: var(--hm-charcoal-5); }
[class*="hm-pat-"] > * { position: relative; }

:root[data-hm-theme] .box, :root[data-hm-theme] .banner { background: var(--hm-panel-2); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s); box-shadow: var(--hm-shadow-inset); }
:root[data-hm-theme] .banner { border-left: 4px solid var(--hm-warn); }
:root[data-hm-theme] .box-empty { color: var(--hm-muted); border-color: var(--hm-panel-edge); }
:root[data-hm-theme] .box-error { border-left: 4px solid var(--hm-bad); }

:root[data-hm-theme] .tap {
  min-height: var(--tap, 44px); color: var(--hm-text); cursor: pointer;
  background: linear-gradient(160deg, var(--hm-panel) 0%, var(--hm-panel-2) 100%);
  border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s);
  box-shadow: var(--hm-highlight), var(--hm-shadow-raised);
  transition: box-shadow var(--hm-press-ms), transform var(--hm-press-ms);
}
:root[data-hm-theme] .tap:hover { filter: brightness(1.08); }
:root[data-hm-theme] .tap:active { transform: translateY(1px); box-shadow: var(--hm-shadow-pressed); }
:root[data-hm-theme] .tap[disabled], :root[data-hm-theme] .tap[aria-disabled="true"] { opacity: .45; filter: saturate(.5); pointer-events: none; box-shadow: none; }
:root[data-hm-theme] .chip { border-radius: var(--hm-radius-pill); min-height: 36px; background: var(--hm-panel); }
:root[data-hm-theme] .chip[aria-pressed="true"] { background: var(--hm-grad-accent); color: #fff; box-shadow: var(--hm-shadow-pressed); border-color: transparent; }
:root[data-hm-theme] .tabbar { background: var(--hm-panel-2); border-top: 1px solid var(--hm-panel-edge); box-shadow: 0 -8px 20px rgba(0,0,0,.25); }
:root[data-hm-theme] .tab { background: transparent; color: var(--hm-muted); }
:root[data-hm-theme] .tab[aria-current="page"] { color: var(--hm-text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--hm-accent); }
:root[data-hm-theme="colourful"] .tab[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--hm-orange-4); }
:root[data-hm-theme] .badge { background: var(--hm-panel-2); color: var(--hm-text); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-pill); padding: 0 8px; }
:root[data-hm-theme] .accent-blue { border-left: 4px solid var(--hm-blue-4); }
:root[data-hm-theme] .accent-green { border-left: 4px solid var(--hm-ok); }
:root[data-hm-theme] .accent-orange { border-left: 4px solid var(--hm-orange-4); }
:root[data-hm-theme] .accent-grey { border-left: 4px solid var(--hm-muted); }
:root[data-hm-theme] input, :root[data-hm-theme] textarea, :root[data-hm-theme] select {
  background-color: var(--hm-panel-2); color: var(--hm-text); border: 1px solid var(--hm-panel-edge);
  border-radius: var(--hm-radius-s); box-shadow: var(--hm-shadow-inset); padding: 8px 12px; font-size: 16px;
}
:root[data-hm-theme] select {
  appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239a9db0' stroke-width='2' stroke-linecap='round'/></svg>");
}
:root[data-hm-theme] input::placeholder, :root[data-hm-theme] textarea::placeholder { color: var(--hm-muted); }
:root[data-hm-theme] .webbar { background: var(--hm-panel-2); border-bottom: 1px solid var(--hm-panel-edge); }
:root[data-hm-theme] .webbar .madeup { color: var(--hm-warn); }

/* width: phone stays 480; wide screens and edit mode get room */
@media (min-width: 900px) {
  :root[data-hm-theme] .shell, :root[data-hm-theme] .webbar, :root[data-hm-theme] .tabbar { max-width: 960px; }
  :root[data-hm-theme] .tabpanel { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--hm-gap); align-items: start; }
  :root[data-hm-theme] .block.hm-size-l { grid-column: span 2; }
}
:root[data-hm-edit="on"][data-hm-theme] .shell, :root[data-hm-edit="on"][data-hm-theme] .webbar, :root[data-hm-edit="on"][data-hm-theme] .tabbar { max-width: min(1280px, calc(100vw - 32px)); }
@media (min-width: 900px) { :root[data-hm-edit="on"][data-hm-theme] .tabpanel { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
:root[data-hm-theme] .block.hm-size-s { font-size: 13px; padding: 8px 12px; }
:root[data-hm-theme] .block.hm-size-l { font-size: 16px; padding: 24px; }

/* small icon button, pill, toggle, badge, drop-down, search, tabs, avatar */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 0 12px; font: inherit; color: var(--hm-text); cursor: pointer;
  background: linear-gradient(160deg, var(--hm-panel) 0%, var(--hm-panel-2) 100%); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s);
  box-shadow: var(--hm-highlight), var(--hm-shadow-raised); transition: box-shadow var(--hm-press-ms), transform var(--hm-press-ms); position: relative; }
.hm-btn--icon { width: 36px; padding: 0; }
.hm-btn:hover { filter: brightness(1.08); }
.hm-btn:active { transform: translateY(1px); box-shadow: var(--hm-shadow-pressed); }
.hm-btn--primary { background: var(--hm-grad-accent); color: #fff; border-color: rgba(255,255,255,.2); }
.hm-btn--icon svg, .hm-pill svg { width: 18px; height: 18px; }
.hm-btn--icon::after { content: ""; position: absolute; inset: -4px; }
.hm-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; font: inherit; color: var(--hm-text); border-radius: var(--hm-radius-pill); border: 1px solid var(--hm-panel-edge);
  background: var(--hm-panel); box-shadow: var(--hm-highlight), var(--hm-shadow-raised); cursor: pointer; transition: box-shadow var(--hm-press-ms), transform var(--hm-press-ms); }
.hm-pill:active { transform: translateY(1px); }
.hm-pill[aria-pressed="true"] { background: var(--hm-grad-accent); color: #fff; box-shadow: var(--hm-shadow-pressed); }
.hm-themeswitch { display: inline-flex; gap: 6px; margin-left: auto; }
.hm-toggle { position: relative; width: 44px; height: 24px; border-radius: var(--hm-radius-pill); border: 0; cursor: pointer; background: var(--hm-panel-2); box-shadow: var(--hm-shadow-inset); transition: background var(--hm-press-ms); }
.hm-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--hm-text); box-shadow: 0 2px 4px rgba(0,0,0,.4); transition: transform var(--hm-press-ms); }
.hm-toggle[aria-checked="true"] { background: var(--hm-accent); }
.hm-toggle[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.hm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--hm-radius-pill); font-size: var(--hm-font-size-s); font-weight: var(--hm-weight-bold); color: #fff; background: var(--hm-blue-4); box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.35); }
.hm-badge--blue { background: var(--hm-blue-4); } .hm-badge--purple { background: var(--hm-purple-4); } .hm-badge--orange { background: var(--hm-orange-4); }
.hm-badge--green { background: var(--hm-green-4); } .hm-badge--pink { background: var(--hm-pink-4); } .hm-badge--red { background: var(--hm-bad); } .hm-badge--teal { background: var(--hm-teal-4); }
.hm-badge--l { min-width: 28px; height: 28px; font-size: 11px; }
.hm-select { appearance: none; height: 36px; padding: 0 34px 0 14px; font: inherit; color: var(--hm-text); cursor: pointer; text-align: left;
  border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s); background-color: var(--hm-panel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239a9db0' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; box-shadow: var(--hm-highlight), var(--hm-shadow-raised); }
.hm-select--pill { border-radius: var(--hm-radius-pill); }
.hm-menu { background: var(--hm-panel); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s); box-shadow: var(--hm-shadow-raised); padding: 6px; }
.hm-menu > * { padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.hm-menu > *:hover { background: var(--hm-panel-2); }
.hm-menu > [aria-selected="true"] { background: var(--hm-accent); color: #fff; }
.hm-input, .hm-search { height: 40px; padding: 0 14px 0 38px; font: inherit; color: var(--hm-text); width: 100%; background-color: var(--hm-panel-2); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s); box-shadow: var(--hm-shadow-inset); box-sizing: border-box; }
.hm-search { border-radius: 14px; background-repeat: no-repeat; background-position: 12px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' fill='none' stroke='%239a9db0' stroke-width='2'/><path d='M21 21l-5-5' stroke='%239a9db0' stroke-width='2' stroke-linecap='round'/></svg>"); }
.hm-input::placeholder, .hm-search::placeholder { color: var(--hm-muted); }
.hm-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--hm-radius-s); background: var(--hm-panel-2); box-shadow: var(--hm-shadow-inset); }
.hm-tab { flex: 1; height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--hm-muted); font: inherit; border-radius: 8px; cursor: pointer; }
.hm-tab[aria-selected="true"], .hm-tab[aria-current="page"] { background: var(--hm-panel); color: var(--hm-text); font-weight: var(--hm-weight-bold); box-shadow: var(--hm-highlight), var(--hm-shadow-raised); }
.hm-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--hm-grad-pink-purple); color: #fff; font-weight: var(--hm-weight-bold); overflow: hidden; border: 2px solid var(--hm-panel-edge); box-shadow: var(--hm-shadow-raised); }
.hm-avatar--s { width: 28px; height: 28px; font-size: 11px; }

/* text, sidebar, greeting, tray */
.hm-label { font-size: var(--hm-font-size-s); text-transform: uppercase; letter-spacing: .06em; color: var(--hm-muted); }
.hm-tile--c .hm-label { color: rgba(255,255,255,.7); }
.hm-big { font-size: var(--hm-font-size-xl); font-weight: var(--hm-weight-light); line-height: 1.1; }
.hm-title { font-size: 18px; font-weight: var(--hm-weight-bold); }
.hm-sidebar { width: 190px; padding: 24px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--hm-panel-2); border-right: 1px solid var(--hm-panel-edge); box-sizing: border-box; }
.hm-side-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 12px; color: var(--hm-muted); font: inherit; font-size: 13px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.hm-side-item svg { width: 18px; height: 18px; flex: none; }
.hm-side-icon { display: inline-flex; }
.hm-side-item:hover { color: var(--hm-text); background: var(--hm-panel); }
.hm-side-item[aria-current="page"] { color: #fff; font-weight: var(--hm-weight-bold); background: linear-gradient(135deg, var(--hm-purple-5), var(--hm-accent-2)); box-shadow: var(--hm-highlight), 0 6px 14px rgba(127,91,208,.45); }
@media (max-width: 599px) { .hm-sidebar { width: auto; flex-direction: row; overflow-x: auto; padding: 8px; } .hm-side-item { min-height: 44px; width: auto; } }
.hm-greeting { display: flex; align-items: center; gap: var(--hm-gap); padding: 8px 0 16px; }
.hm-greeting h1 { margin: 0; font-size: 26px; font-weight: var(--hm-weight-bold); }
.hm-greeting p { margin: 2px 0 0; font-size: 12px; color: var(--hm-muted); }
.hm-greeting .hm-search { margin-left: auto; max-width: 260px; }
.hm-tray { position: fixed; left: 0; right: 0; bottom: 0; min-height: 56px; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; background: linear-gradient(180deg, #1c1e2a, #10111a); color: #cfd2e0; border-top: 1px solid rgba(255,255,255,.08); z-index: 50; }
.hm-tray-item { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.hm-tray-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--hm-teal-4); }
.hm-tray-count { margin-left: auto; font-size: 26px; font-weight: var(--hm-weight-light); color: var(--hm-orange-3); }
.hm-panel { background: var(--hm-panel); border: 1px solid var(--hm-panel-edge); border-radius: 24px; box-shadow: var(--hm-shadow-raised); padding: var(--hm-gap); color: var(--hm-text); }

/* chat look (used by the chat lane) */
.hm-chat { position: fixed; left: 16px; bottom: 16px; width: 460px; height: 650px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--hm-panel); color: var(--hm-text); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius); box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; z-index: 60; }
.hm-chat-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--hm-panel-2); border-bottom: 1px solid var(--hm-panel-edge); font-weight: var(--hm-weight-bold); }
.hm-chat-tabs { display: flex; border-bottom: 1px solid var(--hm-panel-edge); }
.hm-chat-tabs > * { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: var(--hm-muted); cursor: pointer; background: none; border: 0; font: inherit; }
.hm-chat-tabs > [aria-selected="true"] { color: var(--hm-text); box-shadow: inset 0 -2px 0 var(--hm-accent); }
.hm-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hm-msg { max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--hm-panel-2); box-shadow: var(--hm-shadow-inset); }
.hm-msg time { display: block; margin-top: 3px; font-size: var(--hm-font-size-s); color: var(--hm-muted); text-transform: uppercase; }
.hm-msg--me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--hm-grad-accent); color: #fff; box-shadow: none; }
.hm-msg--claude { background: var(--hm-green-6); color: #fff; box-shadow: none; }
.hm-msg--claude time { color: rgba(255,255,255,.7); }
.hm-chat-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hm-panel-edge); background: var(--hm-panel-2); }
.hm-chat-foot textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; font: inherit; color: var(--hm-text); background: var(--hm-panel); border: 1px solid var(--hm-panel-edge); border-radius: var(--hm-radius-s); box-shadow: var(--hm-shadow-inset); }
.hm-chat-bubble[data-unread="true"] { animation: hm-flash var(--hm-flash-ms) ease-in-out infinite; }

/* 20 patterns */
:root[data-hm-theme] [class*="hm-pat-"] { background-color: var(--p1,#2a85cc); --p2: rgba(255,255,255,.25); background-size: var(--ps,24px) var(--ps,24px); }
:root[data-hm-theme] .hm-pat-stripes   { background-image: repeating-linear-gradient(45deg, var(--p2) 0 calc(var(--ps,24px)/4), transparent 0 calc(var(--ps,24px)/2)); background-size: auto; }
:root[data-hm-theme] .hm-pat-dots      { background-image: radial-gradient(var(--p2) 22%, transparent 24%); }
:root[data-hm-theme] .hm-pat-waves     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><path d='M0 10 Q10 0 20 10 T40 10' fill='none' stroke='white' stroke-opacity='.3' stroke-width='2'/></svg>"); background-size: calc(var(--ps,24px)*1.6) calc(var(--ps,24px)*.8); }
:root[data-hm-theme] .hm-pat-circles   { background-image: radial-gradient(circle at 0 0, transparent 40%, var(--p2) 41% 46%, transparent 47%), radial-gradient(circle at 100% 100%, transparent 40%, var(--p2) 41% 46%, transparent 47%), radial-gradient(circle at 100% 0, transparent 40%, var(--p2) 41% 46%, transparent 47%), radial-gradient(circle at 0 100%, transparent 40%, var(--p2) 41% 46%, transparent 47%); }
:root[data-hm-theme] .hm-pat-halfcircles { background-image: radial-gradient(circle at 50% 100%, var(--p2) 0 45%, transparent 46%); background-size: var(--ps,24px) calc(var(--ps,24px)/2); }
:root[data-hm-theme] .hm-pat-grid      { background-image: linear-gradient(var(--p2) 1px, transparent 1px), linear-gradient(90deg, var(--p2) 1px, transparent 1px); }
:root[data-hm-theme] .hm-pat-diamonds  { background-image: linear-gradient(135deg, var(--p2) 25%, transparent 25%), linear-gradient(225deg, var(--p2) 25%, transparent 25%), linear-gradient(45deg, var(--p2) 25%, transparent 25%), linear-gradient(315deg, var(--p2) 25%, transparent 25%); background-position: calc(var(--ps,24px)/2) 0, calc(var(--ps,24px)/2) 0, 0 0, 0 0; }
:root[data-hm-theme] .hm-pat-chevrons  { background-image: linear-gradient(135deg, var(--p2) 25%, transparent 25%), linear-gradient(225deg, var(--p2) 25%, transparent 25%); background-size: var(--ps,24px) var(--ps,24px); }
:root[data-hm-theme] .hm-pat-hexagons  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='49'><path d='M14 0l14 8v16L14 32 0 24V8zM14 32l14 8v9M14 32L0 40v9' fill='none' stroke='white' stroke-opacity='.28' stroke-width='1.5'/></svg>"); background-size: calc(var(--ps,24px)*1.2) calc(var(--ps,24px)*2.1); }
:root[data-hm-theme] .hm-pat-triangles { background-image: linear-gradient(60deg, var(--p2) 25%, transparent 25%), linear-gradient(120deg, var(--p2) 25%, transparent 25%); }
:root[data-hm-theme] .hm-pat-rings     { background-image: radial-gradient(circle, transparent 38%, var(--p2) 40% 48%, transparent 50%); }
:root[data-hm-theme] .hm-pat-rays      { background-image: repeating-conic-gradient(from 0deg at 50% 100%, var(--p2) 0 4deg, transparent 4deg 12deg); background-size: 100% 100%; }
:root[data-hm-theme] .hm-pat-grain     { background-image: var(--hm-bg-grain); background-size: 160px 160px; }
:root[data-hm-theme] .hm-pat-blobs     { background-image: radial-gradient(ellipse 40% 30% at 20% 30%, var(--p2), transparent 70%), radial-gradient(ellipse 30% 40% at 75% 65%, var(--p2), transparent 70%), radial-gradient(ellipse 25% 25% at 55% 15%, var(--p2), transparent 70%); background-size: 100% 100%; }
:root[data-hm-theme] .hm-pat-topo      { background-image: repeating-radial-gradient(ellipse 120% 80% at 30% 40%, transparent 0 10px, var(--p2) 10px 11px), repeating-radial-gradient(ellipse 90% 120% at 80% 70%, transparent 0 14px, var(--p2) 14px 15px); background-size: 100% 100%; }
:root[data-hm-theme] .hm-pat-crosses   { background-image: linear-gradient(var(--p2),var(--p2)), linear-gradient(var(--p2),var(--p2)); background-size: 2px 40%, 40% 2px; background-position: center, center; background-repeat: no-repeat; }
:root[data-hm-theme] .hm-pat-scales    { background-image: radial-gradient(circle at 50% 0, transparent 48%, var(--p2) 50% 56%, transparent 58%), radial-gradient(circle at 0 50%, transparent 48%, var(--p2) 50% 56%, transparent 58%), radial-gradient(circle at 100% 50%, transparent 48%, var(--p2) 50% 56%, transparent 58%); }
:root[data-hm-theme] .hm-pat-zigzag    { background-image: linear-gradient(135deg, var(--p2) 25%, transparent 25%) -12px 0, linear-gradient(225deg, var(--p2) 25%, transparent 25%) -12px 0, linear-gradient(315deg, var(--p2) 25%, transparent 25%), linear-gradient(45deg, var(--p2) 25%, transparent 25%); }
:root[data-hm-theme] .hm-pat-mesh      { background-image: radial-gradient(at 15% 20%, var(--p2) 0, transparent 55%), radial-gradient(at 85% 15%, var(--hm-pink-4) 0, transparent 50%), radial-gradient(at 70% 90%, var(--hm-teal-4) 0, transparent 55%), radial-gradient(at 10% 85%, var(--hm-purple-4) 0, transparent 50%); background-size: 100% 100%; }
:root[data-hm-theme] .hm-pat-gradient  { background-image: linear-gradient(135deg, var(--p1), var(--p2)); background-size: 100% 100%; }

/* tile icon, paint button, shade drop-down, popover, gallery */
.hm-tile-icon { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--hm-purple-3), var(--hm-purple-6)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.3); }
.hm-tile-icon svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.hm-paint { position: absolute; right: 8px; bottom: 8px; width: 28px; min-width: 28px; height: 28px; min-height: 28px; font-size: 11px; z-index: 5; }
.hm-shade { position: relative; display: inline-block; }
.hm-shade-btn { display: inline-flex; align-items: center; gap: 8px; }
.hm-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--hm-panel-edge); box-shadow: var(--hm-highlight); flex: none; }
.hm-shade-menu { position: absolute; z-index: 80; min-width: 100%; max-width: calc(100vw - 32px); max-height: 320px; overflow: auto; list-style: none; margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; box-sizing: border-box; }
.hm-shade-menu[hidden] { display: none; }
.hm-shade-menu > li { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.hm-shade-menu > li[data-value^="g-"] { grid-column: 1 / -1; justify-content: flex-start; min-height: 36px; }
.hm-shade-menu > .hm-shade-sep { grid-column: 1 / -1; min-height: 0; padding: 0; height: 1px; background: var(--hm-panel-edge); cursor: default; }
.hm-tile-editor { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.hm-tile-editor label { display: flex; flex-direction: column; gap: 4px; }
.hm-tile-pop { position: absolute; z-index: 85; max-width: calc(100vw - 32px); }
.hm-gallery { position: fixed; inset: 8px; overflow: auto; overflow-x: hidden; z-index: 90; background-color: var(--hm-bg); background-image: var(--hm-bg-grain); }
.hm-gallery h2 { margin: 24px 0 12px; }
.hm-gallery-close { position: absolute; top: 12px; right: 12px; }
.hm-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.hm-gallery-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hm-gallery-cell .hm-tile, .hm-gallery-cell .hm-pat-box { width: 100%; box-sizing: border-box; min-height: 80px; }
:root[data-hm-theme] .hm-pat-box { border-radius: var(--hm-radius); box-shadow: var(--hm-highlight), var(--hm-shadow-raised); }
.hm-gallery-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--hm-radius-s); background: var(--hm-panel-2); box-shadow: var(--hm-shadow-inset); }
.hm-gallery-note { font-size: 11px; color: var(--hm-muted); }
.hm-gallery-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@keyframes hm-press   { 0% { transform: translateY(0); } 100% { transform: translateY(1px); } }
@keyframes hm-flash   { 0%,100% { box-shadow: 0 0 0 0 rgba(240,82,122,0); } 50% { box-shadow: 0 0 0 8px rgba(240,82,122,.45), 0 0 18px rgba(240,82,122,.6); } }
@keyframes hm-panel-open { 0% { opacity: 0; transform: translateY(16px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes hm-lift    { 0% { transform: none; } 100% { transform: scale(1.03) rotate(.6deg); box-shadow: 0 22px 44px rgba(0,0,0,.45); } }
.hm-chat, .hm-panel { animation: hm-panel-open 220ms cubic-bezier(.2,.8,.2,1); }
.hm-dragging { animation: hm-lift 140ms ease-out forwards; cursor: grabbing; z-index: 70; opacity: .96; }
.hm-drop-target { outline: 2px dashed var(--hm-accent-2); outline-offset: 3px; }
@media (prefers-contrast: more) { .hm-tile, .hm-btn, .hm-pill { border-color: currentColor; } }
@media (prefers-reduced-motion: reduce) {
  .hm-chat, .hm-panel, .hm-dragging, .hm-chat-bubble { animation: none !important; transition: none !important; }
  .hm-tile, .hm-btn, .hm-pill, .hm-toggle, .hm-toggle::after { transition: none !important; }
}

/* Jeff integration fix: a block drawn inside a block should not get a second raised frame */
.block .block, .tabpanel .block .block { box-shadow: none; border: 0; background: transparent; padding: 0; border-radius: 0; }

/* === X-LOOK: chunkier tiles, colourful tile look, top bar fix === */
:root[data-hm-theme] {
  --hm-bevel: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.22);
  --hm-tile-a: var(--hm-teal-5); --hm-tile-b: var(--hm-teal-4);
}
:root[data-hm-theme="dark"] .block {
  border-radius: 20px; border-color: rgba(255,255,255,.14);
  box-shadow: var(--hm-bevel), 0 14px 28px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.35);
}
:root[data-hm-theme="dark"] .block.hm-tile--c { box-shadow: var(--hm-bevel), 0 14px 28px rgba(0,0,0,.45); }
:root[data-hm-theme="dark"] .tap, :root[data-hm-theme="dark"] .chip {
  box-shadow: var(--hm-bevel), 0 6px 12px rgba(0,0,0,.35);
}
:root[data-hm-theme="dark"] .tap:active, :root[data-hm-theme="dark"] .chip:active { box-shadow: var(--hm-shadow-pressed); transform: translateY(2px); }
:root[data-hm-theme="dark"] .tab { border-radius: 12px 12px 0 0; }
:root[data-hm-theme="dark"] .tab[aria-current="page"] {
  color: #fff; background: linear-gradient(135deg, var(--hm-purple-5), var(--hm-accent-2));
  box-shadow: var(--hm-highlight), 0 -4px 14px rgba(127,91,208,.45); text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
:root[data-hm-theme="dark"] .hm-side-item[aria-current="page"] {
  box-shadow: var(--hm-highlight), 0 8px 18px rgba(127,91,208,.55), inset 3px 0 0 var(--hm-purple-2);
}

/* top bar: wrap with a gap; keep the theme pills and the fixed Pick/Add buttons apart */
:root[data-hm-theme] .webbar { flex-wrap: wrap; gap: 8px 10px; row-gap: 8px; position: sticky; z-index: 30; }
:root[data-hm-theme] .webbar .hm-themeswitch { margin-left: auto; flex: 0 0 auto; flex-wrap: wrap; position: relative; z-index: 31; }
@media (min-width: 900px) {
  :root[data-hm-theme] .webbar { padding-right: 72px; }
}

/* COLOURFUL: saturated tiles cycling teal, purple, blue, pink, orange */
:root[data-hm-theme="colourful"] .tabpanel > .block:not(.hm-tile--c):not([class*="hm-pat-"]) {
  --hm-c1: var(--hm-teal-4); --hm-c2: var(--hm-teal-6);
  background-color: var(--hm-c2);
  background-image:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.22) 0 18%, transparent 19%),
    radial-gradient(circle at 0 100%, rgba(255,255,255,.12) 0 24%, transparent 25%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px),
    linear-gradient(150deg, var(--hm-c1), var(--hm-c2));
  color: #fff; border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.14), 0 12px 24px rgba(40,50,90,.28);
}
:root[data-hm-theme="colourful"] .tabpanel > .block:nth-child(5n+2):not(.hm-tile--c):not([class*="hm-pat-"]) { --hm-c1: var(--hm-purple-4); --hm-c2: var(--hm-purple-6); }
:root[data-hm-theme="colourful"] .tabpanel > .block:nth-child(5n+3):not(.hm-tile--c):not([class*="hm-pat-"]) { --hm-c1: var(--hm-blue-4); --hm-c2: var(--hm-blue-6); }
:root[data-hm-theme="colourful"] .tabpanel > .block:nth-child(5n+4):not(.hm-tile--c):not([class*="hm-pat-"]) { --hm-c1: var(--hm-pink-4); --hm-c2: var(--hm-pink-6); }
:root[data-hm-theme="colourful"] .tabpanel > .block:nth-child(5n+5):not(.hm-tile--c):not([class*="hm-pat-"]) { --hm-c1: var(--hm-orange-4); --hm-c2: var(--hm-orange-6); }
:root[data-hm-theme="colourful"] .block:not(.hm-ink-dark) { color: #fff; --muted: rgba(255,255,255,.75); --text: #fff; --line: rgba(255,255,255,.3); }
:root[data-hm-theme="colourful"] .block .title, :root[data-hm-theme="colourful"] .block h1, :root[data-hm-theme="colourful"] .block h2, :root[data-hm-theme="colourful"] .block h3 {
  font-size: var(--hm-font-size-s); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: rgba(255,255,255,.8);
}
:root[data-hm-theme="colourful"] .block .muted { color: rgba(255,255,255,.75); }
:root[data-hm-theme="colourful"] .block .box, :root[data-hm-theme="colourful"] .block .banner {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); box-shadow: inset 0 2px 5px rgba(0,0,0,.12); color: #fff;
}
:root[data-hm-theme="colourful"] .block .badge { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.4); font-size: 20px; font-weight: 300; padding: 0 12px; }
:root[data-hm-theme="colourful"] .block .tap, :root[data-hm-theme="colourful"] .block .chip {
  background: #fff; color: var(--hm-charcoal-5); border: 0; border-radius: var(--hm-radius-pill); padding: 0 18px; font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,.2), inset 0 -2px 0 rgba(0,0,0,.08);
}
:root[data-hm-theme="colourful"] .block .chip[aria-pressed="true"] { background: rgba(255,255,255,.3); color: #fff; box-shadow: var(--hm-shadow-pressed); }
:root[data-hm-theme="colourful"] .block input, :root[data-hm-theme="colourful"] .block textarea, :root[data-hm-theme="colourful"] .block select {
  background-color: rgba(255,255,255,.92); color: var(--hm-charcoal-5); border-color: transparent;
}
:root[data-hm-theme="colourful"] .block .accent-blue, :root[data-hm-theme="colourful"] .block.accent-blue,
:root[data-hm-theme="colourful"] .block.accent-green, :root[data-hm-theme="colourful"] .block.accent-orange, :root[data-hm-theme="colourful"] .block.accent-grey { border-left: 1px solid rgba(255,255,255,.28); }
:root[data-hm-theme="colourful"] .tabbar { background: linear-gradient(180deg, var(--hm-charcoal-6), var(--hm-charcoal-8)); border-top: 1px solid rgba(255,255,255,.08); }
:root[data-hm-theme="colourful"] .tab { color: #cfd2e0; }
:root[data-hm-theme="colourful"] .tab[aria-current="page"] { color: #fff; background: var(--hm-orange-4); box-shadow: inset 0 -3px 0 var(--hm-orange-6); }
:root[data-hm-theme="colourful"] .webbar { background: #fff; }
:root[data-hm-theme="colourful"] .top .title { color: var(--hm-text); }
:root[data-hm-theme="colourful"] .tap:not(.block .tap), :root[data-hm-theme="colourful"] .chip:not(.block .chip) { border-radius: var(--hm-radius-pill); }
/* keep the flattened nested block (no second frame) */
:root[data-hm-theme] .block .block { background: transparent; box-shadow: none; border: 0; padding: 0; border-radius: 0; }

/* Jeff integration fix: in edit mode the page rail sits bottom-left, so the chat window and its round button move to the right */
html[data-hm-edit="on"] .hm-chat,
html[data-hm-edit="on"] .hm-chat-bubble { left: auto !important; right: 16px !important; }
html[data-hm-edit="on"] .hm-chat-bubble .hm-badge { left: auto; right: -6px; }