/* ============================================================
   TCM Tagestafel · OK Qigong
   Scoped widget styles (prefix .oktcm). No external fonts.
   ============================================================ */

.oktcm{
  /* type: system stacks only (DSGVO-safe, self-hosted feel) */
  --ok-serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --ok-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ok-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --ok-han: "Songti SC","Noto Serif SC","Source Han Serif SC",serif;

  /* brand accent — overridden inline from plugin settings */
  --ok-accent:#6f8f74;

  /* five phase colors (fixed, semantic — legible on light & dark) */
  --ok-wood:#5f8f6a;
  --ok-fire:#c65f4e;
  --ok-earth:#c69542;
  --ok-metal:#7f8a97;
  --ok-water:#3f76a6;

  display:block;
  font-family:var(--ok-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-align:left;
  max-width:1040px;
  margin-inline:auto;
}
.oktcm *{box-sizing:border-box;}

/* ---------- theme: light (default) ---------- */
.oktcm.oktcm--light{
  --ok-surface:#ffffff;
  --ok-surface-2:#f8f6f0;
  --ok-frame:#fbfaf5;
  --ok-border:#e7e3d6;
  --ok-border-soft:#efece2;
  --ok-ink:#2c332e;
  --ok-ink-dim:#5d645d;
  --ok-ink-mute:#969b91;
  --ok-hub:#fbfaf6;
  --ok-shadow:0 14px 34px -22px rgba(45,55,48,.42);
}
/* ---------- theme: dark ---------- */
.oktcm.oktcm--dark{
  --ok-surface:#161d23;
  --ok-surface-2:#12181d;
  --ok-frame:#131a20;
  --ok-border:#2a343d;
  --ok-border-soft:#222b33;
  --ok-ink:#ece6d6;
  --ok-ink-dim:#aab2bb;
  --ok-ink-mute:#727d88;
  --ok-hub:#0e141a;
  --ok-shadow:0 20px 44px -26px rgba(0,0,0,.7);
}

/* utility spans built by JS */
.oktcm .ok-han{font-family:var(--ok-han);}
.oktcm .ok-mono{font-family:var(--ok-mono);font-variant-numeric:tabular-nums;}

/* ---------- frame ---------- */
.oktcm .ok-frame{
  background:var(--ok-frame);
  border:1px solid var(--ok-border);
  border-radius:22px;
  padding:clamp(16px,2.4vw,30px);
  box-shadow:var(--ok-shadow);
}

/* masthead */
.oktcm .ok-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--ok-border-soft);
}
.oktcm .ok-brand{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ok-ink-mute);font-weight:600;
}
.oktcm .ok-seal{
  width:9px;height:9px;border-radius:50%;
  background:var(--ok-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ok-accent) 18%,transparent);
}
.oktcm .ok-clock{font-size:13px;color:var(--ok-ink-dim);letter-spacing:.04em;}
.oktcm .ok-clock b{color:var(--ok-ink);font-weight:600;}

/* ---------- grid ---------- */
.oktcm .ok-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(16px,2.2vw,30px);
  align-items:start;
}
@media (max-width:720px){ .oktcm .ok-grid{grid-template-columns:1fr;} }

/* clock panel */
.oktcm .ok-clockpanel{
  background:var(--ok-surface);
  border:1px solid var(--ok-border);
  border-radius:18px;
  padding:clamp(12px,1.8vw,20px);
}
.oktcm .ok-cap{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ok-ink-mute);margin-bottom:4px;padding:0 4px;
}
.oktcm svg.ok-wheel{display:block;width:100%;height:auto;}
.oktcm svg.ok-wheel text{font-family:var(--ok-sans);}

/* info column */
.oktcm .ok-col{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);}
.oktcm .ok-card{
  background:var(--ok-surface);
  border:1px solid var(--ok-border);
  border-radius:16px;
  padding:clamp(15px,1.9vw,22px);
}
.oktcm .ok-eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ok-ink-mute);font-weight:600;margin:0 0 10px;
}

