/* O&L Time side modules (2026-08-18): header circles, TODO list, TAX calendar */
:root { --hi:#a3323d; --hibg:#fbe6e8; --lo:#6b6a66; --lobg:#efeeea; --warn:#8a5a00; --warnbg:#fff3d6;
  --tfl:#185fa5; --obh:#3b6d11; }
@media (prefers-color-scheme: dark) {
  :root { --hi:#f0a0a8; --hibg:#4a1a20; --lo:#a3a19a; --lobg:#2b2b29; --warn:#f2c46b; --warnbg:#4a3a10; }
}
/* the two circles: sit between the title and the user name.
   Each has its own hue (to-do = warm amber, tax = deep teal), a soft radial
   gradient so it reads as a "button" not a flat outline, a hairline inner ring,
   a lift on hover and a glow ring when it is the active view. */
.circs { display: flex; gap: 12px; align-items: center; margin-left: auto; margin-right: 14px; }
.circ { --c1:#c98a2b; --c2:#8a5a00; --glow:201,138,43;
  position: relative; width: 42px; height: 42px; border-radius: 50%; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; border: none; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, var(--c1), var(--c2) 78%);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 10px -4px rgba(var(--glow), .55), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -6px 10px -8px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.circ.tax { --c1:#1f8a86; --c2:#0b4f4c; --glow:31,138,134; }
.circ svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.circ:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 8px 16px -6px rgba(var(--glow), .7), inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -6px 10px -8px rgba(0,0,0,.45); }
.circ:active { transform: translateY(0) scale(.97); }
.circ.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(var(--glow), .85), 0 6px 14px -6px rgba(var(--glow), .8), inset 0 0 0 1px rgba(255,255,255,.3); }
.circ .badge { position: absolute; top: -5px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--stop); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  border: 2px solid var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.3); animation: badgePop .35s ease-out; }
.circ .badge.calm { background: #2f6f9f; }
.circ .badge.hide { display: none; }
@keyframes badgePop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .circ, .circ .badge { transition: none; animation: none; } .circ:hover { transform: none; } }
@media (prefers-color-scheme: dark) {
  .circ { --c1:#e0a446; --c2:#8f5f10; }
  .circ.tax { --c1:#2fa8a3; --c2:#0f5f5b; }
}
/* sub-tabs inside a module */
.subtabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.subtabs button { font-size: 13px; padding: 6px 12px; border-radius: 999px; border-color: transparent; background: transparent; color: var(--mut); }
.subtabs button.on { border-color: var(--line); background: var(--bg); color: var(--ink); font-weight: 600; }
.subtabs .cnt { font-weight: 400; opacity: .7; margin-left: 4px; }
.pri { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.pri.high { background: var(--hibg); color: var(--hi); }
.pri.normal { background: var(--accbg); color: var(--acc); }
.pri.low { background: var(--lobg); color: var(--lo); }
.who { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--okbg); color: var(--ok); }
.who.other { background: var(--lobg); color: var(--lo); }
.helpflag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--warnbg); color: var(--warn); }
.tmeta .rem { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--warnbg); color: var(--warn); white-space: nowrap; }
.tmeta .rem.sent { opacity: .6; }
/* reminder quick-picker */
button.rpk { padding: 4px 11px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; font: 600 12.5px/1.3 inherit; cursor: pointer; }
button.rpk:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
button.rpk:disabled { opacity: .32; cursor: default; }
button.rpk.rpk-x { padding: 4px 9px; font-weight: 400; color: var(--dim, #888); }
.rpk-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--warnbg); color: var(--warn); font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
input.rpk-in { font: inherit; font-size: 16px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
/* todo rows */
.todo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.todo:last-child { border-bottom: none; }
.todo input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ok); flex: none; cursor: pointer; }
.todo .tbody { flex: 1; min-width: 0; }
.todo .ttitle { font-weight: 600; font-size: 15px; word-break: break-word; }
.todo.done .ttitle { text-decoration: line-through; color: var(--mut); font-weight: 500; }
.todo .tmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 12px; color: var(--mut); }
.todo .tnote { margin-top: 6px; font-size: 13.5px; white-space: pre-wrap; color: var(--ink); opacity: .9; }
.todo .tacts { display: flex; gap: 4px; flex: none; }
.todo .tacts button { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.todo .tacts button.help.on { border-color: var(--warn); background: var(--warnbg); color: var(--warn); }
.todo.mine-help { background: linear-gradient(90deg, var(--warnbg), transparent 60%); border-radius: 8px; }
.tform textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-height: 60px; resize: vertical; }
.segs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segs button { border: none; border-radius: 0; padding: 7px 12px; font-size: 13px; }
.segs button + button { border-left: 1px solid var(--line); }
.segs button.on { background: var(--accbg); color: var(--acc); font-weight: 600; }
.segs button.on.high { background: var(--hibg); color: var(--hi); }
.segs button.on.low { background: var(--lobg); color: var(--lo); }
/* tax */
.ent { border-left: 6px solid var(--tfl); }
.ent.e2 { border-left-color: var(--obh); }
.ent .ehead { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ent .ename { font-weight: 600; font-size: 16px; flex: 1; }
.ent .esum { font-size: 12.5px; color: var(--mut); }
.stt { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.stt:last-child { border-bottom: none; }
.stt input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ok); cursor: pointer; }
.stt .sname { font-weight: 600; }
.stt .sdue { font-size: 12.5px; color: var(--mut); }
.stt .sdue b { color: var(--ink); }
.stt.over .sdue b { color: var(--stop); }
.stt.soon .sdue b { color: var(--warn); }
.stt.ok .sname { color: var(--mut); }
.stt a.portal { font-size: 12.5px; text-decoration: none; color: var(--acc); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.stt .verify { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 1px 6px; border-radius: 999px; background: var(--warnbg); color: var(--warn); margin-left: 6px; vertical-align: middle; }
/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal .dh { font-size: 11px; color: var(--mut); text-align: center; padding: 2px 0 4px; font-weight: 600; }
.cal .dc { min-height: 58px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 4px; font-size: 11px; background: var(--card); overflow: hidden; }
.cal .dc.out { opacity: .38; }
.cal .dc.today { border-color: var(--acc); border-width: 2px; }
.cal .dn { color: var(--mut); font-weight: 600; margin-bottom: 2px; }
.cal .ev { display: block; border-radius: 4px; padding: 1px 4px; margin: 1px 0; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
.cal .ev.done { opacity: .45; text-decoration: line-through; }
.cal .ev.over { outline: 2px solid var(--stop); }
.calnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calnav b { font-size: 15px; }
.upc { display: flex; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.upc:last-child { border-bottom: none; }
.upc .ud { width: 84px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.upc.over .ud { color: var(--stop); }
.upc.soon .ud { color: var(--warn); }
.upc.done { color: var(--mut); text-decoration: line-through; }
.upc.done input[type=checkbox] { width: 20px; height: 20px; min-width: 20px; accent-color: var(--ok); flex: none; cursor: pointer; appearance: auto; -webkit-appearance: checkbox; }
.edot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* tax settings (9/17 redesign, Luke: "hard to decipher, dividing lines hard to tell apart"):
   every state is its own boxed card with a plain-English schedule line up top,
   labeled controls, and ONE Save button that lights up when there is something to save. */
.srow { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--bg); }
.srow.dirty { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warnbg); }
.srow .shead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.srow .scode { font-weight: 800; font-size: 18px; letter-spacing: .5px; min-width: 34px; }
.srow .swords { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.srow .r1 { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0; }
.srow .fl { display: flex; flex-direction: column; gap: 2px; }
.srow .fl > span { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; }
.srow .fl.grow { flex: 1; min-width: 160px; }
.srow .fl.grow input { width: 100%; }
.srow input, .srow select { font-size: 13.5px; padding: 6px 8px; }
.srow input.st { width: 64px; text-transform: uppercase; }
.srow input.dd { width: 72px; }
.srow input.lbl { width: 150px; }
.srow .mos { display: flex; gap: 3px; flex-wrap: wrap; }
.srow .mos button { padding: 3px 7px; font-size: 11.5px; border-radius: 6px; }
.srow .mos button.on { border-color: var(--acc); background: var(--accbg); color: var(--acc); font-weight: 600; }
.srow .sfoot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.srow .sfoot .msg { margin: 0 0 0 auto; }
.srow .sfoot .save { padding: 7px 14px; font-size: 13.5px; color: var(--mut); }
.srow.dirty .sfoot .save { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
.ent .addrow { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); align-items: center; gap: 8px; }
.ent .remEnt { margin-left: auto; }
/* (old .trow rules kept for anything else that still uses them) */
.trow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: none; }
.trow .r1 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.trow input, .trow select { font-size: 13px; padding: 6px 8px; }
.trow input.st { width: 64px; text-transform: uppercase; }
.trow input.dd { width: 64px; }
.trow input.url { flex: 1; min-width: 160px; }
.trow input.lbl { width: 130px; }
.trow .mos { display: flex; gap: 3px; flex-wrap: wrap; }
.trow .mos button { padding: 3px 7px; font-size: 11.5px; border-radius: 6px; }
.trow .mos button.on { border-color: var(--acc); background: var(--accbg); color: var(--acc); font-weight: 600; }
.mailstat { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--warnbg); color: var(--warn); }
.mailstat.ok { background: var(--okbg); color: var(--ok); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 12.5px; background: var(--bg); border: 1px solid var(--line); }
.chip button { border: none; background: none; padding: 0 2px; font-size: 13px; color: var(--mut); line-height: 1; }
.msg { font-size: 12.5px; color: var(--mut); margin-top: 6px; min-height: 16px; }

/* ---- checklist notes (8/19: Kim's ask; sized for her phone) ---- */
.nwrap { margin-top: 3px; }
.nwrap .nlink { font-size: 13px; color: var(--acc); cursor: pointer; text-decoration: none; opacity: .85; display: inline-block; padding: 6px 10px 6px 0; }
.nwrap .nlink:hover { opacity: 1; text-decoration: underline; }
.snote { font-size: 13px; color: var(--ink); background: var(--lobg); border-radius: 7px; padding: 6px 9px; margin-top: 2px; cursor: pointer; white-space: pre-wrap; word-break: break-word; max-width: 560px; }
.snote:hover { outline: 1px solid var(--line); }
/* 16px, NOT smaller: sub-16px focused fields make iPhone Safari zoom the whole page */
.ned textarea { width: 100%; max-width: 560px; min-height: 56px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); resize: vertical; box-sizing: border-box; }
.ned { margin-top: 4px; }
.ned button { font-size: 13.5px; padding: 9px 18px; min-height: 40px; }
.ned .nsave { font-weight: 700; }
/* recently-checked strip: border lives on the WRAPPER so a row's note sits
   above its own divider, and the last row keeps the trimmed border */
.upcw { border-bottom: 1px solid var(--line); }
.upcw:last-child { border-bottom: none; }
.upcw .upc { border-bottom: none; }
.upcw .nwrap { margin: 0 0 6px 26px; }
.upnote { cursor: pointer; font-size: 13px; padding: 4px; }