/* Shared UI for the gift and vow tools (unit u19-gifts). Tokens only, so dark mode in tools.css applies. */

/* Segmented control: a sliding thumb behind the active option */
.tool .u19-seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 18px;
  background: rgb(var(--ink) / .07); isolation: isolate;
}
.tool .u19-seg::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--u19-n, 2)); border-radius: 14px; background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06);
  transform: translateX(calc(100% * var(--u19-i, 0))); transition: transform .32s cubic-bezier(.2, 0, 0, 1);
}
.tool .u19-seg button {
  min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 800;
  color: rgb(var(--ink) / .6); cursor: pointer; transition: color .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tool .u19-seg button[aria-checked="true"] { color: rgb(var(--ink)); }
.tool .u19-seg button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; }

/* Pill switch */
.tool .u19-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 20px;
  background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); font: inherit; font-size: 14px; font-weight: 750;
  color: rgb(var(--ink) / .75); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.tool .u19-toggle:active { transform: scale(.96); }
.tool .u19-toggle .u19-dot {
  position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: rgb(var(--ink) / .18);
  transition: background-color .2s ease;
}
.tool .u19-toggle .u19-dot::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .2s cubic-bezier(.2, 0, 0, 1);
}
.tool .u19-toggle[aria-pressed="true"] { background: rgb(var(--accent) / .16); color: rgb(var(--ink)); box-shadow: inset 0 0 0 2px rgb(var(--accent) / .6); }
.tool .u19-toggle[aria-pressed="true"] .u19-dot { background: rgb(var(--accent)); }
.tool .u19-toggle[aria-pressed="true"] .u19-dot::after { transform: translateX(12px); background: #fff; }
.tool .u19-toggle:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .u19-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Idea rows */
.tool .u19-ideas { display: grid; gap: 8px; }
.tool .u19-idea {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 52px 12px 16px; border-radius: 16px;
  background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04); min-height: 56px;
}
.tool .u19-idea-text { flex: 1 1 100%; font-size: 16px; line-height: 23px; font-weight: 650; color: rgb(var(--ink) / .88); }
.tool .u19-tag {
  flex: none; font-size: 12px; line-height: 16px; font-weight: 800; padding: 3px 8px; border-radius: 10px;
  background: rgb(var(--accent) / .12); color: var(--link); font-variant-numeric: tabular-nums;
}
.tool .u19-tag-theme { background: rgb(var(--ink) / .08); color: rgb(var(--ink) / .8); }
.tool .u19-idea .u19-fav { position: absolute; right: 4px; top: 50%; margin-top: -22px; }
.tool .u19-fav {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: none;
  color: rgb(var(--ink) / .22); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s ease;
}
.tool .u19-fav .tool-icon { width: 22px; height: 22px; transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.tool .u19-fav[aria-pressed="true"] { color: #C0237A; }
.tool .u19-fav[aria-pressed="true"] .tool-icon { fill: currentColor; }
.tool .u19-fav.is-pop .tool-icon { animation: u19-pop .36s cubic-bezier(.2, 0, 0, 1); }
.tool .u19-fav:active .tool-icon { transform: scale(.88); }
.tool .u19-fav:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -4px; }
@keyframes u19-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Small icon buttons in a row (share, print, calendar) */
.tool .u19-iconbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px;
  background: var(--surface); color: rgb(var(--ink) / .8); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); -webkit-tap-highlight-color: transparent; transition: transform .15s ease;
}
.tool .u19-iconbtn .tool-icon { width: 18px; height: 18px; }
.tool .u19-iconbtn:active { transform: scale(.96); }
.tool .u19-iconbtn:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .u19-h { font-size: 13px; line-height: 18px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ink) / .7); margin: 4px 0 -6px; }
.tool .u19-empty { padding: 16px; border-radius: 16px; background: var(--surface); font-size: 15px; font-weight: 650; color: rgb(var(--ink) / .6); }

@media (hover: hover) and (pointer: fine) {
  .tool .u19-seg button:hover { color: rgb(var(--ink)); }
  .tool .u19-fav:hover { color: #C0237A; }
  .tool .u19-iconbtn:hover, .tool .u19-toggle:hover { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .25); }
}
@media (prefers-reduced-motion: reduce) {
  .tool .u19-seg::before, .tool .u19-fav .tool-icon { transition: none; }
  .tool .u19-fav.is-pop .tool-icon { animation: none; }
}