/* date card */
.oktcm .ok-date{
  font-family:var(--ok-serif);
  font-size:clamp(21px,3.2vw,28px);
  font-weight:600;line-height:1.15;color:var(--ok-ink);
}
.oktcm .ok-gz{
  display:flex;align-items:center;gap:12px;margin-top:11px;
  color:var(--ok-ink-dim);font-size:13.5px;flex-wrap:wrap;
}
.oktcm .ok-gz .g{font-size:23px;color:var(--ok-ink);letter-spacing:.08em;}
.oktcm .ok-gz .sep{color:var(--ok-border);}

/* element card (accent = day element via --ok-el) */
.oktcm .ok-elcard{
  --ok-el:var(--ok-earth);
  border-color:color-mix(in srgb,var(--ok-el) 40%,var(--ok-border));
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--ok-el) 12%,transparent) 0%,transparent 60%),
    var(--ok-surface);
}
.oktcm .ok-elmain{display:flex;align-items:center;gap:16px;}
.oktcm .ok-elglyph{
  flex:none;width:70px;height:70px;border-radius:15px;
  display:grid;place-items:center;font-size:38px;color:#fff;
  background:var(--ok-el);
  box-shadow:0 8px 20px -10px var(--ok-el), inset 0 1px 0 rgba(255,255,255,.3);
}
.oktcm .ok-elname{
  font-family:var(--ok-serif);font-weight:600;
  font-size:clamp(24px,3.4vw,32px);line-height:1;color:var(--ok-ink);
}
.oktcm .ok-elname .cn{font-size:.6em;color:var(--ok-el);margin-left:.34em;}
.oktcm .ok-elpol{margin-top:7px;font-size:13px;color:var(--ok-ink-dim);}
.oktcm .ok-elpol b{color:var(--ok-ink);font-weight:700;}
.oktcm .ok-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.oktcm .ok-chip{
  font-size:12px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--ok-border);color:var(--ok-ink-dim);
  background:var(--ok-surface-2);white-space:nowrap;
}
.oktcm .ok-chip b{color:var(--ok-ink);font-weight:600;}
.oktcm .ok-chip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle;}

/* active organ card */
.oktcm .ok-organ{display:flex;align-items:center;gap:13px;}
.oktcm .ok-organ .p{
  flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--ok-active,var(--ok-accent));
  animation:ok-pulse 2.6s ease-out infinite;
}
@keyframes ok-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok-active,var(--ok-accent)) 55%,transparent);}
  70%{box-shadow:0 0 0 12px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
.oktcm .ok-organ .b{display:flex;flex-direction:column;gap:2px;}
.oktcm .ok-organ .on{font-size:18px;color:var(--ok-ink);font-weight:600;}
.oktcm .ok-organ .on .cn{color:var(--ok-active,var(--ok-accent));margin-left:.4em;font-weight:500;}
.oktcm .ok-organ .om{font-size:12.5px;color:var(--ok-ink-mute);}
.oktcm .ok-organ .om .t{color:var(--ok-ink-dim);}

/* quote */
.oktcm .ok-quote{
  margin-top:clamp(16px,2.2vw,28px);
  background:var(--ok-surface);
  border:1px solid var(--ok-border);
  border-left:3px solid var(--ok-accent);
  border-radius:16px;
  padding:clamp(18px,2.6vw,30px) clamp(20px,3.4vw,40px);
}
.oktcm .ok-quote .mk{
  font-family:var(--ok-serif);font-size:42px;line-height:0;height:20px;
  display:block;color:color-mix(in srgb,var(--ok-accent) 55%,transparent);
}
.oktcm .ok-quote blockquote{
  margin:0;font-family:var(--ok-serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,2.3vw,23px);line-height:1.42;color:var(--ok-ink);
}
.oktcm .ok-quote .src{
  margin-top:14px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ok-ink-mute);font-weight:600;
}
.oktcm .ok-quote .src::before{content:"— ";color:var(--ok-accent);}

/* footnote */
.oktcm .ok-foot{
  margin-top:18px;text-align:center;
  font-size:10.5px;letter-spacing:.08em;color:var(--ok-ink-mute);
}

@media (prefers-reduced-motion:reduce){
  .oktcm *{animation:none!important;transition:none!important;}
}