/* ToolMole desk pet — everything prefixed .tmp- so it cannot collide with the site.
 * Design rules baked in here:
 *   · never covers content (pointer-events only on the mole itself)
 *   · the burrow is a cross-section of soil, not a generic modal
 *   · all motion is opt-out via prefers-reduced-motion
 */

.tmp-root {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.tmp-root * { box-sizing: border-box; }

/* ---------------------------------------------------------------- the mole */
.tmp-mole {
  position: absolute; width: 76px; height: 68px;
  pointer-events: auto; cursor: grab;
  touch-action: none; user-select: none;
  transition: transform .18s ease;
}
.tmp-mole:active { cursor: grabbing; }
.tmp-mole:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; border-radius: 12px; }
.tmp-mole svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* the mound it sits on, so it never looks like it is floating in space */
.tmp-mound {
  position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 62px; height: 15px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 50% 25%, #8a6d4f, #5e4630 70%);
  box-shadow: 0 3px 7px rgba(40, 28, 16, .25);
}

.tmp-body { animation: tmp-breathe 3.4s ease-in-out infinite; transform-origin: 32px 46px; }
@keyframes tmp-breathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%      { transform: scaleY(1.035) translateY(-1px); }
}

/* Blink. transform-box is required or the origin resolves against the whole
   SVG viewport and the pupils fly off instead of squashing in place. */
.tmp-eye { transform-box: fill-box; transform-origin: center; }
.tmp-mole.tmp-blink .tmp-eye { animation: tmp-blink .22s ease-in-out; }
@keyframes tmp-blink {
  40%, 60% { transform: scaleY(.08); }
}

.tmp-mole.tmp-wiggle .tmp-claw-l { animation: tmp-dig-l .5s ease-in-out 2; transform-origin: 16px 44px; }
.tmp-mole.tmp-wiggle .tmp-claw-r { animation: tmp-dig-r .5s ease-in-out 2; transform-origin: 48px 44px; }
@keyframes tmp-dig-l { 50% { transform: rotate(-22deg) translateY(3px); } }
@keyframes tmp-dig-r { 50% { transform: rotate(22deg) translateY(3px); } }

