/* ═══════════════════════════════════════════════════════════════════════
   Warp Hub — looks and layouts
   GENERATED from the catalogue. Do not hand-edit: change themes.py and
   re-run emit.py, or the next regeneration silently drops your edit.

   A look is 13 colours, a 7-step radius scale, a root font-size and two
   fonts. A layout is which home screen you get. They are independent, so
   N looks x M layouts costs N + M.

   Green and red are absent on purpose. Green means "the one action" and
   red means "the line between now and context"; a look that moved them
   would move their meaning.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
html[data-look="midnight"] {
  --c-primary: 201 168 76;
  --c-on-primary: 26 35 50;
  --c-background: 26 35 50;
  --c-on-background: 229 226 225;
  --c-surface: 26 35 50;
  --c-on-surface: 229 226 225;
  --c-on-surface-variant: 196 199 199;
  --c-outline-variant: 68 71 71;
  --c-surface-container-lowest: 20 28 41;
  --c-surface-container-low: 29 39 55;
  --c-surface-container: 30 40 56;
  --c-surface-container-high: 42 53 71;
  --c-surface-container-highest: 53 65 85;
  --r-default: 8px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #1a2332;
  --ink: #e5e2e1;
  --dim: #c4c7c7;
  --lit: #c9a84c;
  --on-lit: #1a2332;
  --on-go: #04140c;
}

html[data-look="signal"] {
  --c-primary: 243 179 8;
  --c-on-primary: 0 0 0;
  --c-background: 0 0 0;
  --c-on-background: 247 247 247;
  --c-surface: 0 0 0;
  --c-on-surface: 247 247 247;
  --c-on-surface-variant: 144 144 144;
  --c-outline-variant: 58 58 58;
  --c-surface-container-lowest: 0 0 0;
  --c-surface-container-low: 10 10 10;
  --c-surface-container: 13 13 13;
  --c-surface-container-high: 22 22 22;
  --c-surface-container-highest: 30 30 30;
  --r-default: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-2xl: 0px;
  --r-3xl: 0px;
  --f-sans: Mina;
  --f-display: Mina;
  --root: 15px;
  --ground: #000000;
  --ink: #f7f7f7;
  --dim: #909090;
  --lit: #f3b308;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="daylight"] {
  --c-primary: 11 87 208;
  --c-on-primary: 255 255 255;
  --c-background: 255 255 255;
  --c-on-background: 16 20 24;
  --c-surface: 255 255 255;
  --c-on-surface: 16 20 24;
  --c-on-surface-variant: 74 81 89;
  --c-outline-variant: 223 227 232;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 247 249 251;
  --c-surface-container: 241 244 247;
  --c-surface-container-high: 231 236 241;
  --c-surface-container-highest: 220 227 234;
  --r-default: 10px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-3xl: 26px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 17px;
  --ground: #ffffff;
  --ink: #101418;
  --dim: #4a5159;
  --lit: #0b57d0;
  --on-lit: #ffffff;
  --on-go: #04140c;
}

html[data-look="slate"] {
  --c-primary: 56 189 248;
  --c-on-primary: 6 19 28;
  --c-background: 15 20 25;
  --c-on-background: 232 238 244;
  --c-surface: 15 20 25;
  --c-on-surface: 232 238 244;
  --c-on-surface-variant: 148 163 176;
  --c-outline-variant: 51 65 77;
  --c-surface-container-lowest: 10 14 18;
  --c-surface-container-low: 20 27 33;
  --c-surface-container: 25 33 42;
  --c-surface-container-high: 34 44 54;
  --c-surface-container-highest: 44 57 69;
  --r-default: 6px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-3xl: 18px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #0f1419;
  --ink: #e8eef4;
  --dim: #94a3b0;
  --lit: #38bdf8;
  --on-lit: #06131c;
  --on-go: #04140c;
}

html[data-look="moss"] {
  --c-primary: 239 231 200;
  --c-on-primary: 14 42 28;
  --c-background: 18 53 36;
  --c-on-background: 233 242 233;
  --c-surface: 18 53 36;
  --c-on-surface: 233 242 233;
  --c-on-surface-variant: 169 195 174;
  --c-outline-variant: 55 85 69;
  --c-surface-container-lowest: 12 34 23;
  --c-surface-container-low: 24 59 42;
  --c-surface-container: 29 62 46;
  --c-surface-container-high: 40 72 56;
  --c-surface-container-highest: 51 82 67;
  --r-default: 6px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-3xl: 18px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #123524;
  --ink: #e9f2e9;
  --dim: #a9c3ae;
  --lit: #efe7c8;
  --on-lit: #0e2a1c;
  --on-go: #04140c;
}

html[data-look="nitro"] {
  --c-primary: 122 77 240;
  --c-on-primary: 255 255 255;
  --c-background: 10 7 20;
  --c-on-background: 241 236 255;
  --c-surface: 18 12 34;
  --c-on-surface: 241 236 255;
  --c-on-surface-variant: 167 157 201;
  --c-outline-variant: 51 37 92;
  --c-surface-container-lowest: 12 8 24;
  --c-surface-container-low: 21 14 40;
  --c-surface-container: 26 17 48;
  --c-surface-container-high: 36 22 64;
  --c-surface-container-highest: 46 29 82;
  --r-default: 12px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --r-3xl: 36px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #0a0714;
  --ink: #f1ecff;
  --dim: #a79dc9;
  --lit: #7a4df0;
  --on-lit: #ffffff;
  --on-go: #04140c;
}

html[data-look="blueprint"] {
  --c-primary: 205 238 255;
  --c-on-primary: 0 0 0;
  --c-background: 11 63 94;
  --c-on-background: 236 247 255;
  --c-surface: 11 63 94;
  --c-on-surface: 236 247 255;
  --c-on-surface-variant: 168 203 224;
  --c-outline-variant: 49 94 121;
  --c-surface-container-lowest: 7 41 61;
  --c-surface-container-low: 18 69 99;
  --c-surface-container: 22 72 102;
  --c-surface-container-high: 34 81 110;
  --c-surface-container-highest: 46 92 119;
  --r-default: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 2px;
  --r-xl: 2px;
  --r-2xl: 3px;
  --r-3xl: 3px;
  --f-sans: Mina;
  --f-display: Mina;
  --root: 15px;
  --ground: #0b3f5e;
  --ink: #ecf7ff;
  --dim: #a8cbe0;
  --lit: #cdeeff;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="copper"] {
  --c-primary: 224 122 63;
  --c-on-primary: 22 13 7;
  --c-background: 13 9 6;
  --c-on-background: 243 233 225;
  --c-surface: 18 13 9;
  --c-on-surface: 243 233 225;
  --c-on-surface-variant: 163 144 127;
  --c-outline-variant: 58 42 30;
  --c-surface-container-lowest: 10 7 5;
  --c-surface-container-low: 20 14 9;
  --c-surface-container: 25 17 11;
  --c-surface-container-high: 35 24 16;
  --c-surface-container-highest: 46 32 21;
  --r-default: 10px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 30px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #0d0906;
  --ink: #f3e9e1;
  --dim: #a3907f;
  --lit: #e07a3f;
  --on-lit: #160d07;
  --on-go: #04140c;
}

html[data-look="sand"] {
  --c-primary: 168 82 50;
  --c-on-primary: 255 250 244;
  --c-background: 245 238 226;
  --c-on-background: 36 27 19;
  --c-surface: 255 250 244;
  --c-on-surface: 36 27 19;
  --c-on-surface-variant: 107 92 76;
  --c-outline-variant: 221 208 189;
  --c-surface-container-lowest: 255 253 249;
  --c-surface-container-low: 250 244 234;
  --c-surface-container: 242 233 219;
  --c-surface-container-high: 234 223 204;
  --c-surface-container-highest: 224 210 187;
  --r-default: 6px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-3xl: 22px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #f5eee2;
  --ink: #241b13;
  --dim: #6b5c4c;
  --lit: #a85232;
  --on-lit: #fffaf4;
  --on-go: #04140c;
}

html[data-look="meadow"] {
  --c-primary: 29 107 74;
  --c-on-primary: 255 255 255;
  --c-background: 230 242 233;
  --c-on-background: 15 26 20;
  --c-surface: 246 251 247;
  --c-on-surface: 15 26 20;
  --c-on-surface-variant: 77 96 85;
  --c-outline-variant: 196 207 199;
  --c-surface-container-lowest: 246 251 247;
  --c-surface-container-low: 239 247 241;
  --c-surface-container: 221 233 224;
  --c-surface-container-high: 213 225 216;
  --c-surface-container-highest: 202 214 205;
  --r-default: 8px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-3xl: 28px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #e6f2e9;
  --ink: #0f1a14;
  --dim: #4d6055;
  --lit: #1d6b4a;
  --on-lit: #ffffff;
  --on-go: #04140c;
}

html[data-look="highvis"] {
  --c-primary: 0 0 0;
  --c-on-primary: 255 255 255;
  --c-background: 255 255 255;
  --c-on-background: 0 0 0;
  --c-surface: 255 255 255;
  --c-on-surface: 0 0 0;
  --c-on-surface-variant: 61 61 61;
  --c-outline-variant: 0 0 0;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 250 250 250;
  --c-surface-container: 242 242 242;
  --c-surface-container-high: 230 230 230;
  --c-surface-container-highest: 217 217 217;
  --r-default: 4px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-2xl: 10px;
  --r-3xl: 12px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 18px;
  --ground: #ffffff;
  --ink: #000000;
  --dim: #3d3d3d;
  --lit: #000000;
  --on-lit: #ffffff;
  --on-go: #04140c;
}

html[data-look="ink"] {
  --c-primary: 255 255 255;
  --c-on-primary: 0 0 0;
  --c-background: 0 0 0;
  --c-on-background: 255 255 255;
  --c-surface: 0 0 0;
  --c-on-surface: 255 255 255;
  --c-on-surface-variant: 200 200 200;
  --c-outline-variant: 255 255 255;
  --c-surface-container-lowest: 0 0 0;
  --c-surface-container-low: 10 10 10;
  --c-surface-container: 16 16 16;
  --c-surface-container-high: 24 24 24;
  --c-surface-container-highest: 34 34 34;
  --r-default: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 2px;
  --r-xl: 2px;
  --r-2xl: 3px;
  --r-3xl: 4px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 18px;
  --ground: #000000;
  --ink: #ffffff;
  --dim: #c8c8c8;
  --lit: #ffffff;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="miami"] {
  --c-primary: 255 77 157;
  --c-on-primary: 22 3 43;
  --c-background: 18 4 37;
  --c-on-background: 251 233 244;
  --c-surface: 26 7 51;
  --c-on-surface: 251 233 244;
  --c-on-surface-variant: 176 150 196;
  --c-outline-variant: 61 26 99;
  --c-surface-container-lowest: 13 3 32;
  --c-surface-container-low: 23 6 46;
  --c-surface-container: 29 9 56;
  --c-surface-container-high: 39 14 73;
  --c-surface-container-highest: 51 19 92;
  --r-default: 14px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-3xl: 42px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #120425;
  --ink: #fbe9f4;
  --dim: #b096c4;
  --lit: #ff4d9d;
  --on-lit: #16032b;
  --on-go: #04140c;
}

html[data-look="nightdrive"] {
  --c-primary: 122 162 255;
  --c-on-primary: 0 0 0;
  --c-background: 11 26 102;
  --c-on-background: 234 240 255;
  --c-surface: 11 26 102;
  --c-on-surface: 234 240 255;
  --c-on-surface-variant: 180 195 238;
  --c-outline-variant: 49 62 128;
  --c-surface-container-lowest: 7 17 66;
  --c-surface-container-low: 18 32 107;
  --c-surface-container: 22 37 110;
  --c-surface-container-high: 33 47 117;
  --c-surface-container-highest: 46 59 126;
  --r-default: 14px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-3xl: 42px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #0b1a66;
  --ink: #eaf0ff;
  --dim: #b4c3ee;
  --lit: #7aa2ff;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="vegas"] {
  --c-primary: 242 182 50;
  --c-on-primary: 0 0 0;
  --c-background: 58 11 22;
  --c-on-background: 251 238 230;
  --c-surface: 58 11 22;
  --c-on-surface: 251 238 230;
  --c-on-surface-variant: 178 152 151;
  --c-outline-variant: 91 50 57;
  --c-surface-container-lowest: 38 7 14;
  --c-surface-container-low: 64 18 28;
  --c-surface-container: 68 22 32;
  --c-surface-container-high: 77 34 43;
  --c-surface-container-highest: 88 46 54;
  --r-default: 14px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-3xl: 42px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #3a0b16;
  --ink: #fbeee6;
  --dim: #b29897;
  --lit: #f2b632;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="sunset"] {
  --c-primary: 255 138 76;
  --c-on-primary: 0 0 0;
  --c-background: 58 11 61;
  --c-on-background: 253 238 230;
  --c-surface: 58 11 61;
  --c-on-surface: 253 238 230;
  --c-on-surface-variant: 216 178 207;
  --c-outline-variant: 91 50 90;
  --c-surface-container-lowest: 38 7 40;
  --c-surface-container-low: 64 18 66;
  --c-surface-container: 68 22 69;
  --c-surface-container-high: 78 34 78;
  --c-surface-container-highest: 88 46 87;
  --r-default: 14px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-3xl: 42px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #3a0b3d;
  --ink: #fdeee6;
  --dim: #d8b2cf;
  --lit: #ff8a4c;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="riviera"] {
  --c-primary: 255 169 138;
  --c-on-primary: 0 0 0;
  --c-background: 10 74 85;
  --c-on-background: 234 250 251;
  --c-surface: 10 74 85;
  --c-on-surface: 234 250 251;
  --c-on-surface-variant: 180 214 219;
  --c-outline-variant: 48 104 113;
  --c-surface-container-lowest: 6 48 55;
  --c-surface-container-low: 17 79 90;
  --c-surface-container: 21 83 93;
  --c-surface-container-high: 32 92 102;
  --c-surface-container-highest: 45 101 111;
  --r-default: 14px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-3xl: 42px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #0a4a55;
  --ink: #eafafb;
  --dim: #b4d6db;
  --lit: #ffa98a;
  --on-lit: #000000;
  --on-go: #04140c;
}

html[data-look="lilac"] {
  --c-primary: 122 31 196;
  --c-on-primary: 255 255 255;
  --c-background: 235 229 250;
  --c-on-background: 23 18 43;
  --c-surface: 250 248 255;
  --c-on-surface: 23 18 43;
  --c-on-surface-variant: 79 72 112;
  --c-outline-variant: 201 195 217;
  --c-surface-container-lowest: 250 248 255;
  --c-surface-container-low: 243 239 253;
  --c-surface-container: 227 221 242;
  --c-surface-container-high: 218 212 233;
  --c-surface-container-highest: 207 202 223;
  --r-default: 10px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-3xl: 32px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #ebe5fa;
  --ink: #17122b;
  --dim: #4f4870;
  --lit: #7a1fc4;
  --on-lit: #ffffff;
  --on-go: #04140c;
}

html[data-look="blush"] {
  --c-primary: 163 18 90;
  --c-on-primary: 255 255 255;
  --c-background: 251 219 231;
  --c-on-background: 42 15 25;
  --c-surface: 255 247 250;
  --c-on-surface: 42 15 25;
  --c-on-surface-variant: 107 69 82;
  --c-outline-variant: 218 186 198;
  --c-surface-container-lowest: 255 247 250;
  --c-surface-container-low: 253 234 241;
  --c-surface-container: 243 211 223;
  --c-surface-container-high: 234 203 215;
  --c-surface-container-highest: 224 192 204;
  --r-default: 10px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-3xl: 32px;
  --f-sans: Geist;
  --f-display: Sora;
  --root: 16px;
  --ground: #fbdbe7;
  --ink: #2a0f19;
  --dim: #6b4552;
  --lit: #a3125a;
  --on-lit: #ffffff;
  --on-go: #04140c;
}


html { font-size: var(--root, 16px); }
body { background: rgb(var(--c-background)); color: rgb(var(--c-on-background)); background-attachment: fixed; }
/* signal-grid.css paints the top strip and the bottom nav off its own token
   set; both now read the same variables, so there is one system again. */
