/* Karma – temat Pang!. Rakt, platt och mörkt, efter Pang!-appens designsystem (vibes/src/theme):
 * sidan i #1A1A1A, paneler i rent svart utan kant, glas eller skugga, rubriker i Boldonse (varmvit),
 * text i Hanken Grotesk, och mättade färgplattor med svart text för det som ska synas.
 *
 * Allt här gäller bara när <html data-theme="pang">. Karma-temat ligger orört i style.css och work.css.
 * Ett nytt tema läggs till på samma sätt: en egen fil med [data-theme="namn"] och en rad i js/themes.js.
 */

@font-face { font-family: 'Boldonse'; src: url(../fonts/boldonse.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-500.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-700.woff2) format('woff2'); font-weight: 700 900; font-display: swap; }

:root[data-theme="pang"] {
  /* Pang!s palett */
  --p-bg: #1A1A1A;
  --p-panel: #000000;
  --p-raised: #202227;        /* secondary: hsl(220 10% 14%) */
  --p-raised-2: #2A2C33;
  --p-heading: #FFFAE6;
  --p-subtitle: #FFF2B3;
  --p-muted: #828A99;         /* mutedForeground: hsl(220 10% 55%) */
  --p-lilac: #F3BEF4;         /* primary */
  --p-yellow: #FFCE62;
  --p-coral: #FF8677;
  --p-pink: #FF92CD;
  --p-blue: #1DB3F3;
  --p-mint: #3CC7A6;
  --p-ink: #000000;           /* text på en färgad platta: alltid riktigt svart */

  /* Karmas tokens, i Pang!s tappning */
  --fg: #FAFAFA;
  --fg-2: #B9BEC8;
  --fg-3: var(--p-muted);
  --fg-4: #4A4E57;
  --glass: var(--p-panel);
  --glass-hover: var(--p-raised);
  --glass-strong: var(--p-panel);
  --line: #24262C;
  --line-strong: #3A3D45;
  --heart: var(--p-pink);
  --heart-2: var(--p-lilac);
  --ok: var(--p-mint);
  --blur: none;
  --font: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: 'Boldonse', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
}

[data-theme="pang"] body { background: var(--p-bg); font-feature-settings: normal; }
[data-theme="pang"] ::selection { background: rgba(243, 190, 244, .5); }
[data-theme="pang"] :focus-visible { outline-color: var(--p-lilac); }

/* ——— Ytor: platt svart, inga kanter, inget glas ——— */
[data-theme="pang"] .glass,
[data-theme="pang"] .search,
[data-theme="pang"] .dock a,
[data-theme="pang"] .icon-btn,
[data-theme="pang"] .todo-btn,
[data-theme="pang"] .sp-chip, [data-theme="pang"] .sp-focus,
[data-theme="pang"] .impact,
[data-theme="pang"] .sponsor,
[data-theme="pang"] .pop,
[data-theme="pang"] .work,
[data-theme="pang"] .sheet {
  background: var(--p-panel); border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
[data-theme="pang"] .search:focus-within { background: var(--p-panel); box-shadow: 0 0 0 2px var(--p-lilac); }
[data-theme="pang"] .dock .add { border: 1.5px dashed var(--line-strong); background: transparent; }
[data-theme="pang"] .icon-btn:hover, [data-theme="pang"] .todo-btn:hover, [data-theme="pang"] .dock a:hover { background: var(--p-raised); }
[data-theme="pang"] .impact:hover { box-shadow: none; background: var(--p-raised); }
[data-theme="pang"] .todo-btn[aria-expanded="true"] { background: var(--p-heading); color: var(--p-ink); }
[data-theme="pang"] .weather:hover { background: var(--p-panel); }
[data-theme="pang"] dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="pang"] .veil { opacity: .7; }
[data-theme="pang"] .grain { display: none; }

/* Rundningar som i Pang!: 24 på stora ytor, 14 på kort */
[data-theme="pang"] .work, [data-theme="pang"] .sheet { border-radius: 24px; }
[data-theme="pang"] .pop { border-radius: 20px; }