/* dive down / pop up, the two halves of a tunnel trip */
.tmp-mole.tmp-diving { animation: tmp-dive .42s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes tmp-dive {
  to { transform: translateY(26px) scale(.35); opacity: 0; }
}
.tmp-mole.tmp-rising { animation: tmp-rise .5s cubic-bezier(.2, 1.5, .5, 1) backwards; }
@keyframes tmp-rise {
  from { transform: translateY(26px) scale(.35); opacity: 0; }
}

/* the "+ stash this tool" nudge, on tool pages only */
.tmp-tag {
  position: absolute; top: -6px; right: -4px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; background: #16a34a; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  animation: tmp-pop .35s cubic-bezier(.2, 1.6, .4, 1);
}
.tmp-tag.tmp-count { background: #b45309; }
@keyframes tmp-pop { from { transform: scale(0); } }

/* a speech puff — used sparingly, never for advertising */
.tmp-say {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  background: #fffdf7; color: #3b2f22; border: 1.5px solid #cbb99b;
  padding: 6px 11px; border-radius: 12px; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(60, 44, 26, .18);
  animation: tmp-pop .3s cubic-bezier(.2, 1.6, .4, 1);
}
.tmp-say::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #cbb99b;
}

/* ------------------------------------------------------------ tunnel trail */
.tmp-trail { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tmp-trail path {
  fill: none; stroke: #8a6d4f; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 7 9; opacity: .55;
  animation: tmp-trail-fade 1.5s ease-out forwards;
}
@keyframes tmp-trail-fade {
  0%   { stroke-dashoffset: 260; opacity: .6; }
  60%  { stroke-dashoffset: 0;   opacity: .5; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* dirt kicked up on landing */
.tmp-dirt { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #7a5f42; }
.tmp-dirt.tmp-fly { animation: tmp-dirt 620ms ease-out forwards; }
@keyframes tmp-dirt {
  to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}

/* --------------------------------------------------------- the parked hill */
.tmp-hill {
  position: fixed; right: 16px; bottom: 12px; pointer-events: auto;
  width: 54px; height: 26px; cursor: pointer; border: 0; padding: 0; background: none;
}
.tmp-hill svg { width: 100%; height: 100%; display: block; }
.tmp-hill:hover { transform: translateY(-2px); }
.tmp-hill:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }

/* ------------------------------------------------------------- the burrow */
.tmp-scrim {
  position: fixed; inset: 0; pointer-events: auto;
  background: rgba(28, 20, 12, .42); backdrop-filter: blur(2px);
  animation: tmp-fade .18s ease;
}
@keyframes tmp-fade { from { opacity: 0; } }

.tmp-root { --tmp-top: clamp(20px, 8vh, 88px); --tmp-gap: 20px; }

/* A floating panel with a guaranteed gap top and bottom, not a bottom sheet —
   glued to the bottom edge it fought with the browser chrome and the mole. */
.tmp-burrow {
  position: fixed; left: 50%; top: var(--tmp-top); transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - var(--tmp-top) - var(--tmp-gap));
  max-height: calc(100dvh - var(--tmp-top) - var(--tmp-gap));
  pointer-events: auto; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  /* soil cross-section: dark topsoil fading to deeper earth */
  background:
    linear-gradient(#6b4f34 0 14px, transparent 14px),
    linear-gradient(180deg, #7b5c3d, #4a3626 78%, #3a2a1c);
  box-shadow: 0 18px 50px rgba(20, 12, 6, .45), 0 2px 8px rgba(20, 12, 6, .3);
  animation: tmp-up .26s cubic-bezier(.2, .9, .3, 1);
  color: #f4ece0;
}
@keyframes tmp-up {
  from { transform: translate(-50%, 18px); opacity: 0; }
}

/* grass line along the top edge, so it reads as "below the surface" */
.tmp-turf {
  height: 14px; flex: 0 0 auto; position: relative;
  background: repeating-linear-gradient(90deg, #4d7c3f 0 5px, #3f6834 5px 10px);
}
.tmp-turf::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, #5f9350 3px 4px);
}

.tmp-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.tmp-head svg { width: 34px; height: 34px; flex: 0 0 auto; }
.tmp-name {
  background: transparent; border: 0; border-bottom: 1px dashed transparent;
  color: #fff; font-size: 16px; font-weight: 700; font-family: inherit;
  padding: 2px 0; width: 130px; min-width: 60px;
}
.tmp-name:hover, .tmp-name:focus { border-bottom-color: rgba(255, 255, 255, .45); outline: none; }
.tmp-sub { font-size: 11.5px; color: #cbb99b; }
.tmp-x {
  margin-left: auto; background: rgba(255, 255, 255, .12); border: 0; color: #f4ece0;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 16px; line-height: 1;
}
.tmp-x:hover { background: rgba(255, 255, 255, .22); }

.tmp-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.tmp-tab {
  flex: 1; padding: 8px 4px 9px; border: 0; border-radius: 10px 10px 0 0; cursor: pointer;
  background: rgba(0, 0, 0, .2); color: #d8c8b0; font-size: 12.5px; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tmp-tab b { font-size: 15px; line-height: 1; }
.tmp-tab.on { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }

.tmp-chamber {
  flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 18px;
  background: rgba(0, 0, 0, .16);
  /* faint pebbles and roots in the soil */
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .05) 0 3px, transparent 3px),
    radial-gradient(circle at 78% 62%, rgba(255, 255, 255, .04) 0 4px, transparent 4px),
    radial-gradient(circle at 44% 88%, rgba(255, 255, 255, .03) 0 5px, transparent 5px);
}
.tmp-empty { text-align: center; color: #c3ae90; font-size: 13px; padding: 26px 12px; line-height: 1.7; }
.tmp-empty b { display: block; font-size: 15px; color: #f0e4d2; margin-bottom: 4px; }

/* stash — a grid of tiles, so a dozen tools read at a glance rather than as
   a list you have to walk down */
.tmp-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
.tmp-card {
  position: relative; border-radius: 12px;
  background: rgba(255, 255, 255, .07); transition: background .15s;
}
.tmp-card:hover { background: rgba(255, 255, 255, .15); }
.tmp-card-hit {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 15px 8px 12px; text-decoration: none; color: inherit;
}
.tmp-card-ico { font-size: 25px; line-height: 1; }
.tmp-card-name {
  font-size: 12px; line-height: 1.32; text-align: center; word-break: break-word;
  /* two lines, then ellipsis — tool names vary wildly and a tile that grows
     to fit the longest one leaves the whole row ragged */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmp-card .tmp-mini {
  position: absolute; top: 4px; width: 22px; height: 22px; font-size: 11px;
  opacity: 0; transition: opacity .12s;
}
.tmp-card-rm { right: 4px; }
.tmp-card-up { right: 30px; }
.tmp-card:hover .tmp-mini,
.tmp-card:focus-within .tmp-mini { opacity: 1; }
/* A touch screen never hovers, so the controls would be unreachable there. */
@media (hover: none) {
  .tmp-card .tmp-mini { opacity: .72; }
}

.tmp-search { margin-bottom: 9px; }
.tmp-search input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 13px;
  color: #f4ece0; background: rgba(0, 0, 0, .22);
  border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 10px; outline: none;
}
.tmp-search input::placeholder { color: rgba(244, 236, 224, .5); }
.tmp-search input:focus { border-color: #f0b9a8; background: rgba(0, 0, 0, .3); }
/* the built-in clear cross is invisible against dark soil */
.tmp-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

/* stash */
.tmp-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; margin-bottom: 6px;
  background: rgba(255, 255, 255, .07); border-radius: 11px; text-decoration: none; color: inherit;
}
.tmp-item:hover { background: rgba(255, 255, 255, .13); }
.tmp-item .tmp-ico { font-size: 19px; flex: 0 0 auto; }
.tmp-item .tmp-lbl { flex: 1; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmp-mini {
  background: rgba(255, 255, 255, .12); border: 0; color: #f4ece0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px; font-size: 13px; line-height: 1; flex: 0 0 auto;
}
.tmp-mini:hover { background: rgba(255, 255, 255, .24); }
.tmp-mini.tmp-danger:hover { background: #b91c1c; }

.tmp-add {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; margin-bottom: 10px; cursor: pointer;
  background: #16a34a; border: 0; border-radius: 11px; color: #fff;
  font-size: 13.5px; font-weight: 600; font-family: inherit; text-align: left;
}
.tmp-add:hover { background: #15803d; }
.tmp-add.tmp-have { background: rgba(255, 255, 255, .09); color: #cbb99b; cursor: default; }

/* notes */
.tmp-note {
  position: relative; padding: 11px 30px 11px 12px; margin-bottom: 8px;
  border-radius: 4px 12px 4px 12px; color: #40331f; font-size: 13.5px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3); transform: rotate(-.5deg);
}
.tmp-note:nth-child(even) { transform: rotate(.6deg); }
.tmp-note textarea {
  width: 100%; border: 0; background: transparent; resize: vertical;
  /* room for roughly five lines before it has to grow, and it grows from
     there — 44px was two lines, which is a reminder, not a note */
  min-height: 96px;
  /* the script sizes this to the content; a scrollbar would only appear for
     the instant between typing and resizing */
  overflow: hidden;
  font: inherit; color: inherit; outline: none; line-height: 1.5;
}
.tmp-note .tmp-mini { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .12); color: #40331f; }
.tmp-note .tmp-mini:hover { background: #b91c1c; color: #fff; }
.tmp-swatches { display: flex; gap: 6px; padding: 4px 0 10px; }
.tmp-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.tmp-swatch.on { border-color: #fff; }

/* todos */
.tmp-todo { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 5px;
  background: rgba(255, 255, 255, .07); border-radius: 10px; }
.tmp-todo input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #16a34a; cursor: pointer; }
.tmp-todo span { flex: 1; font-size: 13.5px; word-break: break-word; }
.tmp-todo.done span { text-decoration: line-through; opacity: .5; }

.tmp-newrow { display: flex; gap: 6px; margin-bottom: 10px; }
.tmp-newrow input, .tmp-newrow textarea {
  flex: 1; padding: 9px 11px; border-radius: 10px; font: inherit; font-size: 13.5px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .25); color: #fff;
}
.tmp-newrow input::placeholder,
.tmp-newrow textarea::placeholder { color: #a9967a; }
/* A note can run to several lines before it is filed, so the field starts at
   three and grows. The button drops to the bottom rather than stretching into
   a tall orange bar beside it. */
.tmp-newrow.tmp-tall { align-items: flex-end; }
.tmp-newrow.tmp-tall textarea {
  min-height: 68px; resize: vertical; overflow: hidden; line-height: 1.5;
}
.tmp-newrow.tmp-tall button { align-self: stretch; }
.tmp-newrow button {
  padding: 0 15px; border: 0; border-radius: 10px; background: #b45309; color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.tmp-newrow button:hover { background: #92400e; }

/* ------------------------------------------------------------- wardrobe */
/* a big live preview, then one row of chips per slot — each chip is the mole
   actually wearing the item, so nothing has to be imagined */
.tmp-mirror {
  display: flex; justify-content: center; padding: 6px 0 12px;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 255, 255, .09), transparent 65%);
}
.tmp-mirror svg { width: 116px; height: 116px; overflow: visible; }

.tmp-slot { margin-bottom: 14px; }
.tmp-slot h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #cbb99b; display: flex; align-items: baseline; gap: 8px;
}
.tmp-slot h4 span { font-size: 11px; font-weight: 400; color: #a9967a; letter-spacing: 0; }

.tmp-chips {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.tmp-chip {
  flex: 0 0 auto; width: 68px; padding: 5px 3px 6px; cursor: pointer;
  border: 2px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, .07); color: #e6d9c4;
  font-family: inherit; font-size: 10.5px; line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  position: relative;
}
.tmp-chip svg { width: 46px; height: 46px; display: block; overflow: visible; }
.tmp-chip span { display: block; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmp-chip:hover { background: rgba(255, 255, 255, .15); }
.tmp-chip.on { border-color: #f59e0b; background: rgba(245, 158, 11, .18); color: #fff; }
.tmp-chip.locked { opacity: .42; cursor: not-allowed; }
.tmp-chip.locked:hover { background: rgba(255, 255, 255, .07); }
.tmp-lock {
  position: absolute; top: 3px; right: 3px; font-style: normal; font-size: 9px;
  background: rgba(0, 0, 0, .5); padding: 1px 4px; border-radius: 6px;
}

/* vault */
.tmp-vault-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.tmp-btn {
  flex: 1 1 auto; padding: 11px 14px; border: 0; border-radius: 11px; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #f4ece0; font: inherit; font-size: 13.5px; font-weight: 600;
}
.tmp-btn:hover { background: rgba(255, 255, 255, .2); }
.tmp-btn.tmp-primary { background: #b45309; }
.tmp-btn.tmp-primary:hover { background: #92400e; }
.tmp-btn.tmp-danger { background: rgba(185, 28, 28, .35); }
.tmp-btn.tmp-danger:hover { background: #b91c1c; }
.tmp-stat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 12px;
}
.tmp-stat div { background: rgba(255, 255, 255, .07); border-radius: 11px; padding: 10px; text-align: center; }
.tmp-stat b { display: block; font-size: 19px; }
.tmp-stat span { font-size: 10.5px; color: #c3ae90; }
.tmp-hint { font-size: 12px; color: #c3ae90; line-height: 1.65; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 560px) {
  .tmp-mole { width: 62px; height: 56px; }
  /* less headroom to give up on a short screen, but never flush to an edge */
  .tmp-root { --tmp-top: 16px; --tmp-gap: 16px; }
}

/* --------------------------------------------------------- reduced motion */
/* Blinking is deliberately NOT listed here — it is a few pixels, in place,
   for a fifth of a second. Everything below either travels across the page or
   runs continuously, which is what the preference is actually about. */
@media (prefers-reduced-motion: reduce) {
  .tmp-body,
  .tmp-mole.tmp-wiggle .tmp-claw-l, .tmp-mole.tmp-wiggle .tmp-claw-r { animation: none; }
  .tmp-mole.tmp-diving, .tmp-mole.tmp-rising { animation: none; opacity: 1; transform: none; }
  .tmp-trail path { animation: none; opacity: 0; }
  .tmp-dirt.tmp-fly { animation: none; opacity: 0; }
  .tmp-burrow, .tmp-scrim, .tmp-tag, .tmp-say { animation: none; }
}

/* ---------------------------------------------------------------- inline
   The burrow mounted as a page of its own (the installed app's home screen).
   Same chamber, same tabs — it just stops being a floating overlay. */
.tmp-burrow.tmp-inline {
  position: static; transform: none; left: auto; top: auto;
  width: 100%; max-height: none;
  animation: none;
  box-shadow: 0 10px 34px rgba(20, 12, 6, .22);
}
/* The floating panel scrolls inside a capped height; on its own page the
   document does the scrolling, so an inner scroller would trap the wheel. */
.tmp-burrow.tmp-inline .tmp-chamber { max-height: none; overflow: visible; }
.tmp-burrow.tmp-inline .tmp-head { padding-right: 18px; }

/* the speech bubble when it leads somewhere */
.tmp-say-link {
  text-decoration: none; cursor: pointer;
  border: 1.5px solid #f0b9a8;
  box-shadow: 0 4px 14px rgba(20, 12, 6, .28);
}
.tmp-say-link:hover { background: #fff6ee; border-color: #e08a72; }