/* Varelyno: reminders (12 Oct). The project's Reminders tab, the Reminders
   page, the home card and the overview box. Theme variables only, so every
   colour theme and the dark ones work; a project's colour comes in as --rc.
   Motion starts quick and ends slowly. */

:root{--vx-rose:#C2567F;--vx-amber:#D98A1C;--vx-violet:#7C5CD6}
.vx-rems,.vx-rem-page,.vx-rem,.vx-rem-later-pop,.vx-rem-group,.vx-rem-empty{--vx-ease:cubic-bezier(.16,.84,.3,1)}
.vx-rems{display:flex;flex-direction:column;gap:22px}
.vx-rem-page{display:flex;flex-direction:column;gap:20px}

/* ------------------------------------------------------------ quick add */
.vx-rem-quick{
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:20px;
  background:linear-gradient(var(--surface,#fff),var(--surface,#fff)) padding-box,
             linear-gradient(120deg,color-mix(in srgb,var(--vx-violet) 55%,transparent),color-mix(in srgb,var(--accent,#0E67B3) 45%,transparent)) border-box;
  border:1.5px solid transparent;box-shadow:0 14px 34px -24px color-mix(in srgb,var(--vx-violet) 70%,transparent);
}
.vx-rem-quick-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:12px;color:var(--vx-violet);
  background:color-mix(in srgb,var(--vx-violet) 12%,var(--surface,#fff))}
.vx-rem-quick-ico svg,.vx-rem-panel-ico svg{width:18px;height:18px}
.vx-rem-quick input,.vx-rem-quick select{border:0;background:transparent;color:var(--text,#12263F);font:inherit;min-width:0;height:38px}
.vx-rem-quick input[name="what"]{flex:1 1 220px;font-size:15px;outline:0}
.vx-rem-quick input.vx-rem-what[name],.vx-rem-quick input.vx-rem-what[name]:focus{background:transparent;border:0;box-shadow:none;outline:0;padding:0 4px}
.vx-rem-edit svg{display:block}
.vx-rem-quick input[name="what"]::placeholder{color:var(--muted,#66748F)}
.vx-rem-quick input[type="date"],.vx-rem-quick select{flex:0 1 auto;padding:0 10px;border-radius:12px;font-size:13.5px;
  background:var(--surface-soft,#f6f9fc);border:1px solid var(--line,#dce7eb)}
.vx-rem-quick select[name="projectId"]{max-width:200px}
.vx-rem-quick .btn.primary{border-radius:14px;height:38px;padding:0 18px;flex:none}
.vx-rem-quick:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vx-violet) 16%,transparent),0 14px 34px -24px color-mix(in srgb,var(--vx-violet) 70%,transparent)}

/* --------------------------------------------------------------- groups */
.vx-rem-group>header,.vx-rem-group>summary{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.vx-rem-group>header h3,.vx-rem-group>summary h3{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5b6b7c)}
.vx-rem-group.g-now>header h3{color:var(--vx-violet)}
.vx-rem-count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:color-mix(in srgb,var(--muted,#5b6b7c) 14%,var(--surface,#fff));color:var(--text,#12263F)}
.g-now .vx-rem-count{background:var(--vx-violet);color:#fff}
.vx-rem-group header small{font-size:12.5px;color:var(--muted,#66748F)}
.vx-rem-group.g-done>summary{cursor:pointer;list-style:none;padding:6px 0}
.vx-rem-group.g-done>summary::-webkit-details-marker{display:none}
.vx-rem-group.g-done>summary::after{content:'›';font-size:18px;line-height:1;color:var(--muted,#66748F);transition:transform .5s var(--vx-ease)}
.vx-rem-group.g-done[open]>summary::after{transform:rotate(90deg)}
.vx-rem-list{display:flex;flex-direction:column;gap:10px}

/* ----------------------------------------------------------------- card */
.vx-rem{
  --rc:#7C5CD6;--tone:var(--rc);position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 14px 12px 12px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--line,#dce7eb);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text,#12263F) 5%,transparent);
  transition:transform .6s var(--vx-ease),box-shadow .6s var(--vx-ease),border-color .6s var(--vx-ease);
  animation:vxRemIn .9s var(--vx-ease) backwards;
}
.vx-rem:has(.vx-rem-later[open]){z-index:30}
.vx-rem:hover{transform:translateY(-1px);box-shadow:0 12px 30px -18px color-mix(in srgb,var(--text,#12263F) 35%,transparent)}
@keyframes vxRemIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vx-rem-list .vx-rem:nth-child(2){animation-delay:.04s}.vx-rem-list .vx-rem:nth-child(3){animation-delay:.08s}
.vx-rem-list .vx-rem:nth-child(4){animation-delay:.12s}.vx-rem-list .vx-rem:nth-child(n+5){animation-delay:.16s}

/* the date, as a page torn from a desk calendar */
.vx-rem-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:68px;border-radius:15px;line-height:1;
  background:color-mix(in srgb,var(--tone) 11%,var(--surface,#fff));border:1px solid color-mix(in srgb,var(--tone) 22%,transparent);overflow:hidden}
.vx-rem-tile span{font-size:10.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--tone) 85%,var(--text,#12263F))}
.vx-rem-tile b{font-size:26px;font-weight:720;letter-spacing:-.04em;margin:4px 0 3px;color:var(--text,#12263F)}
.vx-rem-tile b svg{width:22px;height:22px;color:var(--tone)}
.vx-rem-tile small{font-size:10.5px;color:var(--muted,#66748F)}

.vx-rem-body{min-width:0}
.vx-rem-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.vx-rem-when{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--tone) 12%,var(--surface,#fff));color:color-mix(in srgb,var(--tone) 80%,var(--text,#12263F))}
.vx-rem-chip{font-size:11.5px;padding:3px 9px;border-radius:999px;color:var(--muted,#5b6b7c);border:1px solid var(--line,#dce7eb)}
.vx-rem h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--text,#12263F);overflow-wrap:anywhere}
.vx-rem p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--muted,#5b6b7c);white-space:pre-line;overflow-wrap:anywhere}
.vx-rem-proj{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid var(--line,#dce7eb);
  background:transparent;color:var(--muted,#5b6b7c);font:inherit;font-size:12px;cursor:pointer;max-width:100%;text-align:left;overflow-wrap:anywhere}
.vx-rem-proj i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--rc)}
.vx-rem-proj:hover{color:var(--text,#12263F);border-color:color-mix(in srgb,var(--rc) 45%,var(--line,#dce7eb))}

.vx-rem-acts{display:flex;align-items:center;gap:6px}
.vx-rem-done{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 10px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--text,#12263F);background:var(--surface,#fff);border:1px solid var(--line,#dce7eb);
  transition:background .5s var(--vx-ease),color .5s var(--vx-ease),border-color .5s var(--vx-ease)}
.vx-rem-done svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vx-rem-done:hover{background:#2E9E6B;border-color:#2E9E6B;color:#fff}
.vx-rem-done:focus-visible,.vx-rem-later summary:focus-visible,.vx-rem-proj:focus-visible{outline:3px solid color-mix(in srgb,var(--vx-violet) 50%,transparent);outline-offset:2px}

.vx-rem-later{position:relative}
.vx-rem-later summary{list-style:none;cursor:pointer;border-radius:999px}
.vx-rem-later summary::-webkit-details-marker{display:none}
.vx-rem-later-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:150px;padding:6px;border-radius:14px;
  background:var(--surface,#fff);border:1px solid var(--line,#dce7eb);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--text,#12263F) 45%,transparent);
  animation:vxRemIn .5s var(--vx-ease) backwards}
.vx-rem-later-pop button{border:0;background:transparent;color:var(--text,#12263F);font:inherit;font-size:13.5px;text-align:left;padding:9px 12px;border-radius:10px;cursor:pointer}
.vx-rem-later-pop button:hover{background:var(--surface-soft,#f6f9fc)}

/* ------------------------------------------------------------- the stages */
.vx-rem.s-today{--tone:var(--vx-violet);border-color:color-mix(in srgb,var(--vx-violet) 40%,var(--line,#dce7eb));
  background:linear-gradient(110deg,color-mix(in srgb,var(--vx-violet) 7%,var(--surface,#fff)),var(--surface,#fff) 60%);
  box-shadow:0 16px 36px -24px color-mix(in srgb,var(--vx-violet) 80%,transparent)}
.vx-rem.s-today .vx-rem-tile{background:linear-gradient(160deg,var(--vx-violet),color-mix(in srgb,var(--vx-violet) 70%,#3b82f6));border-color:transparent}
.vx-rem.s-today .vx-rem-tile span,.vx-rem.s-today .vx-rem-tile b,.vx-rem.s-today .vx-rem-tile small{color:#fff}
.vx-rem.s-past{--tone:var(--vx-rose);border-color:color-mix(in srgb,var(--vx-rose) 35%,var(--line,#dce7eb))}
.vx-rem.s-past::before,.vx-rem.s-today::before{content:'';position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--tone)}
.vx-rem.s-soon{--tone:var(--vx-amber)}
.vx-rem.s-later .vx-rem-when{background:var(--surface-soft,#f6f9fc);color:var(--muted,#5b6b7c)}
.vx-rem.s-done{opacity:.72;box-shadow:none}
.vx-rem.s-done h3{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted,#5b6b7c)}
.vx-rem.s-done .vx-rem-tile{filter:grayscale(1);opacity:.7}
.vx-rem.s-done .vx-rem-when{background:color-mix(in srgb,#2E9E6B 14%,var(--surface,#fff));color:#2E7D58}

/* --------------------------------------------------------------- empty */
.vx-rem-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 18px 26px;border-radius:22px;
  border:1px dashed color-mix(in srgb,var(--vx-violet) 30%,var(--line,#dce7eb));
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--vx-violet) 7%,transparent),transparent 70%)}
.vx-rem-empty h3{margin:16px 0 6px;font-size:17px;font-weight:650;color:var(--text,#12263F)}
.vx-rem-empty p{margin:0;max-width:440px;font-size:13.5px;line-height:1.55;color:var(--muted,#5b6b7c)}
/* the bell with orbits round it, like a project on the map */
.vx-rem-empty-art{position:relative;display:grid;place-items:center;width:112px;height:112px;color:var(--vx-violet)}
.vx-rem-empty-art svg{width:34px;height:34px;position:relative;z-index:1;padding:14px;border-radius:50%;box-sizing:content-box;
  background:var(--surface,#fff);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--vx-violet) 70%,transparent)}
.vx-rem-empty-art i{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--vx-violet) 28%,transparent);animation:vxRemRing 1.4s var(--vx-ease) backwards}
.vx-rem-empty-art i:nth-child(2){inset:14px;animation-delay:.1s}
.vx-rem-empty-art i:nth-child(3){inset:-14px;border-style:dashed;opacity:.6;animation-delay:.2s}
@keyframes vxRemRing{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ----------------------------------------------------- the page numbers */
.vx-rem-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vx-rem-stats>div{background:var(--surface,#fff);border:1px solid var(--line,#dce7eb);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vx-rem-stats b{font-size:24px;line-height:1.15;font-weight:720;letter-spacing:-.02em;color:var(--text,#12263F)}
.vx-rem-stats span{font-size:12.5px;color:var(--muted,#5b6b7c);line-height:1.35;overflow-wrap:anywhere}
.vx-rem-stats .hot{border-color:color-mix(in srgb,var(--vx-violet) 40%,var(--line,#dce7eb));background:color-mix(in srgb,var(--vx-violet) 8%,var(--surface,#fff))}
.vx-rem-stats .hot b{color:var(--vx-violet)}

/* -------------------------------------- the tab, overview box, home card */
.detail-tab.vx-rem-tab{position:relative}
.vx-rem-dot{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:#7C5CD6;vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb,#7C5CD6 22%,transparent)}
.vx-rem-panel .section-title{display:flex;align-items:center;gap:8px}
.vx-rem-panel-ico{display:inline-grid;place-items:center;color:#7C5CD6;margin-right:6px;vertical-align:-3px}
.vx-rem-panel-ico svg{width:17px;height:17px}
.vx-rem-list.compact{gap:8px}
.vx-rem-list.compact .vx-rem{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:10px}
.vx-rem-list.compact .vx-rem-tile{width:48px;height:52px;border-radius:12px}
.vx-rem-list.compact .vx-rem-tile b{font-size:19px;margin:2px 0}
.vx-rem-list.compact .vx-rem-tile small{display:none}
.vx-rem-list.compact .vx-rem-acts{grid-column:2;justify-content:flex-start}
.vx-rem-list.compact .vx-rem h3{font-size:14px}
.vx-rem-card .card-head strong{display:inline-flex;align-items:center}
.vx-rem-mini{box-shadow:inset 3px 0 0 var(--rc,#7C5CD6)}
.vx-rem-mini.s-past small{color:#A8446A!important;font-weight:600}
.vx-rem-mini.s-today small{color:#6A4BC4!important;font-weight:600}

/* --------------------------------------------------------------- phones */
@media (max-width:700px){
  .vx-rem-quick{flex-wrap:wrap;padding:10px;border-radius:18px}
  .vx-rem-quick input[name="what"]{flex:1 1 calc(100% - 50px)}
  .vx-rem-quick input[type="date"],.vx-rem-quick select{flex:1 1 40%;height:40px}
  .vx-rem-quick select[name="projectId"]{max-width:none;flex-basis:100%}
  .vx-rem-quick .btn.primary{flex:1 1 100%;height:42px}
  .vx-rem{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:12px}
  .vx-rem-tile{width:52px;height:58px}
  .vx-rem-tile b{font-size:21px}
  .vx-rem-acts{grid-column:1 / -1;justify-content:flex-end;flex-wrap:wrap}
  .vx-rem-stats{grid-template-columns:1fr 1fr}
  .vx-rem-stats .vx-rem-next{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .vx-rem,.vx-rem-empty-art i,.vx-rem-later-pop{animation:none}
  .vx-rem,.vx-rem-done{transition-duration:.01s}
}

/* Project tabs (user, 13 Oct): as easy to read as the left menu, 13 px and
   semibold in the text colour; the open tab keeps its colour and underline. */
html body .project-workspace .detail-tabs .detail-tab{font-size:13px;font-weight:600;color:color-mix(in srgb,var(--text,#243b4e) 82%,var(--muted,#637586))}
html body .project-workspace .detail-tabs .detail-tab:hover{color:var(--text,#243b4e)}
html body .project-workspace .detail-tabs .detail-tab.active{font-weight:700}

/* Dark looks (night test 13 Oct): the purple, rose and amber are lightened to read on
   dark surfaces, and text on the filled violet becomes dark. */
:root[data-tone="dark"]{--vx-rose:#f29abb;--vx-amber:#f2b45c;--vx-violet:#b9a7f4}
:root[data-tone="dark"] .g-now .vx-rem-count{color:#1b1533}
:root[data-tone="dark"] .vx-rem.s-today .vx-rem-tile span,
:root[data-tone="dark"] .vx-rem.s-today .vx-rem-tile b,
:root[data-tone="dark"] .vx-rem.s-today .vx-rem-tile small{color:#1b1533}
:root[data-tone="dark"] .vx-rem-mini.s-past small{color:#f29abb!important}
:root[data-tone="dark"] .vx-rem-mini.s-today small{color:#c9baff!important}
:root[data-tone="dark"] .vx-rem-dot{background:#b9a7f4}