/* ——— Typografi: Boldonse för rubriker, Hanken för allt som läses ——— */
[data-theme="pang"] .clock {
  font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: 1.25;
  font-size: clamp(60px, 9.5vw, 148px); margin: 0;
  background: none; color: var(--p-heading); -webkit-text-fill-color: var(--p-heading); filter: none;
}
[data-theme="pang"] .clock .ampm { font-family: var(--font); font-weight: 700; }
[data-theme="pang"] .date { font-weight: 700; letter-spacing: .14em; color: var(--p-subtitle); margin-bottom: 0; }
[data-theme="pang"] .greeting {
  font-family: var(--display); font-style: normal; font-size: clamp(18px, 2.1vw, 28px); line-height: 1.5;
  color: var(--p-heading); text-shadow: none; margin-top: .4em;
}
[data-theme="pang"] .focus-q, [data-theme="pang"] .focus-label { color: var(--p-subtitle); font-weight: 600; }
[data-theme="pang"] .focus input { border-bottom-color: var(--line-strong); }
[data-theme="pang"] .focus input:focus { border-bottom-color: var(--p-lilac); }
[data-theme="pang"] .focus-row { font-weight: 600; }
[data-theme="pang"] .quote blockquote { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 16px; color: var(--p-subtitle); }
/* Citatet är tonat till 82 %: --fg-3 på bakgrunden blev då 3,8:1, under 4,5:1. */
[data-theme="pang"] .quote figcaption { color: var(--fg-2); }
/* Tangenttipsen på upphöjda ytor (paletten, Ny uppgift) är för svaga i --fg-3 där (4,0:1). */
[data-theme="pang"] .cmd kbd, [data-theme="pang"] .task-add kbd { color: var(--fg-2); }

[data-theme="pang"] .work-title h2, [data-theme="pang"] .work-title-input,
[data-theme="pang"] .ritual-title, [data-theme="pang"] .ob-title, [data-theme="pang"] .ob-hello,
[data-theme="pang"] .hero-amount, [data-theme="pang"] .stop-signal b, [data-theme="pang"] .breathe-word,
[data-theme="pang"] .intent-breath, [data-theme="pang"] .chat-empty b, [data-theme="pang"] .tasks-empty b {
  font-family: var(--display); font-style: normal; font-weight: 400; letter-spacing: -.01em; color: var(--p-heading); line-height: 1.35;
}
[data-theme="pang"] .work-title h2, [data-theme="pang"] .work-title-input { font-size: 21px; }
[data-theme="pang"] .ritual-title { font-size: clamp(22px, 2.6vw, 30px); }
[data-theme="pang"] .ob-hello { font-size: clamp(44px, 7vw, 96px); line-height: 1.3; }
[data-theme="pang"] .ob-title { font-size: clamp(24px, 3.4vw, 40px); }
[data-theme="pang"] .hero-amount { font-size: clamp(34px, 5vw, 54px); }
[data-theme="pang"] .stop-signal b { font-size: clamp(26px, 3.6vw, 44px); }
[data-theme="pang"] .breathe-word, [data-theme="pang"] .intent-breath { font-size: clamp(22px, 2.6vw, 32px); }
[data-theme="pang"] .work-title small, [data-theme="pang"] .ritual-lead, [data-theme="pang"] .ob-sub { color: var(--p-subtitle); font-weight: 600; }

/* Små rubriker: Hanken i versaler, tätare */
[data-theme="pang"] .kicker, [data-theme="pang"] .side-title, [data-theme="pang"] .members-head h3,
[data-theme="pang"] .agenda-head, [data-theme="pang"] .set-sec, [data-theme="pang"] .bg-sec,
[data-theme="pang"] .ritual-sec h3, [data-theme="pang"] .ritual-week h3 {
  font-weight: 700; letter-spacing: .1em; color: var(--p-muted);
}

