/* tecal styles: tokens first, then components. Tag colors come from #tagcss (app.js) as --bg / --fg. */

/* ======================================== tokens */
:root {
  --c-bg: #fff;
  --c-text: #222;
  --c-muted: #888;
  --c-line: #e2e2e2;
  --c-we: #f3f3f3;
  --c-today: #fff6cc;
  --c-accent: #1e6b35;
  --c-pulse: #f2b705;
  --c-chip: #ebebeb;
  --c-chip-line: rgb(0 0 0 / .18);   /* over --bg: darker shade of any tag color */
  --c-bad: #c62828;
  --c-bad-bg: #fff0f0;
  --r: 8px;
  --gap: 8px;
  --fs: 15px;
  --fs-s: 12.5px;
  --fs-chip: 13px;
}

/* ======================================== base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--fs)/1.35 system-ui, sans-serif; }
h2 { font-size: var(--fs); margin: 0 0 var(--gap); color: var(--c-accent); }
a { color: var(--c-accent); }
input, textarea, button { font: inherit; color: inherit; }
input, textarea { border: 1px solid var(--c-line); border-radius: var(--r); padding: 5px 7px; background: var(--c-bg); }
input:focus, textarea:focus, .md:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.bad { border-color: var(--c-bad); background: var(--c-bad-bg); }
.lbl, label { color: var(--c-muted); font-size: var(--fs-s); }

/* ======================================== buttons */
.ico { border: 0; background: none; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1;
  color: var(--c-accent); cursor: pointer; }
@media (hover: hover) { .ico:hover { background: var(--c-chip); } }
.btns { display: flex; gap: var(--gap); margin-top: 12px; }
.btn { padding: 7px 16px; border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-bg);
  cursor: pointer; }
.btn:hover { border-color: var(--c-muted); }
.btn.main { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn.danger { margin-left: auto; color: var(--c-bad); }
.btn:disabled { opacity: .5; cursor: wait; }

/* ======================================== chips: events and tags, every view */
.chip { display: block; margin: 1px 0; padding: 0 4px; border: 1px solid var(--c-chip-line); border-radius: var(--r);
  font-size: var(--fs-chip); background: var(--bg, var(--c-chip)); color: var(--fg, var(--c-text)); overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; }
span.chip { display: inline-block; margin: 0; }
.chip b { font-weight: 600; }
.chip i { opacity: .7; }
.chip.sel { outline: 2px solid var(--c-accent); }
.chip.on { outline: 2px solid var(--c-text); outline-offset: 1px; }
/* multi-day span: open square side toward the next piece (bridge) */
.chip.pre { border-left-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.chip.post { border-right-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chip.ph { background: none; border: 1px dashed var(--c-muted); color: var(--c-muted); }
.chip.nx { background: none; border-color: transparent; }   /* next list line: color on its tag pill only */
.pill { border-radius: 999px; padding: 0 6px; font-size: var(--fs-s); overflow: visible; }   /* visible: text baseline */

/* ======================================== header */
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px var(--gap); }
.logo { height: 40px; }
.mid { text-align: center; }
#clock { color: var(--c-muted); font-size: var(--fs-s); }
.nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
#month { min-width: 9.5em; font-size: 18px; font-weight: 600; }
#month::first-letter { text-transform: uppercase; }
.who { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#user { color: var(--c-muted); font-size: var(--fs-s); }
#logout svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#toggle { display: none; }

/* ======================================== calendar */
#cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
#cal th { padding: 3px 0; font-size: var(--fs-s); font-weight: 600; color: var(--c-muted); }
#cal th .s { display: none; }
#cal td { height: 74px; padding: 2px 3px; border: 1px solid var(--c-line); vertical-align: top; cursor: pointer; }
#cal .we { background: var(--c-we); }
#cal td.out > * { opacity: .45; }
#cal td.past { color: var(--c-muted); }
#cal td.past .chip { opacity: .55; }
#cal td.today { background: var(--c-today); }
#cal td.today .num { color: var(--c-accent); font-weight: 700; }
.num { font-size: var(--fs-s); text-align: right; }
.pulse { animation: pulse 1.5s ease-in-out 3; }
@keyframes pulse { 50% { background: #fff1b8; box-shadow: inset 0 0 0 3px var(--c-pulse); } }

/* ======================================== Type list + tag manager (gear) */
#ftags .chip { font-size: var(--fs-s); }
#ftags input[type=color] { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; }
#ftags .del { margin-left: 6px; color: var(--c-bad); }
#gear { margin-left: auto; width: 24px; height: 22px; font-size: 16px; color: var(--c-muted); }
#gear.on { color: var(--c-text); background: var(--c-chip); }

/* ======================================== next events + form */
.bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px var(--gap); }
#upcoming .nd { margin-top: 6px; font-size: var(--fs-s); font-weight: 600; }
#upcoming > .chip { margin-left: 16px; }
#form { align-self: start; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.row > label, .row > .lbl { width: 6.2em; }
#ftags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1; }
.row:has(> #ftags) { align-items: baseline; }   /* label on first chip line */
#fsubj, #fdet, .md, #fmail { flex: 1; min-width: 10em; }
.date { width: 7.6em; }
.hour { width: 4.6em; }
#fdur, #fahead { width: 7em; }
#form.lead-dur .r-end, #form.lead-end .r-dur { display: none; }
.swap { font-size: var(--fs-s); }
#fdet { min-height: 6em; resize: vertical; }
.md { min-height: 2.2em; padding: 5px 7px; border: 1px dashed var(--c-line); border-radius: var(--r);
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.md ul { margin: 0; padding-left: 1.2em; }

/* ======================================== dialog + status */
dialog { border: 1px solid var(--c-line); border-radius: 6px; padding: 16px; max-width: min(26em, 90vw); }
dialog::backdrop { background: rgb(0 0 0 / .25); }
dialog p { margin: 0 0 4px; }
#status { position: fixed; left: var(--gap); right: var(--gap); bottom: var(--gap); padding: 6px 10px;
  border-radius: var(--r); background: var(--c-bad); color: #fff; }

/* ======================================== narrow screens (TD2.4, TD3.3) */
@media (max-width: 759px) {
  :root { --fs-chip: 11px; }
  #toggle { display: block; }
  #user { flex-basis: 100%; text-align: right; }   /* above the buttons, like #clock above .nav */
  .logo { height: 28px; }                           /* 360px wide: logo + nav + 2 buttons fit */
  header .ico { width: 32px; }
  #month { min-width: 8em; font-size: 16px; }
  #cal th .l { display: none; }
  #cal th .s { display: inline; }
  #cal td { height: 54px; padding: 1px; }
  .chip { padding: 0 2px; white-space: nowrap; }
  #upcoming > .chip { white-space: normal; font-size: var(--fs-s); }
  .bottom { grid-template-columns: 1fr; }
  body.view-next #calView, body:not(.view-next) #nextView { display: none; }
}