/* V15: useful objects with their own silhouettes. Drag transforms remain on
   the outer article; controls and written content stay still while in use. */
.space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]) {
  --instrument-paper: #faf2d9;
  --instrument-ink: #304e60;
}
.space > .overlay[data-color="blue"] { --instrument-paper: #e8f1f6; --instrument-ink: #315877; }
.space > .overlay[data-color="sage"] { --instrument-paper: #edf0d8; --instrument-ink: #3e634d; }
.space > .overlay[data-color="blush"] { --instrument-paper: #f6e6df; --instrument-ink: #805565; }
.space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]) .overlay-shell {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* A palm-sized tally: domed aluminium, a recessed number drum and a thumb key. */
.space > .overlay[data-type="counter"],
.space > .overlay[data-type="counter"][data-size="compact"] { width: 150px; }
.space > .overlay[data-type="counter"] .overlay-shell {
  height: 150px;
  overflow: visible;
  border: 1px solid #f8f6e9;
  border-radius: 60px 60px 58px 58px / 35px 35px 76px 76px;
  background: repeating-linear-gradient(0deg, #ffffff00 0 2px, #ffffff24 2px 3px), linear-gradient(115deg, #bcc7c8, #fbf9ee 31%, #dfe4dc 52%, #a4b4b6);
  box-shadow: 0 11px 18px -11px #10384fa3, inset 0 2px 1px #ffffffed, inset 0 -5px 2px #788f9675, inset 4px 0 4px #dfe7e790;
  rotate: -5deg;
}
.space > .overlay[data-type="counter"] .overlay-shell::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 11px;
  left: calc(50% - 15px);
  top: -8px;
  border: 3px solid #b8c7c9;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 1px #fff, 0 -1px #eef5f5;
  pointer-events: none;
}
.space > .overlay[data-type="counter"][data-color="blue"] .overlay-shell {
  background: repeating-linear-gradient(0deg, #ffffff00 0 2px, #ffffff24 2px 3px), linear-gradient(115deg, #8faabd, #eef7ff 31%, #ccdce6 52%, #7899b0);
}
.space > .overlay[data-type="counter"][data-color="sage"] .overlay-shell {
  background: repeating-linear-gradient(0deg, #ffffff00 0 2px, #ffffff24 2px 3px), linear-gradient(115deg, #a4b8a1, #f5f8e7 31%, #dce4cb 52%, #8aab91);
}
.space > .overlay[data-type="counter"][data-color="blush"] .overlay-shell {
  background: repeating-linear-gradient(0deg, #ffffff00 0 2px, #ffffff24 2px 3px), linear-gradient(115deg, #c8a7a2, #fff5eb 31%, #e8cec3 52%, #b28b89);
}
.space > .overlay[data-type="counter"] .overlay-header {
  height: 31px;
  min-height: 31px;
  padding: 4px 16px 0;
  border: 0;
  justify-content: center;
}
.space > .overlay[data-type="counter"] .overlay-title {
  text-align: center;
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #405a65;
  text-shadow: 0 1px #ffffffc9;
}
.space > .overlay[data-type="counter"] .overlay-body {
  height: 116px;
  min-height: 116px;
  padding: 1px 10px 11px;
}
.space > .overlay[data-type="counter"] .counter-value {
  width: 106px;
  max-width: none;
  height: 45px;
  min-height: 45px;
  margin: 0 auto;
  border: 3px solid #8a9ca2;
  border-radius: 11px;
  background: linear-gradient(#203a43 48%, #49616a 49%, #102831 51%);
  box-shadow: inset 0 3px 6px #0009, 0 1px #fff;
  color: #f7e6b9;
  font: 500 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 3px;
  text-align: center;
}
.space > .overlay[data-type="counter"] .counter-actions {
  position: static;
  inset: auto;
  margin: 7px auto 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.space > .overlay[data-type="counter"] .round-control {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #94a7ab;
  border-radius: 50%;
  background: linear-gradient(140deg, #f8faf5, #b6c6c7);
  box-shadow: 0 3px #718990, inset 0 1px 1px #fff;
  transition: transform 120ms var(--shell-ease), box-shadow 120ms var(--shell-ease);
}
.space > .overlay[data-type="counter"] .round-control[data-action="increment"] {
  background: linear-gradient(140deg, #f6d7a4, #c39051);
  border-color: #be8d53;
  box-shadow: 0 3px #906539, inset 0 1px 1px #fff2d8;
}
.space > .overlay[data-type="counter"] .round-control:active { transform: translateY(2px); box-shadow: 0 1px #718990; }
.space > .overlay[data-type="counter"].long-value .counter-value { font-size: 22px; letter-spacing: 0; }
.space > .overlay[data-type="counter"].long-value .counter-actions { justify-content: center; margin-top: 7px; }

/* A round mechanical focus instrument. The outer marker follows real time. */
.space > .overlay[data-type="timer"],
.space > .overlay[data-type="timer"][data-size="compact"] { width: 174px; }
.space > .overlay[data-type="timer"] .overlay-shell {
  height: 174px;
  overflow: visible;
  border: 5px solid #b9c5c0;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 25%, #fffef4, #eeeddd 65%, #d4dcce);
  box-shadow: 0 13px 22px -12px #1b4654a8, inset 0 0 0 1px #7c9489, inset 0 0 0 4px #fffef0, 0 0 0 1px #f8ffed, 0 3px 0 2px #6e8a84;
  rotate: 3deg;
}
.space > .overlay[data-type="timer"] .overlay-shell::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 13px;
  left: calc(50% - 14px);
  top: -15px;
  background: repeating-linear-gradient(90deg, #c8d4cd 0 3px, #8c9f96 3px 4px);
  border: 1px solid #f0f6df;
  border-radius: 5px 5px 2px 2px;
  box-shadow: inset 0 2px #eef3e5, 0 2px #536d64;
  pointer-events: none;
}
.space > .overlay[data-type="timer"] .overlay-shell::after { display: none; }
.space > .overlay[data-type="timer"][data-color="blue"] .overlay-shell { background: radial-gradient(circle at 33% 25%, #f8fcff, #dbe9f0 65%, #b5d0db); border-color: #a6bfc9; }
.space > .overlay[data-type="timer"][data-color="sage"] .overlay-shell { background: radial-gradient(circle at 33% 25%, #fcfff0, #e1e9d5 65%, #bacdb3); border-color: #aaba9c; }
.space > .overlay[data-type="timer"][data-color="blush"] .overlay-shell { background: radial-gradient(circle at 33% 25%, #fff7f0, #f0ddda 65%, #d5baba); border-color: #c5b1ae; }
.space > .overlay[data-type="timer"] .overlay-header {
  position: absolute;
  left: 31px;
  right: 31px;
  top: 30px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  z-index: 2;
}
.space > .overlay[data-type="timer"] .overlay-title {
  text-align: center;
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #536b5e;
}
.space > .overlay[data-type="timer"] .tool-indicator { position: absolute; right: 2px; width: 3px; height: 3px; }
.space > .overlay[data-type="timer"] .overlay-body { position: static; height: 164px; min-height: 164px; padding: 0; }
.space > .overlay[data-type="timer"] .timer-value {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 57px;
  margin: 0;
  font: 500 30px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #254e42;
  letter-spacing: -1.5px;
  text-align: center;
}
.space > .overlay[data-type="timer"] .timer-dial {
  top: 9px;
  left: 9px;
  right: auto;
  width: 146px;
  height: 146px;
  background: repeating-conic-gradient(from -1deg, #4b6e6075 0deg 1deg, transparent 1deg 15deg);
  box-shadow: none;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, transparent 65%, #000 66%);
  mask-image: radial-gradient(circle, transparent 65%, #000 66%);
}
.space > .overlay[data-type="timer"] .timer-dial i {
  top: 0;
  left: 71px;
  width: 4px;
  height: 12px;
  background: #bc6550;
  border-radius: 2px;
  transform-origin: 50% 73px;
  transform: rotate(calc((1 - var(--timer-progress, 1)) * 360deg));
}
.space > .overlay[data-type="timer"] .timer-actions {
  position: absolute;
  top: auto;
  left: 34px;
  right: auto;
  bottom: 22px;
  margin: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.space > .overlay[data-type="timer"] .timer-actions .round-control {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, #fffcf0, #dbe3d4);
  border-color: #a5b5a6;
  box-shadow: 0 2px #b1bfb0, inset 0 1px #fff;
  transition: transform 120ms var(--shell-ease);
}
.space > .overlay[data-type="timer"] .timer-toggle { box-shadow: 0 2px #193f30, inset 0 1px #7fa890; }
.space > .overlay[data-type="timer"] .round-control:active { transform: translateY(2px); }

/* Three separate sheets: blue backing, peach middle sheet and ruled front. */
.space > .overlay[data-type="note"],
.space > .overlay[data-type="note"][data-size="compact"] {
  width: 216px;
  height: 174px;
  padding: 16px 8px 10px;
  isolation: isolate;
}
.space > .overlay[data-type="note"]::before,
.space > .overlay[data-type="note"]::after {
  content: "";
  position: absolute;
  inset: 18px 10px 12px;
  border: 1px solid #ffffffb5;
  border-radius: 3px 7px 5px 3px;
  box-shadow: 0 7px 13px -8px #1b48609e;
  pointer-events: none;
  z-index: -1;
}
.space > .overlay[data-type="note"]::before {
  background: repeating-linear-gradient(0deg, transparent 0 22px, #6f91a126 22px 23px), #b8d2dc;
  transform: translate(-8px, -6px) rotate(-10deg);
}
.space > .overlay[data-type="note"]::after {
  background: repeating-linear-gradient(0deg, transparent 0 22px, #ac87772b 22px 23px), #efd4b2;
  transform: translate(7px, -4px) rotate(7deg);
  animation: loose-page 11s var(--shell-ease) infinite;
  transform-origin: 14% 88%;
}
.space > .overlay[data-type="note"] .overlay-shell {
  height: 148px;
  overflow: visible;
  border: 1px solid #fefbea;
  border-radius: 3px 4px 16px 3px;
  background: linear-gradient(90deg, transparent 18px, #c46c5440 18px 19px, transparent 19px), var(--instrument-paper);
  box-shadow: 0 12px 20px -14px #133c55a3, 1px 2px #d8cfb7, 2px 3px #fff7df;
  rotate: -2deg;
}
.space > .overlay[data-type="note"] .overlay-shell::before {
  content: "";
  position: absolute;
  right: 17px;
  top: -11px;
  width: 39px;
  height: 15px;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, #c4d1d930 0 2px, #5d8ba129 2px 3px), #78a2b8;
  box-shadow: inset 0 1px #d8edf4;
  pointer-events: none;
}
.space > .overlay[data-type="note"] .overlay-shell::after {
  content: "";
  display: block;
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 20px;
  height: 20px;
  border-radius: 3px 0 14px;
  background: linear-gradient(135deg, #e4dac0 49%, #fffbed 51%);
  box-shadow: -2px -2px 3px #a3916220;
  pointer-events: none;
}
.space > .overlay[data-type="note"] .overlay-header {
  height: 36px;
  min-height: 36px;
  padding: 2px 16px 0 26px;
  border: 0;
  background: transparent;
  color: var(--instrument-ink);
}
.space > .overlay[data-type="note"] .overlay-title { font: italic 16px/1.2 Georgia, serif !important; }
.space > .overlay[data-type="note"] .overlay-body { padding: 3px 15px 14px 25px; height: 110px; }
.space > .overlay[data-type="note"] .note-input {
  display: block;
  height: 91px;
  min-height: 91px;
  max-height: 91px;
  margin: 0;
  padding: 1px 0 0;
  font: 13px/23px system-ui, sans-serif;
  color: var(--instrument-ink);
  background: repeating-linear-gradient(transparent 0 22px, #7f9ea62e 22px 23px);
}
.space > .overlay[data-type="note"] .note-input::placeholder { color: #6d7c7d; opacity: 1; }
@keyframes loose-page {
  0%, 76%, 100% { transform: translate(7px, -4px) rotate(7deg); }
  82% { transform: translate(8px, -7px) rotate(9deg); }
  89% { transform: translate(7px, -4px) rotate(6deg); }
}
.space > .overlay[data-type="note"]:is(:hover, :focus-within, .dragging)::after { animation-play-state: paused; }

/* A clipped receipt, with a serrated edge instead of another rounded card. */
.space > .overlay[data-type="checklist"],
.space > .overlay[data-type="checklist"][data-size="compact"] { width: 166px; height: 152px; }
.space > .overlay[data-type="checklist"] .overlay-shell {
  height: 152px;
  border: 0;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #fffefc00 0 2px, #f0ead233 2px 3px), var(--instrument-paper);
  color: #445648;
  box-shadow: 0 13px 22px -15px #1d465eaa;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 94% 100%, 88% 95%, 82% 100%, 76% 95%, 70% 100%, 64% 95%, 58% 100%, 52% 95%, 46% 100%, 40% 95%, 34% 100%, 28% 95%, 22% 100%, 16% 95%, 10% 100%, 4% 95%, 0 98%);
  rotate: 6deg;
}
.space > .overlay[data-type="checklist"]::before {
  content: "";
  position: absolute;
  left: calc(50% - 23px);
  top: -6px;
  width: 46px;
  height: 15px;
  border: 1px solid #a7b5b2;
  border-radius: 4px;
  background: linear-gradient(#eef4eb, #a2b4af 45%, #cdd9d2 49%, #77968c);
  box-shadow: 0 3px 3px #244e4638, inset 0 1px #fff;
  transform: rotate(6deg);
  z-index: 1;
  pointer-events: none;
}
.space > .overlay[data-type="checklist"] .overlay-header {
  height: 42px;
  min-height: 42px;
  padding: 10px 2px 0;
  margin: 0 13px;
  border-bottom: 1px dashed #a5af90;
}
.space > .overlay[data-type="checklist"] .overlay-title {
  font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #4a6152;
  letter-spacing: 1.5px;
}
.space > .overlay[data-type="checklist"] .checklist-items { padding: 4px 11px 16px; background: transparent; }
.space > .overlay[data-type="checklist"] .checklist-items label { min-height: 43px; gap: 7px; }
.space > .overlay[data-type="checklist"] .checklist-items input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #537b66;
}
.space > .overlay[data-type="checklist"] .checklist-text {
  min-height: 40px;
  padding: 4px 0;
  font: 11px/1.35 system-ui, sans-serif;
  color: var(--instrument-ink);
}
.space > .overlay[data-type="checklist"] .overlay-shell::after { display: none; }

/* Every playable control retains an actual finger-sized target. */
.space > .overlay[data-type="game"] .game-controls button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}
.space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]).dragging .overlay-shell,
.space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]):focus-within .overlay-shell { rotate: 0deg; }

/* Compact is a real footprint change without shrinking the live controls. */
.space > .overlay[data-type="counter"][data-size="compact"] { width: 138px; }
.space > .overlay[data-type="counter"][data-size="compact"] .counter-value { width: 98px; }
.space > .overlay[data-type="timer"][data-size="compact"] { width: 164px; }
.space > .overlay[data-type="timer"][data-size="compact"] .overlay-shell { height: 164px; }
.space > .overlay[data-type="timer"][data-size="compact"] .overlay-body { height: 154px; min-height: 154px; }
.space > .overlay[data-type="timer"][data-size="compact"] .overlay-header { top: 25px; left: 28px; right: 28px; }
.space > .overlay[data-type="timer"][data-size="compact"] .timer-value { top: 53px; font-size: 28px; }
.space > .overlay[data-type="timer"][data-size="compact"] .timer-actions { left: 29px; bottom: 18px; }
.space > .overlay[data-type="timer"][data-size="compact"] .timer-dial { width: 136px; height: 136px; }
.space > .overlay[data-type="timer"][data-size="compact"] .timer-dial i { left: 66px; transform-origin: 50% 68px; }
.space > .overlay[data-type="note"][data-size="compact"] { width: 200px; height: 162px; }
.space > .overlay[data-type="note"][data-size="compact"] .overlay-shell { height: 136px; }
.space > .overlay[data-type="note"][data-size="compact"] .overlay-body { height: 98px; }
.space > .overlay[data-type="note"][data-size="compact"] .note-input { height: 79px; min-height: 79px; max-height: 79px; }
.space > .overlay[data-type="checklist"][data-size="compact"] { width: 154px; }

/* Short laptop windows retain each object, with 44px controls and a readable
   face. This changes internal spacing, rather than scaling down hit targets. */
@media (min-width: 900px) and (max-height: 700px) {
  .space > .overlay[data-type="counter"][data-size] .overlay-shell { height: 136px; }
  .space > .overlay[data-type="counter"][data-size] .overlay-header { height: 27px; min-height: 27px; padding-top: 3px; }
  .space > .overlay[data-type="counter"][data-size] .overlay-body { height: 106px; min-height: 106px; padding-top: 0; padding-bottom: 10px; }
  .space > .overlay[data-type="counter"][data-size] .counter-value { height: 37px; min-height: 37px; }
  .space > .overlay[data-type="counter"][data-size] .counter-actions { margin-top: 6px; }
  .space > .overlay[data-type="timer"][data-size] { width: 150px; }
  .space > .overlay[data-type="timer"][data-size] .overlay-shell { height: 150px; }
  .space > .overlay[data-type="timer"][data-size] .overlay-body { height: 140px; min-height: 140px; }
  .space > .overlay[data-type="timer"][data-size] .overlay-header { top: 21px; left: 26px; right: 26px; height: 20px; min-height: 20px; }
  .space > .overlay[data-type="timer"][data-size] .timer-value { top: 44px; font-size: 26px; line-height: 1.15; }
  .space > .overlay[data-type="timer"][data-size] .timer-actions { left: 22px; bottom: 16px; }
  .space > .overlay[data-type="timer"][data-size] .timer-dial { width: 122px; height: 122px; }
  .space > .overlay[data-type="timer"][data-size] .timer-dial i { left: 59px; height: 10px; transform-origin: 50% 61px; }
  .space > .overlay[data-type="note"][data-size] { height: 150px; }
  .space > .overlay[data-type="note"][data-size] .overlay-shell { height: 124px; }
  .space > .overlay[data-type="note"][data-size] .overlay-header { height: 32px; min-height: 32px; }
  .space > .overlay[data-type="note"][data-size] .overlay-body { height: 90px; }
  .space > .overlay[data-type="note"][data-size] .note-input { height: 71px; min-height: 71px; max-height: 71px; }
  .space > .overlay[data-type="checklist"][data-size],
  .space > .overlay[data-type="checklist"][data-size] .overlay-shell { height: 140px; }
  .space > .overlay[data-type="checklist"][data-size] .overlay-header { height: 34px; min-height: 34px; padding-top: 7px; }
  .space > .overlay[data-type="checklist"][data-size] .checklist-items { padding-bottom: 12px; }
  .space > .overlay[data-type="clock"][data-size] .overlay-shell { height: 84px; }
  .space > .overlay[data-type="clock"][data-size] .overlay-header { height: 30px; min-height: 30px; }
  .space > .overlay[data-type="clock"][data-size] .world-times { padding: 0 14px 8px !important; }
  .space > .overlay[data-type="clock"][data-size] .world-times > div { gap: 3px; }
  .space > .overlay[data-type="clock"][data-size] .world-times span { font-size: 10px; line-height: 1.2; }
  .space > .overlay[data-type="clock"][data-size] .world-times time { font-size: 24px; line-height: 1.2; }
  .space > .overlay[data-type="game"][data-size] { width: 254px; }
}

@media (max-width: 899px) {
  .space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]) {
    flex: 0 0 auto;
    margin: 16px auto 70px;
    max-width: calc(100% - 30px);
  }
  .space > .overlay[data-type="counter"] { width: 150px; }
  .space > .overlay[data-type="timer"] { width: 174px; }
  .space > .overlay[data-type="note"] { width: 216px; }
  .space > .overlay[data-type="checklist"] { width: 190px; }
  .space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]) .overlay-shell { rotate: 0deg; }
  .space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]) .mobile-reorder {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: 256px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 11px;
    background: #e9f0e8c9;
    color: #3c595b;
    transform: translateX(-50%);
  }
  .space > .overlay:is([data-type="counter"], [data-type="timer"], [data-type="note"], [data-type="checklist"]) .mobile-reorder button { color: #314f55; min-height: 44px; }
  .space > .overlay[data-type="checklist"] .overlay-shell { overflow: visible; clip-path: none; border-bottom: 6px dotted #c9d3c3; }
  .space > .overlay[data-type="checklist"]::before { transform: none; }
  .space > .overlay[data-type="checklist"] .checklist-items label { min-height: 44px; }
  .space > .overlay[data-type="checklist"] .checklist-text { font-size: 12px; min-height: 44px; }
  .space > .overlay[data-type="checklist"] .checklist-items input[type="checkbox"] { width: 24px; height: 24px; }
}

html[data-motion="paused"] .space > .overlay[data-type="note"]::after,
html[data-hero-visible="false"] .space > .overlay[data-type="note"]::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .space > .overlay[data-type="note"]::after { animation: none; }
  .space > .overlay:is([data-type="counter"], [data-type="timer"]) .round-control { transition: none; }
}