/* ——— Knappar och val ——— */
[data-theme="pang"] .btn { background: var(--p-lilac); color: var(--p-ink); font-weight: 700; }
[data-theme="pang"] .btn.ghost { background: var(--p-raised); color: var(--fg); }
[data-theme="pang"] .chip { background: var(--p-raised); color: var(--fg-2); font-weight: 600; }
[data-theme="pang"] .chip[aria-pressed="true"], [data-theme="pang"] .seg button[aria-pressed="true"],
[data-theme="pang"] .bg-scopes button[aria-selected="true"], [data-theme="pang"] .bg-mix-modes button[aria-checked="true"],
[data-theme="pang"] .bg-mix-every button[aria-pressed="true"] { background: var(--p-heading); color: var(--p-ink); }
[data-theme="pang"] .bg-mix, [data-theme="pang"] .bg-mix-modes, [data-theme="pang"] .bg-mix-every button { background: var(--p-raised); }
[data-theme="pang"] .bg-in[aria-pressed="true"] { background: var(--p-mint); color: var(--p-ink); }
[data-theme="pang"] .seg { background: var(--p-raised); }
[data-theme="pang"] .field, [data-theme="pang"] .task-add, [data-theme="pang"] .composer, [data-theme="pang"] .cmt-add, [data-theme="pang"] .chat-join {
  background: var(--p-raised); border-color: transparent;
}
[data-theme="pang"] .task-add:focus-within, [data-theme="pang"] .composer:focus-within, [data-theme="pang"] .cmt-add:focus-within,
[data-theme="pang"] .field:focus { background: var(--p-raised-2); border-color: var(--p-lilac); }
[data-theme="pang"] .switch[aria-checked="true"] { background: var(--p-mint); }
[data-theme="pang"] .toast { background: var(--p-heading); color: var(--p-ink); font-weight: 600; }
[data-theme="pang"] .send { background: var(--p-lilac); color: var(--p-ink); }
[data-theme="pang"] .tool { background: var(--p-raised); border-color: transparent; font-weight: 600; }
[data-theme="pang"] .tool:hover { background: var(--p-raised-2); }
[data-theme="pang"] .tool.live { background: var(--p-pink); color: var(--p-ink); border-color: transparent; }
[data-theme="pang"] .link, [data-theme="pang"] .msg-body a, [data-theme="pang"] .cmt-body a { color: var(--p-blue); }
[data-theme="pang"] .at { color: var(--p-lilac); }

