/* Stash product page. Every rule is scoped under .p-stash.
   Brand: iOS system type and grouped greys, one teal accent (theme.ts: #1F7A8C, soft #E3F1F4).
   Structure: a search and its answer, the add form, a log of queries, history, a grouped list. */
.p-stash {
  --sh-accent: #1f7a8c;
  --sh-accent-ink: #186473;
  --sh-soft: #e3f1f4;
  --sh-bg: #ffffff;
  --sh-grouped: #f2f2f7;
  --sh-fill: #e4e4ea;
  --sh-label: #1c1c1e;
  --sh-secondary: #5c5c63;
  --sh-tertiary: #8e8e93;
  --sh-sep: #dcdce1;
  background: var(--sh-bg);
  color: var(--sh-label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.p-stash h1, .p-stash h2, .p-stash h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 700; color: var(--sh-label); letter-spacing: -0.02em; }
.p-stash h2 span { color: var(--sh-accent); }
.p-stash a { color: var(--sh-accent-ink); text-decoration-color: currentColor; }
.p-stash a:hover { color: var(--sh-label); }
.p-stash :focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 3px; }
.p-stash figure { margin: 0; }
.p-stash small { font-size: inherit; }

/* glyphs */
.p-stash .sh-glass { flex: none; position: relative; display: inline-block; width: 0.62em; height: 0.62em; border: 0.12em solid var(--sh-tertiary); border-radius: 50%; }
.p-stash .sh-glass::after { content: ""; position: absolute; right: -0.28em; bottom: -0.22em; width: 0.3em; height: 0.12em; background: var(--sh-tertiary); transform: rotate(45deg); border-radius: 1px; }
.p-stash .sh-caret { flex: none; display: inline-block; width: 0.08em; min-width: 2px; height: 1.05em; background: var(--sh-accent); border-radius: 1px; }
.p-stash .sh-spark { flex: none; display: inline-block; width: 18px; height: 18px; margin-top: 3px; background: var(--sh-accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* drawn "photos": a wall, a shelf, and the thing on it */
.p-stash .sh-photo { position: relative; display: block; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #d9d2c5 0 62%, #8c6e51 62% 67%, #a98a6b 67%); }
.p-stash .sh-photo i { position: absolute; left: 22%; right: 22%; bottom: 36%; height: 34%; border-radius: 3px; background: #3a6ea5; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.p-stash .sh-photo.sand { background: linear-gradient(180deg, #e6e1d8 0 58%, #c8b79f 58% 64%, #d8c9b2 64%); }
.p-stash .sh-photo.sand i { left: 18%; right: 26%; height: 26%; background: #f4efe6; box-shadow: inset 0 0 0 1px #cfc5b5; transform: rotate(-4deg); }
.p-stash .sh-photo.box { background: linear-gradient(180deg, #cfd6d8 0 60%, #7d8a8f 60% 65%, #9aa6ab 65%); }
.p-stash .sh-photo.box i { left: 28%; right: 18%; height: 40%; background: #c49a5c; box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.1); }
.p-stash .sh-photo.stove { background: linear-gradient(180deg, #b9c0c4 0 64%, #5f676b 64% 68%, #7b8489 68%); }
.p-stash .sh-photo.stove i { left: 30%; right: 30%; height: 30%; border-radius: 6px 6px 3px 3px; background: #2f6b4f; }
.p-stash .sh-photo.key { background: #ece9e3; }
.p-stash .sh-photo.key i { left: 26%; right: auto; bottom: 38%; width: 24%; height: auto; aspect-ratio: 1; border-radius: 50%; background: transparent; border: 4px solid #b38b2d; box-shadow: none; }
.p-stash .sh-photo.key i::after { content: ""; position: absolute; left: 100%; top: 38%; width: 110%; height: 4px; background: #b38b2d; }
.p-stash .sh-photo.wide { aspect-ratio: 16 / 9; border-radius: 12px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- hero: the search */
.p-stash .sh-hero { padding: 36px 0 64px; background: var(--sh-grouped); }
.p-stash .sh-hero .wrap { max-width: 880px; }
.p-stash .sh-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 36px; }
.p-stash .sh-brand img { width: 44px; height: 44px; border-radius: 10px; }
.p-stash .sh-brand > span { font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.p-stash .sh-brand small { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--sh-secondary); }
.p-stash .sh-field { display: flex; align-items: center; gap: 0.35em; margin: 0; padding: 0.42em 0.55em; border-radius: 0.36em; background: var(--sh-fill); font-size: clamp(1.75rem, 7.6vw, 3.75rem); line-height: 1.15; letter-spacing: -0.03em; }
.p-stash .sh-field .sh-caret { margin-left: -0.2em; }
.p-stash .sh-answer { display: flex; gap: 12px; margin: 16px 0 24px; padding: 16px 18px; border-radius: 16px; background: var(--sh-soft); font-size: clamp(1.0625rem, 2.6vw, 1.375rem); line-height: 1.4; color: var(--sh-secondary); }
.p-stash .sh-answer b { color: var(--sh-label); font-weight: 600; }
.p-stash .sh-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-stash .sh-card { margin: 0; padding: 0 0 12px; border-radius: 16px; overflow: hidden; background: var(--sh-bg); font-size: 0.8125rem; line-height: 1.3; }
.p-stash .sh-card .sh-photo { aspect-ratio: 4 / 3; border-radius: 0; }
.p-stash .sh-card b { display: block; padding: 10px 12px 2px; font-size: 0.9375rem; }
.p-stash .sh-card .sh-where, .p-stash .sh-card .sh-by { display: block; padding: 0 12px; color: var(--sh-secondary); }
.p-stash .sh-card .sh-by { color: var(--sh-tertiary); margin-top: 4px; }
.p-stash .sh-card:nth-child(3) { display: none; }
.p-stash .sh-lead { margin: 28px 0 0; max-width: 36em; font-size: 1.1875rem; color: var(--sh-secondary); }

/* ---------------------------------------------------------------- sections */
.p-stash .sh-sec { padding: 64px 0; }
.p-stash .sh-grey { background: var(--sh-grouped); }
.p-stash .sh-sec h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.12; margin: 0 0 20px; max-width: 22ch; }
.p-stash .sh-sec h2 span { display: block; }
.p-stash .sh-sec p { max-width: 36em; color: var(--sh-secondary); }
.p-stash .sh-sec p b { color: var(--sh-label); }
.p-stash .sh-split { display: grid; gap: 36px; align-items: center; }
.p-stash .sh-intro { margin: 0 0 28px; }

/* add form */
.p-stash .sh-steps { list-style: none; padding: 0; margin: 0; counter-reset: sh; }
.p-stash .sh-steps li { counter-increment: sh; position: relative; margin: 0; padding: 12px 0 12px 44px; border-top: 1px solid var(--sh-sep); color: var(--sh-secondary); font-size: 0.9375rem; }
.p-stash .sh-steps li::before { content: counter(sh); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sh-accent); color: #ffffff; font-weight: 700; font-size: 0.875rem; }
.p-stash .sh-steps b { color: var(--sh-label); }
.p-stash .sh-form { justify-self: center; width: 100%; max-width: 360px; padding: 14px 14px 18px; border-radius: 30px; background: var(--sh-grouped); border: 8px solid #1c1c1e; }
.p-stash .sh-form p { margin: 0; max-width: none; color: var(--sh-label); }
.p-stash .sh-form .sh-gh { color: var(--sh-tertiary); }
.p-stash .sh-form .sh-nav { color: var(--sh-accent); }
.p-stash .sh-form .sh-entry { color: var(--sh-secondary); }
.p-stash .sh-nav { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 12px; font-size: 0.875rem; color: var(--sh-accent); }
.p-stash .sh-nav b { color: var(--sh-label); }
.p-stash .sh-nav .on { font-weight: 600; }
.p-stash .sh-gh { margin: 14px 0 6px; padding: 0 14px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sh-tertiary); }
.p-stash .sh-sec .sh-gh { max-width: none; }
.p-stash .sh-row { padding: 11px 14px; border-radius: 12px; background: var(--sh-bg); font-size: 0.9375rem; color: var(--sh-label); }
.p-stash .sh-row + .sh-row { border-radius: 0 0 12px 12px; border-top: 1px solid var(--sh-sep); }
.p-stash .sh-row.sw { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.p-stash .sh-switch { width: 40px; height: 24px; border-radius: 12px; background: var(--sh-fill); box-shadow: inset 0 0 0 2px var(--sh-fill); position: relative; }
.p-stash .sh-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.p-stash .sh-row.two { display: grid; font-size: 0.875rem; }
.p-stash .sh-row.two small { color: var(--sh-secondary); font-size: 0.8125rem; }
.p-stash .sh-row.two:first-of-type { border-radius: 12px 12px 0 0; }
.p-stash .sh-entry { padding: 4px 4px 12px; font-size: 0.875rem; color: var(--sh-secondary); line-height: 1.4; }
.p-stash .sh-entry b { display: block; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--sh-label); }
.p-stash .sh-entry small { display: block; color: var(--sh-tertiary); font-size: 0.8125rem; }
.p-stash .sh-form .sh-btn { padding: 11px; border-radius: 12px; background: var(--sh-accent); color: #ffffff; text-align: center; font-weight: 600; font-size: 0.9375rem; }

/* the log of queries */
.p-stash .sh-asks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sh-sep); }
.p-stash .sh-asks li { display: grid; gap: 10px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--sh-sep); }
.p-stash .sh-q { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sh-fill); font-size: 1.0625rem; color: var(--sh-label); align-self: start; max-width: none; }
.p-stash .sh-a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.p-stash .sh-a .sh-photo { width: 56px; height: 56px; }
.p-stash .sh-a p { margin: 0; font-size: 0.9375rem; }
.p-stash .sh-a small { display: block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sh-accent-ink); }

/* grouped list */
.p-stash .sh-narrow { max-width: 760px; }
.p-stash .sh-list { list-style: none; padding: 0; margin: 0; border-radius: 14px; background: var(--sh-grouped); overflow: hidden; }
.p-stash .sh-list li { display: grid; gap: 2px; margin: 0; padding: 13px 16px; }
.p-stash .sh-list li + li { border-top: 1px solid var(--sh-sep); }
.p-stash .sh-list b { font-weight: 600; font-size: 1rem; }
.p-stash .sh-list span { font-size: 0.9375rem; color: var(--sh-secondary); }
.p-stash .sh-faq { border-radius: 14px; background: var(--sh-grouped); overflow: hidden; }
.p-stash .sh-faq details + details { border-top: 1px solid var(--sh-sep); }
.p-stash .sh-faq summary { cursor: pointer; list-style: none; position: relative; padding: 13px 44px 13px 16px; font-weight: 600; }
.p-stash .sh-faq summary::-webkit-details-marker { display: none; }
.p-stash .sh-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--sh-tertiary); border-bottom: 2px solid var(--sh-tertiary); transform: rotate(45deg); }
.p-stash .sh-faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.p-stash .sh-faq details > div { padding: 0 16px 14px; }
.p-stash .sh-faq details > div p { margin: 0; font-size: 0.9375rem; }
.p-stash .sh-foot { margin: 14px 16px 0; font-size: 0.875rem; }

/* the end: an empty search */
.p-stash .sh-end { padding: 64px 0 80px; background: var(--sh-grouped); text-align: center; }
.p-stash .sh-end .wrap { max-width: 640px; }
.p-stash .sh-field.small { margin: 0 0 28px; font-size: clamp(1.375rem, 5vw, 2rem); color: var(--sh-tertiary); }
.p-stash .sh-ph { flex: 1; text-align: left; }
.p-stash .sh-field.small .sh-caret { order: -1; margin: 0 -0.1em 0 0; }
.p-stash .sh-end h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 8px; }
.p-stash .sh-end p { margin: 0; color: var(--sh-secondary); }

@media (min-width: 720px) {
  .p-stash .sh-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .p-stash .sh-card:nth-child(3) { display: block; }
  .p-stash .sh-asks li { grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start; }
}
@media (min-width: 960px) {
  .p-stash .sh-hero { padding: 64px 0 96px; }
  .p-stash .sh-sec { padding: 96px 0; }
  .p-stash .sh-split { grid-template-columns: 1.1fr 1fr; gap: 72px; }
}

@media (prefers-reduced-motion: no-preference) {
  .p-stash .sh-caret { animation: sh-blink 1.1s steps(1) infinite; }
  @keyframes sh-blink { 50% { opacity: 0; } }
}