/* TryCleaning manager space: Bricks TOOLS (2026-10-20).
   Calculator, Sticky notes, To-do list, Timer and stopwatch, World clock: the Tools group of Add a brick.
   Every class starts with bt- (the page also has .rw-, .tcc-, .tcs-, .ws- and the brick's own .bt buttons, so
   nothing here is named .bt, .bt-minus, .bt-plus, .bt-max or .bt-close). Light mode is navy on white like the
   other cards; dark mode reads the page's --tc- tokens from theme.css. Sizes are in rem so the brick's text
   zoom (--bz) scales everything, and the layouts follow the brick's width (container "brick", workspace.css).
   Engine: /bricks-tools.js. Source of truth: trycleaning-site\bricks-tools.css */
.bt-tool{
  --bt-ink:var(--navy,#0D1B4B); --bt-soft:#66708F; --bt-card:#fff; --bt-inset:var(--off-white,#F0F4FF);
  --bt-line:var(--line,rgba(13,27,75,0.12)); --bt-key:#F3F6FD; --bt-key-hover:#E5ECFA; --bt-op:rgba(79,195,247,0.16);
  --bt-op-ink:#0A5E86; --bt-sky:var(--sky,#4FC3F7); --bt-warm:var(--amber,#F2A341); --bt-warm-ink:#9A5A06;
  --bt-good:var(--good,#2E9E6B); --bt-bad:#c0392b; --bt-shadow:0 1px 3px rgba(13,27,75,0.08);
  box-sizing:border-box; min-height:100%; padding:0.75rem; font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:0.9rem; line-height:1.4; color:var(--bt-ink); text-align:left;
}
:root[data-theme="dark"] .bt-tool{
  --bt-ink:var(--tc-text,#e9eefb); --bt-soft:var(--tc-muted,#9fb0cc); --bt-card:var(--tc-surface,#172642);
  --bt-inset:var(--tc-surface-2,#101d33); --bt-line:var(--tc-border,rgba(255,255,255,0.12)); --bt-key:#1e3053;
  --bt-key-hover:#263b63; --bt-op:rgba(79,195,247,0.17); --bt-op-ink:#a7e1fc; --bt-warm-ink:#F7C27A;
  --bt-good:#3fb57c; --bt-bad:var(--tc-bad,#ff9b8f); --bt-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.bt-tool *,.bt-tool *::before,.bt-tool *::after{box-sizing:border-box;}
.bt-tool button,.bt-tool input,.bt-tool select,.bt-tool textarea{font-family:inherit;}
.bt-tool [hidden]{display:none!important;}
.bt-tool button{-webkit-tap-highlight-color:transparent;}
.bt-tool button:disabled{opacity:0.45;cursor:default;}
.bt-svg{width:1.05em;height:1.05em;flex:0 0 auto;display:inline-block;vertical-align:-0.16em;}
.bt-tool .btn{display:inline-flex;align-items:center;justify-content:center;gap:0.35rem;white-space:nowrap;}
.bt-tool .btn-ghost{color:var(--bt-ink);}
.bt-tool .btn-ghost:hover:not(:disabled){border-color:var(--bt-sky);}
.bt-msg{margin:0 0 0.6rem;font-size:0.8rem;font-weight:600;color:var(--bt-warm-ink);}
.bt-empty{margin:0.4rem 0 0;font-size:0.84rem;color:var(--bt-soft);}
.bt-save{font-size:0.74rem;color:var(--bt-soft);}
.bt-save.bt-bad{color:var(--bt-bad);font-weight:700;}
.bt-inp{min-width:0;border:1.5px solid var(--bt-line);border-radius:10px;padding:0.5rem 0.7rem;font-size:0.9rem;color:var(--bt-ink);background:var(--bt-card);outline:none;}
.bt-inp:focus{border-color:var(--bt-sky);}
:root[data-theme="dark"] .bt-tool .bt-inp{background:var(--tc-surface-2,#101d33);color:var(--bt-ink);border-color:rgba(255,255,255,0.16);}
:root[data-theme="dark"] .bt-tool .bt-inp:focus{border-color:var(--bt-sky);}
/* small pill buttons: GST, Copy, quick times */
.bt-chip{display:inline-flex;align-items:center;gap:0.3rem;border:1px solid var(--bt-line);background:var(--bt-card);color:var(--bt-ink);border-radius:999px;padding:0.38rem 0.75rem;font-size:0.78rem;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.2;}
.bt-chip:hover{border-color:var(--bt-sky);background:var(--bt-op);}
.bt-chip[aria-pressed="true"]{border-color:var(--bt-sky);background:var(--bt-op);color:var(--bt-op-ink);}
.bt-ibtn{flex:0 0 auto;width:1.9rem;height:1.9rem;border:none;background:transparent;color:var(--bt-soft);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:0.95rem;}
.bt-ibtn:hover{background:rgba(192,57,43,0.1);color:var(--bt-bad);}
.bt-link{border:none;background:none;color:var(--bt-op-ink);font-weight:600;font-size:0.76rem;cursor:pointer;padding:0.15rem 0.35rem;border-radius:6px;text-transform:none;letter-spacing:0;}
.bt-link:hover:not(:disabled){background:var(--bt-op);}
.bt-sub{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--bt-soft);margin-bottom:0.4rem;}

/* ---------------- calculator ---------------- */
#view-tool-calc{display:flex;flex-direction:column;}
.bt-calc{flex:1;display:flex;flex-direction:column;gap:0.8rem;width:100%;max-width:58rem;margin:0 auto;outline:none;}
/* theme.css rings every [tabindex] on focus (:root [tabindex]:focus-visible); the pad shows its focus on the display */
:root .bt-tool .bt-calc:focus-visible{outline:none;}
.bt-calc-main{display:flex;flex-direction:column;gap:0.6rem;flex:1;min-width:0;}
.bt-disp{background:var(--bt-inset);border:1px solid var(--bt-line);border-radius:14px;padding:0.45rem 0.85rem 0.55rem 0.5rem;text-align:right;display:flex;flex-direction:column;justify-content:flex-end;gap:0.1rem;min-height:4.6rem;transition:border-color .15s,box-shadow .15s;}
/* the calculator is listening to the keyboard: its display gets the sky ring */
.bt-calc:focus .bt-disp,.bt-calc:focus-within .bt-disp{border-color:var(--bt-sky);box-shadow:0 0 0 2px rgba(79,195,247,0.28);}
.bt-disp-top{display:flex;align-items:flex-start;gap:0.5rem;}
.bt-copybtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.3rem;border:1px solid transparent;background:transparent;color:var(--bt-soft);border-radius:8px;padding:0.2rem 0.45rem;font-size:0.74rem;font-weight:600;cursor:pointer;line-height:1.2;}
.bt-copybtn:hover{color:var(--bt-op-ink);background:var(--bt-op);}
.bt-calc-expr{flex:1;min-width:0;font-size:0.98rem;color:var(--bt-soft);overflow-wrap:anywhere;min-height:1.4em;max-height:4.3em;overflow:auto;font-variant-numeric:tabular-nums;}
.bt-calc-res{padding-left:0.35rem;}
.bt-calc-res{font-size:2rem;font-weight:700;letter-spacing:-0.01em;line-height:1.15;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;color:var(--bt-ink);min-height:1.15em;}
.bt-calc-res.bt-prev{color:var(--bt-soft);font-weight:600;}
.bt-calc-res.bt-err{color:var(--bt-bad);font-size:1.05rem;font-weight:700;padding-top:0.5rem;}
.bt-gst{display:flex;flex-wrap:wrap;gap:0.4rem;}
.bt-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(2.5rem,1fr);gap:0.4rem;flex:1;max-height:25rem;}
.bt-key{border:1px solid transparent;background:var(--bt-key);color:var(--bt-ink);border-radius:12px;font-size:1.2rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;touch-action:manipulation;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums;transition:background .12s,transform .08s;}
.bt-key:hover{background:var(--bt-key-hover);}
.bt-key:active,.bt-key.bt-hit{transform:scale(0.96);}
.bt-key.bt-op{background:var(--bt-op);color:var(--bt-op-ink);font-size:1.35rem;}
.bt-key.bt-op:hover{background:rgba(79,195,247,0.28);}
.bt-key.bt-fn{color:var(--bt-soft);font-size:1rem;}
.bt-key.bt-eq{background:var(--bt-sky);color:#0b1526;font-size:1.4rem;}
.bt-key.bt-eq:hover{background:#7fd3fb;}
.bt-calc-side{min-width:0;border-top:1px solid var(--bt-line);padding-top:0.7rem;}
.bt-tape{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.3rem;}
.bt-tapei{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:0.6rem;border:1px solid var(--bt-line);background:var(--bt-card);color:var(--bt-ink);border-radius:9px;padding:0.4rem 0.6rem;cursor:pointer;text-align:left;font-size:0.8rem;}
.bt-tapei:hover{border-color:var(--bt-sky);background:var(--bt-op);}
.bt-tape-e{color:var(--bt-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.bt-tape-r{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bt-none{font-size:0.8rem;color:var(--bt-soft);padding:0.2rem 0;}
@container brick (min-width:560px){
  .bt-calc{flex-direction:row;align-items:stretch;}
  .bt-calc-side{flex:0 0 15.5rem;width:15.5rem;border-top:none;border-left:1px solid var(--bt-line);padding:0 0 0 0.9rem;overflow:auto;}
  .bt-calc-res{font-size:2.4rem;}
}

/* ---------------- sticky notes ---------------- */
.bt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:0.4rem 0.75rem;margin-bottom:0.75rem;}
.bt-meta{font-size:0.78rem;color:var(--bt-soft);}
.bt-bar .bt-save{margin-left:auto;}
.bt-ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:0.7rem;align-items:start;}
.bt-note{--bt-n-bg:#FFF5C4;--bt-n-line:#EBD67A;--bt-n-ink:#2a2410;
  position:relative;display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--bt-n-line);background:var(--bt-n-bg);box-shadow:var(--bt-shadow);min-height:9.5rem;overflow:hidden;}
.bt-note.bt-c1{--bt-n-bg:#FFE4EA;--bt-n-line:#F1BCCA;--bt-n-ink:#3a1520;}
.bt-note.bt-c2{--bt-n-bg:#DFF1FD;--bt-n-line:#A9D6F3;--bt-n-ink:#0D1B4B;}
.bt-note.bt-c3{--bt-n-bg:#E0F5E8;--bt-n-line:#A8D9BA;--bt-n-ink:#123522;}
.bt-note.bt-c4{--bt-n-bg:#ECE6FF;--bt-n-line:#C8BBF2;--bt-n-ink:#24184d;}
:root[data-theme="dark"] .bt-note{--bt-n-bg:#3a3418;--bt-n-line:#5d5326;--bt-n-ink:#f6efcf;}
:root[data-theme="dark"] .bt-note.bt-c1{--bt-n-bg:#3c2230;--bt-n-line:#61374b;--bt-n-ink:#fbe3ea;}
:root[data-theme="dark"] .bt-note.bt-c2{--bt-n-bg:#15324b;--bt-n-line:#28537a;--bt-n-ink:#e0f1fd;}
:root[data-theme="dark"] .bt-note.bt-c3{--bt-n-bg:#183a2a;--bt-n-line:#2a5d43;--bt-n-ink:#ddf5e7;}
:root[data-theme="dark"] .bt-note.bt-c4{--bt-n-bg:#2c2651;--bt-n-line:#463d7c;--bt-n-ink:#ebe6ff;}
/* the extra .bt-tool and element name out-rank theme.css's dark rule for every textarea */
.bt-tool .bt-note textarea.bt-ntext,
:root[data-theme="dark"] .bt-tool .bt-note textarea.bt-ntext{flex:1 1 auto;display:block;width:100%;min-height:7rem;max-height:22rem;field-sizing:content;resize:none;border:none;background:transparent;color:var(--bt-n-ink);font-size:0.9rem;line-height:1.5;padding:0.7rem 0.8rem 0.35rem;outline:none;}
.bt-tool .bt-note textarea.bt-ntext::placeholder{color:var(--bt-n-ink);opacity:0.45;}
.bt-note:focus-within{border-color:var(--bt-sky);box-shadow:0 0 0 2px rgba(79,195,247,0.35);}
/* the card carries the focus ring, so the textarea's own (theme.css, offset 3 px) would only be clipped */
:root .bt-tool .bt-note textarea.bt-ntext:focus-visible{outline:none;}
.bt-nfoot{display:flex;align-items:center;gap:0.35rem;padding:0.25rem 0.35rem 0.35rem 0.65rem;}
.bt-dots{display:flex;gap:0.3rem;flex-wrap:wrap;}
.bt-dot{width:1.05rem;height:1.05rem;border-radius:50%;border:1.5px solid rgba(13,27,75,0.22);background:var(--bt-d);cursor:pointer;padding:0;}
.bt-dot.bt-c0{--bt-d:#F6D652;} .bt-dot.bt-c1{--bt-d:#F28FA9;} .bt-dot.bt-c2{--bt-d:#5BC2F2;} .bt-dot.bt-c3{--bt-d:#4DBA7D;} .bt-dot.bt-c4{--bt-d:#9C88EA;}
:root[data-theme="dark"] .bt-dot{border-color:rgba(255,255,255,0.35);}
.bt-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bt-n-bg),0 0 0 3.5px var(--bt-n-ink);}
.bt-ncount{margin-left:auto;font-size:0.7rem;color:var(--bt-n-ink);opacity:0.7;font-variant-numeric:tabular-nums;}
.bt-note .bt-ibtn{color:var(--bt-n-ink);opacity:0.6;}
.bt-note .bt-ibtn:hover{opacity:1;background:rgba(192,57,43,0.12);color:var(--bt-bad);}
.bt-ask{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem;padding:0.55rem 0.65rem;background:var(--bt-card);border-top:1px solid var(--bt-line);font-size:0.8rem;font-weight:600;color:var(--bt-ink);}
.bt-ask span{flex:1 1 100%;}
.bt-mini{border:1px solid var(--bt-line);background:var(--bt-card);color:var(--bt-ink);border-radius:8px;padding:0.35rem 0.7rem;font-size:0.78rem;font-weight:700;cursor:pointer;}
.bt-mini.bt-danger{background:#c0392b;border-color:#c0392b;color:#fff;}
.bt-mini.bt-danger:hover{background:#a93226;}

/* ---------------- to-do list ---------------- */
.bt-todo{max-width:46rem;margin:0 auto;}
.bt-tadd{display:flex;gap:0.45rem;margin:0 0 0.6rem;}
.bt-tadd .bt-inp{flex:1;}
.bt-tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.bt-ti{display:flex;align-items:flex-start;gap:0.6rem;padding:0.45rem 0.15rem 0.45rem 0.25rem;border-bottom:1px solid var(--bt-line);}
.bt-tick{flex:0 0 auto;width:1.4rem;height:1.4rem;margin-top:0.02rem;border-radius:6px;border:1.8px solid var(--bt-soft);background:transparent;color:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:0.9rem;}
.bt-tick:hover{border-color:var(--bt-good);color:var(--bt-good);}
.bt-ti.bt-done .bt-tick{background:var(--bt-good);border-color:var(--bt-good);color:#fff;}
.bt-ttext{flex:1;min-width:0;overflow-wrap:anywhere;padding-top:0.1rem;cursor:pointer;}
.bt-ti.bt-done .bt-ttext{text-decoration:line-through;color:var(--bt-soft);}
.bt-ti .bt-ibtn{width:1.7rem;height:1.7rem;margin-top:-0.12rem;opacity:0.7;}
.bt-ti .bt-ibtn:hover{opacity:1;}
/* v2 (20 Oct 2026): Add to board, the green tick once it is on the Team board, and the edit box */
.bt-tkb{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.3rem;margin-top:-0.05rem;border:1px solid var(--bt-line);background:transparent;color:var(--bt-ink);border-radius:999px;padding:0.2rem 0.6rem;font-size:0.74rem;font-weight:700;line-height:1.3;cursor:pointer;white-space:nowrap;}
.bt-tkb:hover:not(:disabled){border-color:var(--bt-sky);background:var(--bt-op);}
.bt-tkb .bt-svg{width:0.9rem;height:0.9rem;}
.bt-tkb.bt-on{color:var(--bt-good);border-color:rgba(46,158,107,0.45);background:rgba(46,158,107,0.1);}
.bt-tkb.bt-on:hover{background:rgba(46,158,107,0.18);border-color:var(--bt-good);}
:root[data-theme="dark"] .bt-tkb.bt-on{border-color:rgba(63,181,124,0.5);background:rgba(63,181,124,0.14);}
.bt-tool .bt-ti .bt-tedin{flex:1;min-width:0;padding:0.25rem 0.5rem;margin-top:-0.15rem;font-size:inherit;}
@container brick (max-width:420px){ .bt-tkb span{display:none;} .bt-tkb{padding:0.25rem 0.4rem;} }
.bt-tfoot{display:flex;align-items:center;flex-wrap:wrap;gap:0.4rem 0.7rem;margin-top:0.75rem;}
.bt-tcount{font-size:0.84rem;font-weight:700;}
.bt-tfoot .bt-cleardone{margin-left:auto;}

/* ---------------- timer and stopwatch ---------------- */
.bt-timer{max-width:34rem;margin:0 auto;display:flex;flex-direction:column;gap:0.65rem;}
.bt-seg{display:inline-flex;align-self:center;background:var(--bt-inset);border:1px solid var(--bt-line);border-radius:11px;padding:0.2rem;gap:0.2rem;}
.bt-seg button{position:relative;border:none;background:transparent;color:var(--bt-soft);font-weight:700;font-size:0.82rem;padding:0.42rem 1rem;border-radius:8px;cursor:pointer;}
.bt-seg button[aria-selected="true"]{background:var(--bt-card);color:var(--bt-ink);box-shadow:var(--bt-shadow);}
:root[data-theme="dark"] .bt-seg button[aria-selected="true"]{background:var(--bt-key-hover);}
.bt-seg button.bt-dotted::after{content:"";position:absolute;top:0.35rem;right:0.35rem;width:0.4rem;height:0.4rem;border-radius:50%;background:var(--bt-warm);}
.bt-pane{display:flex;flex-direction:column;gap:0.65rem;}
.bt-big{font-size:3rem;font-size:clamp(2.5rem,15cqi,6.5rem);font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;line-height:1.05;color:var(--bt-ink);}
.bt-prog{height:6px;border-radius:6px;background:var(--bt-inset);overflow:hidden;}
.bt-prog>span{display:block;height:100%;width:0;background:var(--bt-sky);border-radius:6px;transition:width .2s linear;}
.bt-tnote{text-align:center;font-size:0.82rem;color:var(--bt-soft);min-height:1.2em;}
.bt-row{display:flex;flex-wrap:wrap;gap:0.45rem;justify-content:center;align-items:center;}
.bt-ctl .btn{min-width:7rem;}
.bt-tool .btn-sky.bt-warm{background:var(--bt-warm);color:#2a1a02;}
:root[data-theme="dark"] .bt-tool .btn-sky.bt-warm{background:var(--bt-warm);color:#2a1a02!important;}
.bt-lbl{font-size:0.78rem;font-weight:700;color:var(--bt-soft);margin-right:0.15rem;}
.bt-custom .bt-inp{width:4.6rem;flex:0 0 4.6rem;text-align:center;padding:0.4rem 0.3rem;}
.bt-colon{font-weight:700;color:var(--bt-soft);}
.bt-tmsg{text-align:center;margin:0;}
.bt-tool.bt-isdone .bt-tleft{color:var(--bt-warm-ink);}
.bt-tool.bt-isdone .bt-tnote{color:var(--bt-warm-ink);font-weight:700;font-size:0.95rem;}
.bt-tool.bt-isdone .bt-prog>span{background:var(--bt-warm);}
.bt-laps{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums;max-height:16rem;overflow:auto;}
.bt-laps li{display:flex;gap:0.8rem;padding:0.4rem 0.3rem;border-bottom:1px solid var(--bt-line);font-size:0.86rem;}
.bt-lapn{flex:1;font-weight:600;}
.bt-laps-s{font-weight:700;}
.bt-lapt{color:var(--bt-soft);min-width:5.5rem;text-align:right;}
/* time is up: the brick body pulses a warm tint and the brick gets a warm edge until Stop or Reset */
.brick-body.bt-flash{animation:bt-pulse 1s ease-in-out infinite;}
@keyframes bt-pulse{0%,100%{background-color:transparent;}50%{background-color:rgba(242,163,65,0.24);}}
.brick.bt-alarm{outline:3px solid var(--amber,#F2A341);outline-offset:-3px;}
@media (prefers-reduced-motion:reduce){ .brick-body.bt-flash{animation:none;background-color:rgba(242,163,65,0.16);} }

/* ---------------- world clock ---------------- */
.bt-clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0.5rem;}
.bt-crow{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.4rem 0.6rem 0.8rem;border:1px solid var(--bt-line);border-radius:12px;background:var(--bt-card);}
.bt-crow.bt-home{background:var(--bt-inset);}
.bt-cinfo{flex:1;min-width:0;}
.bt-city{font-weight:700;font-size:0.95rem;}
.bt-cmeta{font-size:0.76rem;color:var(--bt-soft);}
.bt-ctime{font-size:1.45rem;font-size:clamp(1.2rem,6cqi,2rem);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-0.01em;}
.bt-cspace{visibility:hidden;}
.bt-cadd{margin-top:0.7rem;display:flex;}
.bt-csel{flex:0 1 16rem;cursor:pointer;}