/* ——— Arbetsytan ——— */
[data-theme="pang"] .work-side { background: var(--p-panel); border-right: 1px solid var(--line); }
[data-theme="pang"] .nav-item { font-weight: 600; }
[data-theme="pang"] .nav-item:hover { background: var(--p-raised); }
[data-theme="pang"] .nav-item.on { background: var(--p-heading); color: var(--p-ink); }
[data-theme="pang"] .nav-item.on .nav-ic, [data-theme="pang"] .nav-item.on .nav-count { color: var(--p-ink); }
[data-theme="pang"] .nav-count.unread { background: var(--p-pink); color: var(--p-ink); }
[data-theme="pang"] .task:hover { background: var(--p-raised); }
[data-theme="pang"] .tag { background: var(--p-raised); font-weight: 600; }
[data-theme="pang"] .tag.due { background: rgba(29, 179, 243, .16); color: #8FD8FA; }
[data-theme="pang"] .tag.due.late, [data-theme="pang"] .cm.late { background: rgba(255, 206, 98, .16); color: var(--p-yellow); }
[data-theme="pang"] .col { background: var(--p-bg); border-color: transparent; border-radius: 20px; }
[data-theme="pang"] .card { background: var(--p-raised); border-color: transparent; box-shadow: none; border-radius: 14px; }
[data-theme="pang"] .card:hover { background: var(--p-raised-2); border-color: transparent; }
[data-theme="pang"] .cm { background: rgba(255, 255, 255, .08); font-weight: 600; }
[data-theme="pang"] .agenda, [data-theme="pang"] .goal-card, [data-theme="pang"] .lb-opt,
[data-theme="pang"] .bg-team, [data-theme="pang"] .give, [data-theme="pang"] .bg-follow {
  background: var(--p-bg); border-color: transparent;
}
[data-theme="pang"] .msg:hover { background: var(--p-raised); }
[data-theme="pang"] .day-sep span { background: var(--cal-item); }
[data-theme="pang"] .lb-list li.me { background: var(--p-raised); }

/* Färgplattor med svart text, som Pang!s kort */
[data-theme="pang"] .ritual-banner, [data-theme="pang"] .team-impact, [data-theme="pang"] .ritual-three,
[data-theme="pang"] .break-card {
  border: 0; color: var(--p-ink); box-shadow: none;
}
[data-theme="pang"] .ritual-banner { background: var(--p-yellow); }
[data-theme="pang"] .ritual-banner.shutdown { background: var(--p-lilac); }
[data-theme="pang"] .ritual-banner.rested { background: var(--p-blue); }
[data-theme="pang"] .ritual-banner small, [data-theme="pang"] .ritual-banner b, [data-theme="pang"] .ritual-banner .rb-go { color: var(--p-ink); }
[data-theme="pang"] .ritual-banner b { font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1.5; }
[data-theme="pang"] .ritual-banner .rb-ic { background: rgba(0, 0, 0, .12); color: var(--p-ink); }
/* I en arbetsyta har dagens kort (planera, avsluta, vila) arbetsytans färg, som menyn (--ws-accent, js/work.js). */
[data-theme="pang"] .work.in-space .ritual-banner { background: var(--ws-accent); }
[data-theme="pang"] .work.in-space .ritual-banner :is(small, b, .rb-go, .rb-ic) { color: var(--ws-ink); }
[data-theme="pang"] .team-impact { background: var(--p-pink); }
[data-theme="pang"] .team-impact b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.4; }
[data-theme="pang"] .team-impact span { color: var(--p-ink); }
[data-theme="pang"] .team-impact .ti-heart { background: rgba(0, 0, 0, .12); }
[data-theme="pang"] .team-impact .ti-heart svg { fill: var(--p-ink); }
[data-theme="pang"] .ritual-three { background: var(--p-yellow); }
[data-theme="pang"] .ritual-three h3, [data-theme="pang"] .ritual-three .ritual-hint, [data-theme="pang"] .three-list small { color: rgba(0, 0, 0, .65); }
[data-theme="pang"] .three-list li::marker { color: var(--p-ink); }
[data-theme="pang"] .ritual-three .btn { background: var(--p-ink); color: var(--p-heading); }
[data-theme="pang"] .break-card { background: var(--p-mint); }
[data-theme="pang"] .break-kicker, [data-theme="pang"] .break-why { color: rgba(0, 0, 0, .65); }
[data-theme="pang"] .break-card .btn { background: var(--p-ink); color: var(--p-heading); }
[data-theme="pang"] .break-card .btn.ghost { background: rgba(0, 0, 0, .12); color: var(--p-ink); }
[data-theme="pang"] .goal-bar i, [data-theme="pang"] .lb-bar i { background: var(--p-pink); }
[data-theme="pang"] .here-chip { background: rgba(60, 199, 166, .16); color: var(--p-mint); font-weight: 600; }

