/* "My tasks" card - Enigma Tasks (2026-11-02, js/tasks-gadget.js).
   HOME PAGE ONLY since 2026-11-08 (Darren: "the task only appear in landing page the rest no needed to show they can
   see from the top"): docked beside the tiles (desktop) or above them (phone). Other pages show only the count on
   the top bar's task icon, so the edge tab, drawer, pin and "make room" rules are gone
   (backup: Backups/web_bak/Mobile/css/tasks-gadget.css.bak_20261108).
   Colours come from Css/themes.css, so the card follows the operator's theme, including "black".
   Urgency colours are mixed INTO the surface so they read on light and dark themes alike. */
.etg {
  --etg-over: #c2410c;
  --etg-today: #b45309;
  --etg-new: #1d4ed8;
  --etg-shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05);
  width: 264px; background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--line, #e5e7eb); border-radius: 14px; box-shadow: var(--etg-shadow);
  overflow: hidden; font: 13px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left;
}
.etg * { box-sizing: border-box; }
.etg a { color: inherit; text-decoration: none; }

.etg-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 12px; }
.etg-mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none;
            background: var(--brand-tint, #eef3e2); color: var(--brand, #4B6F0A); font-size: 13px; }
.etg-head h2 { margin: 0; font-size: 13.5px; line-height: 1.2; font-weight: 700; color: var(--text, #0f172a); }
.etg-head small { display: block; color: var(--muted, #64748b); font-size: 10.5px; line-height: 1.3; }
.etg-icon { margin-left: auto; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
            color: var(--muted, #64748b); }
.etg-icon:hover { background: var(--bg, #f3f4f6); color: var(--text, #0f172a); }
.etg-icon:focus-visible { outline: 2px solid var(--brand, #4B6F0A); outline-offset: 1px; }

.etg-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }
.etg-cnt { display: block; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 5px 8px 4px; min-width: 0; }
.etg-cnt b { display: block; font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.etg-cnt span { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted, #64748b); white-space: nowrap; }
.etg-cnt:hover { border-color: var(--muted, #64748b); }
.etg-cnt.over { background: color-mix(in srgb, var(--etg-over) 8%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--etg-over) 32%, var(--surface, #fff)); }
.etg-cnt.over b { color: var(--etg-over); }
.etg-cnt.new { background: color-mix(in srgb, var(--etg-new) 7%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--etg-new) 28%, var(--surface, #fff)); }
.etg-cnt.new b { color: var(--etg-new); }
.etg-cnt.zero { background: var(--surface, #fff); border-color: var(--line, #e5e7eb); }
.etg-cnt.zero b { color: var(--muted, #64748b); opacity: .55; }

.etg-sec { font-size: 10px; font-weight: 700; letter-spacing: .09em; color: var(--muted, #64748b); padding: 8px 14px 2px;
           border-top: 1px solid var(--line, #e5e7eb); }
.etg-rows { padding: 0 5px 5px; }
.etg-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px;
           padding: 6px 8px 6px 14px; border-radius: 8px; }
.etg-row:hover { background: var(--bg, #f3f4f6); }
.etg-row::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--line, #e5e7eb); }
.etg-row.p-high::before { background: var(--etg-over); }
.etg-row.p-normal::before { background: var(--accent, #E5A100); }
.etg-ttl { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etg-when { font-size: 10.5px; color: var(--muted, #64748b); font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
.etg-row.is-new .etg-when { color: var(--etg-new); font-weight: 700; }
.etg-row.is-new .etg-when::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
                                    background: var(--etg-new); margin-right: 4px; vertical-align: 1px; }
.etg-meta { grid-column: 1 / -1; font-size: 11px; color: var(--muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etg-due { font-weight: 600; }
.etg-due.over { color: var(--etg-over); }
.etg-due.today { color: var(--etg-today); }
.etg-empty { padding: 14px; color: var(--muted, #64748b); font-size: 12px; text-align: center; }

.etg-foot { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px;
            border-top: 1px solid var(--line, #e5e7eb); background: var(--bg, #f3f4f6); }
.etg-foot a { font-size: 12px; font-weight: 600; color: var(--brand, #4B6F0A); display: inline-flex; align-items: center; gap: 4px; }
.etg-foot a:hover { text-decoration: underline; }

/* ---- home page: docked beside the tiles ---- */
.etg-home { gap: 0; }
.etg-dock { flex: none; position: sticky; top: calc(var(--sx-header-h, 56px) + 16px); margin: 20px 4px 0 16px; }
.etg-dock:empty { display: none; }

/* ---- a task given to you while a page is open (any page) ---- */
.etg-toast { position: fixed; right: 16px; top: calc(var(--sx-header-h, 56px) + 12px); z-index: 1060; width: min(320px, calc(100% - 32px));
             background: var(--surface, #fff); color: var(--text, #0f172a); border: 1px solid var(--line, #e5e7eb); border-left: 4px solid #1d4ed8;
             border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); padding: 11px 13px;
             font: 12.5px/1.45 Inter, system-ui, sans-serif; animation: etg-in .22s ease-out; }
.etg-toast b { display: block; }
.etg-toast p { margin: 2px 0 8px; color: var(--text2, #334155); }
.etg-toast button { border: 1px solid var(--brand, #4B6F0A); background: var(--brand, #4B6F0A); color: var(--brand-on, #fff);
                    border-radius: 8px; padding: 4px 11px; font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; }
@keyframes etg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

html.sx-embed .etg-dock, html.sx-embed .etg-toast { display: none !important; }

/* ---- phone ---- */
@media (max-width: 640px) {
  /* home: the same card, full width, ABOVE the tiles - there is no room beside them */
  .etg-home { flex-direction: column; align-items: stretch !important; }
  .etg-dock { order: -1; position: static; margin: 12px 12px 0; }
  .etg-dock .etg { width: 100%; }

  .etg-toast { left: 12px; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .etg-toast { animation: none !important; } }