/* Mollab theme — ONE file for every app (owner, 19 Oct 2026).
 *
 * Taken from Canvas (Dev/gantt, the built mollab_app.html): IBM Plex Sans + Thai, white light theme with soft
 * drop shadows, deep olive dark theme, bronze accent, floating panels with 14px corners.
 * Every app maps its own variables onto these (an app's --surface becomes var(--mo-surface), …), so changing
 * a colour here changes it everywhere. Light/dark: <html data-theme="light|dark">; with neither set the
 * viewer's system setting decides.
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Sans+Thai:wght@300;400;500;600&display=swap");

:root {
  /* colours — light (Canvas's white board theme) */
  --mo-surface: #FFFFFF;          /* panels, cards, page */
  --mo-canvas: #FFFFFF;           /* the board / work area behind the panels */
  --mo-ink: #1D1D1D;              /* main text */
  --mo-ink-2: #444444;            /* secondary text, icons */
  --mo-muted: #8C8C8C;            /* hints, captions */
  --mo-hair: rgba(0, 0, 0, .10);  /* hairlines, dividers */
  --mo-granite: #B4B4B4;          /* "|" separators, disabled */
  --mo-hover: #F3F3F3;            /* row / button hover */
  --mo-alt: #F7F7F7;              /* zebra rows, subtle fills */
  --mo-on: color-mix(in srgb, #667061 16%, #FFFFFF);   /* a chosen tool / view */
  --mo-accent: #B48B5E;           /* bronze: links, focus, selected tags */
  --mo-accent-tx: #826444;        /* bronze text on light */
  --mo-accent-lt: #C9A87F;
  --mo-green: #667061;            /* Canvas r1: primary buttons */
  --mo-green-2: #7A8578;
  --mo-ok: #4F7A5A; --mo-warn: #B9832F; --mo-bad: #A85C5C;
  /* shadows */
  --mo-float: 0 8px 28px rgba(0, 0, 0, .13), 0 1px 3px rgba(0, 0, 0, .08);   /* floating panels */
  --mo-up: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .08);      /* cards */
  --mo-up-s: 0 1px 2px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .07);     /* small raised */
  --mo-in: inset 0 1px 3px rgba(0, 0, 0, .10);                                 /* pressed */
  /* type */
  --mo-font: "IBM Plex Sans", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;
  --mo-fs-xs: 10.5px; --mo-fs-s: 11.5px; --mo-fs: 12.5px; --mo-fs-m: 13px; --mo-fs-l: 15px; --mo-fs-xl: 18px;
  --mo-fw: 400; --mo-fw-strong: 500;
  --mo-caps: .14em;               /* letter-spacing of small capitals labels */
  /* corners */
  --mo-r-panel: 14px; --mo-r-pop: 12px; --mo-r-btn: 9px; --mo-r-s: 8px; --mo-r-xs: 6px; --mo-r-pill: 999px;
  /* sizes and spacing */
  --mo-btn: 32px;                 /* header buttons */
  --mo-tool: 38px;                /* tool-rail buttons */
  --mo-gap-xs: 2px; --mo-gap-s: 4px; --mo-gap: 6px; --mo-gap-m: 8px; --mo-gap-l: 12px; --mo-gap-xl: 16px;
  --mo-edge: 12px;                /* panels sit this far from the window edge */
  --mo-ease: .18s cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}