.sg-top, .sg-nav, .topbar, .bottomnav { background: rgb(var(--c-background)); color: rgb(var(--c-on-background)); }

html[data-look="midnight"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #24344d 0%, transparent 70%);}
html[data-look="midnight"] .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px -14px rgba(0,0,0,.7);}

html[data-look="daylight"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #eef4fb 0%, transparent 70%);}
html[data-look="daylight"] .card{box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.12);}

html[data-look="slate"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #1a2a38 0%, transparent 70%);}
html[data-look="slate"] .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px -14px rgba(0,0,0,.7);}

html[data-look="moss"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #1f4d36 0%, transparent 70%);}
html[data-look="moss"] .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px -14px rgba(0,0,0,.7);}

html[data-look="nitro"] body{background-image:
  radial-gradient(1100px 620px at 50% -12%, #2a1358 0%, rgba(42,19,88,0) 68%),
  radial-gradient(760px 520px at 108% 8%, #17143f 0%, rgba(23,20,63,0) 62%);}
html[data-look="nitro"] .bg-primary{box-shadow:0 0 0 1px rgba(122,77,240,.45),0 10px 34px -8px rgba(122,77,240,.75);}
html[data-look="nitro"] .card{backdrop-filter:blur(9px);}

html[data-look="blueprint"] body{background-image:
  repeating-linear-gradient(0deg, rgba(205,238,255,.07) 0 1px, transparent 1px 24px),
  repeating-linear-gradient(90deg, rgba(205,238,255,.07) 0 1px, transparent 1px 24px);}
html[data-look="blueprint"] .card{background-color:rgba(18,69,99,.66)!important;border:1px solid rgba(205,238,255,.3)!important;}

html[data-look="sand"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #fffaf2 0%, transparent 70%);}
html[data-look="sand"] .card{box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.12);}

html[data-look="meadow"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #f6fbf7 0%, transparent 70%);}
html[data-look="meadow"] .card{box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.12);}

html[data-look="miami"] body{background-image:
  radial-gradient(900px 560px at 12% -8%, #3a0a5e 0%, rgba(58,10,94,0) 66%),
  radial-gradient(760px 500px at 104% 12%, #5c0a3a 0%, rgba(92,10,58,0) 62%);}
html[data-look="miami"] .bg-primary{box-shadow:0 8px 30px -8px rgba(255,77,157,.8);}

html[data-look="nightdrive"] body{background-image:
  radial-gradient(900px 560px at 12% -8%, #1c3aa8 0%, transparent 66%),
  radial-gradient(760px 500px at 104% 12%, #12307e 0%, transparent 62%);}
html[data-look="nightdrive"] .bg-primary{box-shadow:0 8px 30px -8px rgba(122,162,255,.8);}

html[data-look="vegas"] body{background-image:
  radial-gradient(900px 560px at 12% -8%, #6a1228 0%, transparent 66%),
  radial-gradient(760px 500px at 104% 12%, #5a3d08 0%, transparent 62%);}
html[data-look="vegas"] .bg-primary{box-shadow:0 8px 30px -8px rgba(242,182,50,.8);}

html[data-look="sunset"] body{background-image:
  radial-gradient(900px 560px at 12% -8%, #7a1a52 0%, transparent 66%),
  radial-gradient(760px 500px at 104% 12%, #80350f 0%, transparent 62%);}
html[data-look="sunset"] .bg-primary{box-shadow:0 8px 30px -8px rgba(255,138,76,.8);}

html[data-look="riviera"] body{background-image:
  radial-gradient(900px 560px at 12% -8%, #0e6a76 0%, transparent 66%),
  radial-gradient(760px 500px at 104% 12%, #6a3a28 0%, transparent 62%);}
html[data-look="riviera"] .bg-primary{box-shadow:0 8px 30px -8px rgba(255,169,138,.8);}

html[data-look="lilac"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #f7f3ff 0%, transparent 70%);}
html[data-look="lilac"] .card{box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.12);}

html[data-look="blush"] body{background-image:radial-gradient(1100px 600px at 50% -18%, #fff0f5 0%, transparent 70%);}
html[data-look="blush"] .card{box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.12);}


/* Accent hues restepped for light looks (see emit.py). */
html[data-look="daylight"] .text-red-400,
html[data-look="daylight"] .text-red-300 { color: #b91c1c; }
html[data-look="daylight"] .text-green-400,
html[data-look="daylight"] .text-green-300 { color: #15803d; }
html[data-look="daylight"] .text-orange-400,
html[data-look="daylight"] .text-orange-300 { color: #c2410c; }
html[data-look="daylight"] .text-amber-400,
html[data-look="daylight"] .text-amber-300 { color: #b45309; }
html[data-look="sand"] .text-red-400,
html[data-look="sand"] .text-red-300 { color: #b91c1c; }
html[data-look="sand"] .text-green-400,
html[data-look="sand"] .text-green-300 { color: #15803d; }
html[data-look="sand"] .text-orange-400,
html[data-look="sand"] .text-orange-300 { color: #c2410c; }
html[data-look="sand"] .text-amber-400,
html[data-look="sand"] .text-amber-300 { color: #b45309; }
html[data-look="meadow"] .text-red-400,
html[data-look="meadow"] .text-red-300 { color: #b91c1c; }
html[data-look="meadow"] .text-green-400,
html[data-look="meadow"] .text-green-300 { color: #15803d; }
html[data-look="meadow"] .text-orange-400,
html[data-look="meadow"] .text-orange-300 { color: #c2410c; }
html[data-look="meadow"] .text-amber-400,
html[data-look="meadow"] .text-amber-300 { color: #b45309; }
html[data-look="highvis"] .text-red-400,
html[data-look="highvis"] .text-red-300 { color: #b91c1c; }
html[data-look="highvis"] .text-green-400,
html[data-look="highvis"] .text-green-300 { color: #15803d; }
html[data-look="highvis"] .text-orange-400,
html[data-look="highvis"] .text-orange-300 { color: #c2410c; }
html[data-look="highvis"] .text-amber-400,
html[data-look="highvis"] .text-amber-300 { color: #b45309; }
html[data-look="lilac"] .text-red-400,
html[data-look="lilac"] .text-red-300 { color: #b91c1c; }
html[data-look="lilac"] .text-green-400,
html[data-look="lilac"] .text-green-300 { color: #15803d; }
html[data-look="lilac"] .text-orange-400,
html[data-look="lilac"] .text-orange-300 { color: #c2410c; }
html[data-look="lilac"] .text-amber-400,
html[data-look="lilac"] .text-amber-300 { color: #b45309; }
html[data-look="blush"] .text-red-400,
html[data-look="blush"] .text-red-300 { color: #b91c1c; }
html[data-look="blush"] .text-green-400,
html[data-look="blush"] .text-green-300 { color: #15803d; }
html[data-look="blush"] .text-orange-400,
html[data-look="blush"] .text-orange-300 { color: #c2410c; }
html[data-look="blush"] .text-amber-400,
html[data-look="blush"] .text-amber-300 { color: #b45309; }

/* ── LAYOUTS ─────────────────────────────────────────────────────────────
   The alternate home screens are a RE-PRESENTATION of what the app already
   rendered: hub-looks.js reads #hero-count, #hero-week, #hero-contacts and
   the rest, and paints them in a different shape. There is no second copy
   of the numbers, so a layout can never disagree with the app — and a
   change to how a figure is worked out lands in all three at once. */
#alt-layout { display: none; }
html[data-layout="rings"] #hero-licensed,
html[data-layout="board"] #hero-licensed { display: none !important; }
html[data-layout="rings"] #alt-layout,
html[data-layout="board"] #alt-layout { display: block; }

/* Rings */
.alt-rings { padding-top: .25rem; }
.alt-rings .rings { display: grid; place-items: center; position: relative; }
.alt-rings svg { transform: rotate(-90deg); max-width: 100%; height: auto; }
.alt-rings .mid { position: absolute; text-align: center; }
.alt-rings .mid b { display: block; font: 800 2.5rem/1 var(--f-display), system-ui, sans-serif; letter-spacing: -.02em; }
.alt-rings .mid span { font: 700 .625rem/1 var(--f-sans), system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--c-on-surface-variant)); }
.alt-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; }
.alt-legend span { font: 700 .625rem/1 var(--f-sans), system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-on-surface-variant)); }
.alt-legend i { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; margin-right: .35rem; vertical-align: middle; }
.alt-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem; margin-top: 1rem; }
.alt-strip div { text-align: center; padding: .65rem .25rem; background: rgb(var(--c-surface-container-high)); border-radius: var(--r-md); }
.alt-strip b { display: block; font: 800 1.2rem/1 var(--f-display), system-ui, sans-serif; margin-top: .3rem; }

/* Board */
.alt-board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
.alt-tile { background: rgb(var(--c-surface-container-high)); border-radius: var(--r-md); padding: .8rem; min-width: 0; }
.alt-tile.wide { grid-column: 1 / -1; }
.alt-tile.hero { background: rgb(var(--c-primary)); color: rgb(var(--c-on-primary)); }
.alt-tile b { display: block; font: 800 1.85rem/1 var(--f-display), system-ui, sans-serif; margin-top: .45rem; overflow-wrap: anywhere; }
.alt-tile.hero b { font-size: 2.75rem; }
.alt-tile small { font: 700 .8rem/1 var(--f-sans), system-ui, sans-serif; opacity: .7; }
.alt-k { font: 700 .625rem/1.3 var(--f-sans), system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--c-on-surface-variant)); }
.alt-tile.hero .alt-k { color: rgb(var(--c-on-primary)); opacity: .8; }
/* No sparkline class here on purpose: the one that existed charted days
   elapsed rather than dials, which looked like data and was not. Board uses
   .alt-bar with the real week figure instead. */
.alt-bar { height: .45rem; border-radius: 999px; background: rgb(var(--c-outline-variant)); margin-top: .55rem; overflow: hidden; }
.alt-bar i { display: block; height: 100%; background: rgb(var(--c-primary)); }

/* ── THE PICKERS (Profile) ───────────────────────────────────────────── */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.pick { position: relative; border: 2px solid rgb(var(--c-outline-variant)); border-radius: var(--r-md);
  padding: .5rem; cursor: pointer; background: none; text-align: left; min-height: 44px; }
.pick[aria-pressed="true"] { border-color: rgb(var(--c-primary)); }
.pick .sw { display: flex; gap: .2rem; margin-bottom: .4rem; }
.pick .sw i { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); }
.pick .nm { display: block; font: 700 .7rem/1.2 var(--f-sans), system-ui, sans-serif; color: rgb(var(--c-on-surface)); }
.pick .tg { display: block; font: 400 .625rem/1.3 var(--f-sans), system-ui, sans-serif; color: rgb(var(--c-on-surface-variant)); margin-top: .15rem; }
.look-fold > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  border: 2px solid rgb(var(--c-outline-variant)); border-radius: var(--r-md); padding: .55rem .7rem; min-height: 44px; }
.look-fold > summary::-webkit-details-marker { display: none; }
.look-fold[open] > summary { border-color: rgb(var(--c-primary)); }
.look-cur { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.look-cur .sw { display: flex; gap: .2rem; }
.look-cur .sw i { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); }
.look-cur .nm { font: 700 .8rem/1.2 var(--f-sans), system-ui, sans-serif; color: rgb(var(--c-on-surface)); }
.look-chg { font: 700 .7rem/1 var(--f-sans), system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-primary)); }
.look-fold[open] .look-chg { font-size: 0; }
.look-fold[open] .look-chg::after { content: "Done"; font-size: .7rem; }
.pick-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.pick-lay { border: 2px solid rgb(var(--c-outline-variant)); border-radius: var(--r-md); padding: .6rem .5rem;
  cursor: pointer; background: none; min-height: 44px; }
.pick-lay[aria-pressed="true"] { border-color: rgb(var(--c-primary)); }
.pick-lay svg { width: 100%; height: auto; display: block; margin-bottom: .4rem; }
.pick-lay .nm { font: 700 .7rem/1.2 var(--f-sans), system-ui, sans-serif; color: rgb(var(--c-on-surface)); }
@media (prefers-reduced-motion: no-preference) {
  .pick, .pick-lay { transition: border-color .15s ease; }
}