/* ——— Chill: andning och avsikt i lila ——— */
[data-theme="pang"] .orb, [data-theme="pang"] .intent-orb {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 42%), var(--p-lilac);
  box-shadow: none;
}
[data-theme="pang"] .breathe, [data-theme="pang"] .intent, [data-theme="pang"] .stop-signal {
  background: rgba(0, 0, 0, .86); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ——— Väljaren för stil i inställningarna ——— */
.theme-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.theme-opt { padding: 8px; border-radius: 18px; border: 1px solid transparent; text-align: left; }
.theme-opt:hover { background: rgba(255, 255, 255, .05); }
.theme-opt[aria-pressed="true"] { border-color: var(--line-strong); background: rgba(255, 255, 255, .06); }
.theme-opt i { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 78px; padding: 10px; border-radius: 12px; font-style: normal; overflow: hidden; }
.theme-opt i b { font-size: 15px; line-height: 1.2; }
.theme-opt i span { display: block; height: 7px; border-radius: 4px; }
.theme-opt > span { display: block; margin-top: 7px; padding-left: 2px; font-size: 13px; font-weight: 600; }
.theme-opt > small { display: block; padding-left: 2px; font-size: 12px; color: var(--fg-3); }
.theme-opt.karma i { background: radial-gradient(90% 120% at 20% 100%, #4a2c94, transparent 60%), radial-gradient(70% 90% at 90% 10%, #2ee6b4aa, transparent 60%), #121c44; }
.theme-opt.karma i b { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #fff; }
.theme-opt.karma i span { background: rgba(255, 255, 255, .25); width: 60%; }
.theme-opt.pang i { background: #1A1A1A; }
.theme-opt.pang i b { font-family: 'Boldonse', sans-serif; font-weight: 400; font-size: 12px; color: #FFFAE6; line-height: 1.6; }
.theme-opt.pang i span:nth-of-type(1) { background: #FFCE62; width: 70%; }
.theme-opt.pang i span:nth-of-type(2) { background: #F3BEF4; width: 45%; }

/* ——— Tabeller i Pang! ——— */
[data-theme="pang"] .tbl-scroll { background: var(--p-panel); border-color: var(--line); border-radius: 14px; }
[data-theme="pang"] .tbl thead th, [data-theme="pang"] .tbl tfoot td { background: var(--p-bg); }
[data-theme="pang"] .tbl .rn { background: var(--p-panel); }
[data-theme="pang"] .tbl .th { color: var(--p-subtitle); font-weight: 700; }
[data-theme="pang"] .tbl td.cell.sel { box-shadow: inset 0 0 0 2px var(--p-lilac); }
[data-theme="pang"] .tbl td.editing { box-shadow: inset 0 0 0 2px var(--p-lilac); }
[data-theme="pang"] .tbl td.dl-late { background: #F55E61; color: #000; font-weight: 600; }
[data-theme="pang"] .tbl tbody tr:hover td.dl-late { background: #f7787a; }
[data-theme="pang"] .tbl td.dl-ok { background: rgba(60, 199, 166, .22); }
[data-theme="pang"] .tbl td.dl-today { background: rgba(255, 206, 98, .3); }
[data-theme="pang"] .tbl-search { background: var(--p-raised); border-color: transparent; }
[data-theme="pang"] .cm.value, [data-theme="pang"] .tag.ok { background: rgba(60, 199, 166, .18); color: var(--p-mint); }
[data-theme="pang"] .col-count small, [data-theme="pang"] .tv-col header b small { color: var(--p-mint); }

/* ——— Säljflödet i Pang! ——— */
[data-theme="pang"] .board-bar .bb-won, [data-theme="pang"] .tv-pipe .bb-won, [data-theme="pang"] .outcome-done.won b { color: var(--p-mint); }
[data-theme="pang"] .cm.outcome.won, [data-theme="pang"] .outcome-btns .btn.won { background: var(--p-mint); color: var(--p-ink); }
[data-theme="pang"] .outcome-btns, [data-theme="pang"] .outcome-done, [data-theme="pang"] .outcome-reasons, [data-theme="pang"] .stat-tiles div { background: var(--p-raised); }
[data-theme="pang"] .stat-tiles b { font-family: var(--display); font-size: 20px; line-height: 1.5; color: var(--p-heading); }
[data-theme="pang"] .f-bar i { background: var(--p-pink); }
[data-theme="pang"] .funnel .f-won .f-bar i { background: var(--p-mint); }
[data-theme="pang"] .col-closed { background: transparent; border: 1.5px dashed var(--line-strong); }
[data-theme="pang"] .teams-link { background: var(--p-raised); border-color: transparent; }

/* ——— Till mig i Pang! ——— */
[data-theme="pang"] .mine-head h2 { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.4; color: var(--p-heading); }
[data-theme="pang"] .mine-head p { color: var(--p-subtitle); font-weight: 600; }
[data-theme="pang"] .mine-tiles div { background: var(--p-raised); }
[data-theme="pang"] .mine-tiles b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--p-heading); }
[data-theme="pang"] .mine-tiles .warn { background: var(--p-yellow); }
[data-theme="pang"] .mine-tiles .warn b, [data-theme="pang"] .mine-tiles .warn span { color: var(--p-ink); }
[data-theme="pang"] .mine-tiles .ok { background: var(--p-mint); }
[data-theme="pang"] .mine-tiles .ok b, [data-theme="pang"] .mine-tiles .ok span { color: var(--p-ink); }
[data-theme="pang"] .mine-item { background: var(--p-raised); }
[data-theme="pang"] .mine-item:hover { background: var(--p-raised-2); }
[data-theme="pang"] .mine-sec.late h3 { color: var(--p-yellow); }
[data-theme="pang"] .mine-preview { background: var(--p-blue); color: var(--p-ink); border: 0; font-weight: 600; }
[data-theme="pang"] .give-text { background: var(--p-raised); }
[data-theme="pang"] .give-person[aria-pressed="true"] { border-color: var(--p-lilac); background: var(--p-raised); }

/* ——— Tabellernas vyer i Pang! ——— */
[data-theme="pang"] .tv-switch { background: var(--p-raised); }
[data-theme="pang"] .tv-switch button[aria-selected="true"] { background: var(--p-heading); color: var(--p-ink); }
[data-theme="pang"] .ov-tiles div, [data-theme="pang"] .ov-card { background: var(--p-bg); border-color: transparent; }
[data-theme="pang"] .ov-tiles b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.5; color: var(--p-heading); }
[data-theme="pang"] .ov-tiles .warn { background: var(--p-yellow); }
[data-theme="pang"] .ov-tiles .ok { background: var(--p-mint); }
[data-theme="pang"] .ov-tiles .warn b, [data-theme="pang"] .ov-tiles .warn span, [data-theme="pang"] .ov-tiles .ok b, [data-theme="pang"] .ov-tiles .ok span { color: var(--p-ink); }
[data-theme="pang"] .ov-card h3 { color: var(--p-subtitle); }
[data-theme="pang"] .ov-list li { background: var(--p-raised); }
[data-theme="pang"] .ov-date { background: rgba(29, 179, 243, .2); color: #8FD8FA; }
[data-theme="pang"] .ov-date.late { background: #F55E61; color: var(--p-ink); }
[data-theme="pang"] .ov-load i { background: var(--p-pink); }
[data-theme="pang"] .tv-col { background: var(--p-bg); border-radius: 20px; }
[data-theme="pang"] .tv-card { background: var(--p-raised); border-color: transparent; }
[data-theme="pang"] .tv-card:hover { background: var(--p-raised-2); }
[data-theme="pang"] .tl-head, [data-theme="pang"] .tl-label { background: var(--p-panel); }
[data-theme="pang"] .tl-today { background: var(--p-lilac); }
[data-theme="pang"] .rf-title { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.45; color: var(--p-heading); }
[data-theme="pang"] .opt.pick[aria-pressed="true"] { border-color: var(--p-heading); }

/* Kalendern: svarta dagkort på panelen, upphöjda kort för sakerna (som Kanban), och färgade plattor med svart
   text för det som ska synas (fokustid, heldagar). Rubriken i Boldonse, i dag i lila. */
[data-theme="pang"] {
  --cal-own: var(--p-lilac); --cal-focus: var(--p-mint); --cal-task: var(--p-yellow); --cal-row: var(--p-blue);
  --cal-card: color-mix(in srgb, var(--p-bg) 62%, transparent); --cal-card-today: var(--p-bg);
  --cal-item: var(--p-raised-2); --cal-item-hover: color-mix(in srgb, var(--p-raised-2) 88%, #fff);
  --cal-band: rgba(255, 255, 255, .035);
  --cal-today: var(--p-lilac); --cal-today-ink: var(--p-ink); --cal-ink: var(--p-ink);
}
[data-theme="pang"] .cal-title { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--p-heading); }
[data-theme="pang"] .cal-insights > * { font-weight: 600; }
[data-theme="pang"] .cal-dow { color: var(--p-muted); }
[data-theme="pang"] .cal-dnum, [data-theme="pang"] .cal-mday > b { font-family: var(--display); font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: -.02em; }
[data-theme="pang"] .cal-it-title, [data-theme="pang"] .ce .cal-it-title { font-weight: 700; }
[data-theme="pang"] .cal-now::before { background: var(--p-coral); }
[data-theme="pang"] .cal-now { background: color-mix(in srgb, var(--p-coral) 70%, transparent); }
[data-theme="pang"] .cal-it.is-focus, [data-theme="pang"] .cal-it.allday, [data-theme="pang"] .ce-focus { background: var(--c); color: var(--p-ink); }
[data-theme="pang"] .cal-it.is-focus:hover, [data-theme="pang"] .cal-it.allday:hover, [data-theme="pang"] .ce-focus:hover { background: color-mix(in srgb, var(--c) 88%, #fff); }
[data-theme="pang"] :is(.cal-it.is-focus, .cal-it.allday, .ce-focus) :is(.cal-it-time, .cal-it-place) { color: rgba(0, 0, 0, .65); }
[data-theme="pang"] :is(.cal-it.is-focus, .ce-focus) .cal-it-time::before { background: var(--p-ink); opacity: .5; }
[data-theme="pang"] .cm-e.ad, [data-theme="pang"] .cm-e.is-focus { background: var(--c); color: var(--p-ink); }
[data-theme="pang"] .cm-e.is-focus em { color: rgba(0, 0, 0, .65); }
[data-theme="pang"] .cm-e.is-focus::before { background: var(--p-ink); opacity: .5; }

/* Kanban och kortet i Pang!-stil: svarta plattor, upphöjda kort, Boldonse i kolumnrubrikerna. */
[data-theme="pang"] .kb-col { background: var(--p-bg); border-top: 0; border-radius: 20px; }
[data-theme="pang"] .kb-name b { font-family: var(--display); font-size: 17px; line-height: 1.6; color: var(--p-heading); }
[data-theme="pang"] .kb-card { background: var(--p-raised-2); }
[data-theme="pang"] .kb-card:hover { background: color-mix(in srgb, var(--p-raised-2) 88%, #fff); }
[data-theme="pang"] .kb-addcol { border-color: var(--p-raised-2); }
[data-theme="pang"] .kb-prio { color: var(--p-ink); }
[data-theme="pang"] .kb-star.on { color: var(--p-yellow); }
[data-theme="pang"] .kb-sum { color: var(--p-mint); }
[data-theme="pang"] .kb-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--o); flex: none; }
[data-theme="pang"] .kf-chip[aria-pressed="true"], [data-theme="pang"] .kc-chip.set:not(.sel) { background: var(--p-subtitle); color: var(--p-ink); border-color: transparent; }
[data-theme="pang"] .sheet.kc { background: var(--p-panel); }
[data-theme="pang"] .kc-title { font-family: var(--display); font-weight: 400; line-height: 1.5; color: var(--p-heading); }
[data-theme="pang"] .kc-pop { background: var(--p-raised); }
[data-theme="pang"] .kc-side { background: rgba(255, 255, 255, .025); }
[data-theme="pang"] .kc-foot .btn:not(.ghost) { background: var(--p-yellow); color: var(--p-ink); }

/* Anteckningar i Pang!-stil: rubriken i Boldonse, lapparna behåller sina papperfärger. */
[data-theme="pang"] .pi-head h2 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.6; color: var(--p-heading); }
[data-theme="pang"] .pi-search { background: var(--p-raised); }
[data-theme="pang"] .pi-undo, [data-theme="pang"] .pi-bin { background: var(--p-raised); }

/* Googles knapp ser ut som Googles i alla stilar (vit, deras G). */
[data-theme="pang"] .google-btn { background: #fff; color: #1f1f1f; }

/* Arbetsytornas list och accentfärg */
[data-theme="pang"] .ws-rail { background: var(--p-panel); }
[data-theme="pang"] .work.in-space .work-side { background-color: var(--p-panel); }
[data-theme="pang"] .rail-item.on .ws-ic { box-shadow: 0 0 0 2px var(--p-panel), 0 0 0 4.5px var(--c, var(--p-heading)); }
[data-theme="pang"] .rail-badge { box-shadow: 0 0 0 3px var(--p-panel); }
[data-theme="pang"] .rail-add { background: var(--p-raised); }
[data-theme="pang"] .work.in-space .nav-item.on { background: var(--ws-accent); color: var(--ws-ink); }
[data-theme="pang"] .work.in-space .nav-item.on .nav-ic, [data-theme="pang"] .work.in-space .nav-item.on .nav-count { color: var(--ws-ink); }
[data-theme="pang"] .look-opt { background: var(--p-raised); }
[data-theme="pang"] .side-install { background: var(--p-raised); }
[data-theme="pang"] .side-install-ic { background: var(--p-lilac); color: var(--p-ink); }
[data-theme="pang"] .rem-card { background: var(--p-panel); border-color: var(--line-strong); }
[data-theme="pang"] .rem-ic { background: var(--p-pink); color: var(--p-ink); }
[data-theme="pang"] .cmd mark { background: var(--p-yellow); color: var(--p-ink); }

/* Rollerna i Pang!: färgplattor med svart text, upphöjda kort och svarta paneler, som resten. */
[data-theme="pang"] :is(.kit-ic, .kit-pill, .nav-new, .tip-try)[data-k="sales"] { --kc: var(--p-yellow); --ki: var(--p-ink); }
[data-theme="pang"] :is(.kit-ic, .kit-pill, .nav-new, .tip-try)[data-k="creative"] { --kc: var(--p-pink); --ki: var(--p-ink); }
[data-theme="pang"] :is(.kit-ic, .kit-pill, .nav-new, .tip-try)[data-k="pm"] { --kc: var(--p-blue); --ki: var(--p-ink); }
[data-theme="pang"] :is(.kit-ic, .kit-pill, .nav-new, .tip-try)[data-k="dev"] { --kc: var(--p-mint); --ki: var(--p-ink); }
[data-theme="pang"] :is(.kit-ic, .kit-pill)[data-k="all"], [data-theme="pang"] .kit-ic:not([data-k]) { --kc: var(--p-raised-2); --ki: var(--fg); }
[data-theme="pang"] .kit-card { background: var(--p-raised); }
[data-theme="pang"] .kit-card:hover { background: var(--p-raised-2); }
[data-theme="pang"] .kit-card[aria-pressed="true"] { background: var(--p-raised-2); border-color: var(--p-heading); }
[data-theme="pang"] .kit-text b, [data-theme="pang"] .kit-now b, [data-theme="pang"] .kit-focus-head b { color: var(--p-heading); }
[data-theme="pang"] .kit-on { background: var(--p-heading); color: var(--p-ink); }
[data-theme="pang"] .kit-tip { background: var(--p-lilac); color: var(--p-ink); }
[data-theme="pang"] .kit-join-q { color: var(--p-subtitle); }
[data-theme="pang"] .kit-now, [data-theme="pang"] .kit-rows li { background: var(--p-bg); }
[data-theme="pang"] .side-more-list { background: var(--p-bg); }
[data-theme="pang"] .kit-block { background: var(--p-bg); }
[data-theme="pang"] .kit-item { background: var(--p-raised); }
[data-theme="pang"] .kit-item .tag:not(.due) { background: var(--p-raised-2); }
[data-theme="pang"] button.kit-item:hover { background: var(--p-raised-2); }
[data-theme="pang"] .kit-block h3 { font-weight: 700; letter-spacing: .1em; color: var(--p-muted); }
[data-theme="pang"] .kit-n { background: var(--p-raised-2); }
[data-theme="pang"] .kit-block.warn .kit-n { background: var(--p-yellow); color: var(--p-ink); }
[data-theme="pang"] .ws-name .ws-kit.ask { color: var(--p-subtitle); }
[data-theme="pang"] .rule-tpl { background: var(--p-bg); }
[data-theme="pang"] .rule-tpl:hover:not(:disabled) { background: var(--p-raised); }
[data-theme="pang"] .tip-card { background: var(--p-raised); }
[data-theme="pang"] .tip-text b { color: var(--p-heading); }
[data-theme="pang"] .kit-tipcard { background: var(--p-bg); }
[data-theme="pang"] .kit-tipcard .tip-text small { font-weight: 700; letter-spacing: .1em; color: var(--p-muted); }
[data-theme="pang"] .tip-x:hover { background: var(--p-raised); }
[data-theme="pang"] .btn.tip-try { background: var(--kc); color: var(--ki); }
[data-theme="pang"] .kit-tipcard .btn.ghost { background: var(--p-raised); }