/* dark — Canvas's olive night theme */
:root[data-theme="dark"] {
  --mo-surface: #232621; --mo-canvas: #1C1F1A;
  --mo-ink: #EDE9E0; --mo-ink-2: #B7B3A8; --mo-muted: #8A867C;
  --mo-hair: rgba(183, 179, 168, .18); --mo-granite: #6F6B62;
  --mo-hover: color-mix(in srgb, #EDE9E0 7%, #232621); --mo-alt: color-mix(in srgb, #EDE9E0 4%, #232621);
  --mo-on: color-mix(in srgb, #C9D3CB 16%, #232621);
  --mo-accent: #D9AC7C; --mo-accent-tx: #E0B98D; --mo-accent-lt: #B48B5E;
  --mo-green: #C9D3CB; --mo-green-2: #B0BCB2;
  --mo-float: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --mo-up: 0 6px 18px rgba(0, 0, 0, .38); --mo-up-s: 0 3px 8px rgba(0, 0, 0, .32);
  --mo-in: inset 0 1px 3px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mo-surface: #232621; --mo-canvas: #1C1F1A;
    --mo-ink: #EDE9E0; --mo-ink-2: #B7B3A8; --mo-muted: #8A867C;
    --mo-hair: rgba(183, 179, 168, .18); --mo-granite: #6F6B62;
    --mo-hover: color-mix(in srgb, #EDE9E0 7%, #232621); --mo-alt: color-mix(in srgb, #EDE9E0 4%, #232621);
    --mo-on: color-mix(in srgb, #C9D3CB 16%, #232621);
    --mo-accent: #D9AC7C; --mo-accent-tx: #E0B98D; --mo-accent-lt: #B48B5E;
    --mo-green: #C9D3CB; --mo-green-2: #B0BCB2;
    --mo-float: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
    --mo-up: 0 6px 18px rgba(0, 0, 0, .38); --mo-up-s: 0 3px 8px rgba(0, 0, 0, .32);
    --mo-in: inset 0 1px 3px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

[hidden] { display: none !important; }   /* as in Canvas: an element's own display never beats hidden */

/* ---- shared building blocks (used by the shell; apps may use them too) ---------------------------------- */
.mo-panel { position: fixed; z-index: 40; background: var(--mo-surface); border-radius: var(--mo-r-panel);
  box-shadow: var(--mo-float); display: flex; align-items: center; gap: var(--mo-gap-xs); padding: 5px 6px; }
.mo-btn { border: 0; background: transparent; border-radius: var(--mo-r-btn); height: var(--mo-btn); min-width: var(--mo-btn);
  padding: 0 9px; color: var(--mo-ink-2); font: var(--mo-fs) var(--mo-font); display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.mo-btn:hover { background: var(--mo-hover); color: var(--mo-ink); }
.mo-btn.on { background: var(--mo-on); color: var(--mo-ink); }
.mo-btn.pri { background: var(--mo-green); color: var(--mo-surface); font-weight: var(--mo-fw-strong); }
.mo-btn svg, .mo-tool svg { width: 18px; height: 18px; flex: none; }
.mo-tool { border: 0; background: transparent; border-radius: var(--mo-r-btn); width: var(--mo-tool); height: var(--mo-tool);
  color: var(--mo-ink-2); display: grid; place-items: center; cursor: pointer; position: relative; }
.mo-tool:hover { background: var(--mo-hover); color: var(--mo-ink); }
.mo-tool.on { background: var(--mo-on); color: var(--mo-ink); }
.mo-sep { width: 1px; height: 20px; background: var(--mo-hair); margin: 0 var(--mo-gap-s); flex: none; }
.mo-hsep { height: 1px; width: 26px; background: var(--mo-hair); margin: var(--mo-gap-s) 0; flex: none; }
.mo-pop { position: fixed; z-index: 60; background: var(--mo-surface); border-radius: var(--mo-r-pop); box-shadow: var(--mo-float);
  border: 1px solid var(--mo-hair); padding: var(--mo-gap); min-width: 200px; }
.mo-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; text-align: left;
  font: var(--mo-fs) var(--mo-font); color: var(--mo-ink-2); padding: 7px 9px; border-radius: var(--mo-r-s); cursor: pointer; }
.mo-item:hover, .mo-item.on { background: var(--mo-hover); color: var(--mo-ink); }
.mo-item svg { width: 16px; height: 16px; flex: none; color: var(--mo-ink-2); }
.mo-item kbd, .mo-kbd { margin-left: auto; font: var(--mo-fs-xs) var(--mo-font); color: var(--mo-muted); border: 1px solid var(--mo-hair);
  border-radius: 5px; padding: 0 5px; }
.mo-input { font: var(--mo-fs) var(--mo-font); color: var(--mo-ink); background: var(--mo-surface); border: 1px solid var(--mo-hair);
  border-radius: var(--mo-r-s); padding: 7px 10px; outline: none; }
.mo-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mo-fs-s); color: var(--mo-ink-2); padding: 3px 6px 3px 9px;
  border-radius: var(--mo-r-pill); box-shadow: var(--mo-up-s); white-space: nowrap; background: var(--mo-surface); }
.mo-tag b { font-weight: var(--mo-fw-strong); color: var(--mo-accent-tx); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mo-av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 600 10px var(--mo-font); display: inline-flex; align-items: center;
  justify-content: center; box-shadow: 0 0 0 2px var(--mo-surface); flex: none; }
.mo-cap { font-size: var(--mo-fs-xs); letter-spacing: var(--mo-caps); text-transform: uppercase; color: var(--mo-muted); }
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 80; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  background: var(--mo-ink); color: var(--mo-surface); font: var(--mo-fs-s) var(--mo-font); padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; }
.mo-rail [data-tip]:hover::after { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }