.note {
  position: relative;
  width: 200px;
  min-height: 140px;
  border-radius: var(--r);
  box-shadow: 0 10px 24px rgba(28, 27, 24, .18);
  display: flex;
  flex-direction: column;
}
.note .nh { height: 24px; border-radius: var(--r) var(--r) 0 0; }
.note textarea {
  flex: 1;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  height: auto !important;
  resize: none;
  padding: var(--sp-025) var(--sp-150) var(--sp-100);
  font-family: inherit;
  font-size: var(--fs);
  color: #3A3428;
  overflow: hidden;
  min-height: 0;
}
.note textarea:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.note .nrz {
  position: absolute; right: 2px; bottom: 2px;
  width: var(--rz-side); height: var(--rz-side);
  cursor: nwse-resize;
  --rz-ink: rgba(0, 0, 0, .25);
}

.note.wg {
  --pad: var(--sp-150);
  width: 268px;
  min-height: auto;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: calc(var(--r) + var(--pad));
  box-shadow: 0 10px 24px rgba(28, 27, 24, .14);
  padding: 0 0 var(--pad);
  display: flex; flex-direction: column; gap: var(--sp-100);
}
.note.wg .wgh {
  padding: var(--pad) var(--pad) 0; cursor: var(--cur-grab);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink3);
  display: flex; align-items: center; gap: var(--sp-075);
}
.note.wg .wgh svg { flex: none; }

.wg-field { padding: 0 var(--pad); }
.note.wg textarea.wg-text {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: var(--sp-050) 0 var(--sp-075) !important;
  width: 100% !important;
  min-width: 0;
  font: inherit; font-size: var(--fs); line-height: 1.4; color: var(--ink);
  resize: none; overflow: hidden; min-height: 0;
  overflow-wrap: anywhere;
  border-bottom: var(--bw) solid transparent !important;
  transition: border-color .15s;
}
.note.wg textarea.wg-text:hover { border-bottom-color: var(--line) !important; }
.note.wg textarea.wg-text:focus { border-bottom-color: var(--acc) !important; }

.wg-face {
  display: block; width: calc(100% - var(--pad) * 2);
  margin: var(--sp-050) var(--pad) 0;
  white-space: nowrap;
  padding: var(--sp-050) 0;
  background: none; border: none; border-radius: var(--r);
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-board); line-height: 1.05; font-weight: var(--fw-med);
  letter-spacing: -.01em; color: var(--ink);
  text-align: center; cursor: pointer;
  transition: color .15s, background .15s;
}
.wg-face:hover { background: var(--a-100); }
.wg-face:focus { outline: none; background: var(--acc-weak); color: var(--acc-ink); }
.note.wg.running .wg-face { cursor: default; }
.note.wg.running .wg-face:hover { background: none; }

.wg-sub {
  margin: 0 var(--pad);
  min-height: 15px;
  font-size: var(--fs-s); line-height: 15px; color: var(--ink3);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wg-bar {
  height: var(--sp-100); margin: 0 var(--pad);
  border-radius: var(--r-full);
  background: var(--a-200); overflow: clip;
}
.wg-bar-fill {
  height: 100%; border-radius: var(--r-full);
  background: var(--acc);
  transition: width .95s linear, background .3s;
}

.wg-quick {
  --pad: var(--sp-025);
  position: relative;
  display: flex; gap: var(--sp-025);
  margin: 0 var(--sp-150);
  padding: var(--pad);
  background: var(--a-200);
  border-radius: var(--r);
}
.wg-quick button {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: max-content;
  padding: var(--sp-075) 0;
  font-size: var(--fs-s); font-weight: var(--fw-med); line-height: 1;
  color: var(--ink2);
  background: none; border: none;
  border-radius: calc(var(--r) - var(--pad));
  transition: background .13s, color .13s;
}
.wg-quick button > .seg-label { white-space: nowrap; }
.wg-quick button:hover:not(:disabled) { background: var(--card); color: var(--ink); }
.wg-quick button.on {
  color: var(--acc-ink);
  font-weight: var(--fw-med);
}
.wg-quick button:disabled { opacity: .35; cursor: not-allowed; }

.wg-row { display: flex; gap: var(--sp-100); margin: 0 var(--sp-150); }
.wg-go {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-100);
  height: 36px; padding: 0 var(--sp-150);
  border: none; border-radius: var(--r);
  background: var(--acc-grad, var(--acc-solid)); color: #fff;
  background-origin: border-box; background-repeat: no-repeat;
  font-size: var(--fs); font-weight: var(--fw-med);
  box-shadow: var(--sh-raised);
}
.wg-go:hover { filter: brightness(.93); }
.wg-go:active { filter: brightness(.88); }
.wg-go-x { display: inline-flex; }
.wg-reset {
  flex: none; width: 36px; height: 36px;
  padding: 0;
}

.note.wg.due {
  border-color: var(--danger);
  background: var(--danger-weak);
  animation: dueglow 1.5s ease-in-out infinite;
}
.note.wg.due .wgh,
.note.wg.due .wg-face,
.note.wg.due .wg-sub { color: var(--danger); }
.note.wg.due .wg-bar { background: var(--danger-weak-2); }
.note.wg.due .wg-bar-fill { background: var(--danger); }
.note.wg.due .wg-quick { background: var(--danger-weak-2); }
.note.wg.due .wg-go { background: var(--danger); color: var(--danger-fg); }

@keyframes dueglow {
  0%, 100% { box-shadow: 0 10px 24px rgba(28, 27, 24, .14), 0 0 0 0 rgba(179, 38, 30, 0); }
  50%      { box-shadow: 0 10px 24px rgba(28, 27, 24, .14), 0 0 34px 7px rgba(179, 38, 30, .55); }
}