/* Shared free-tool theme. html[data-theme=dark|light] set by free-tool-theme.js
   Name the neu before changing it.
   --window = WELCOME forage picture-frame (thick inner rim). Not clips.
   --roundedneu = main tool window, and each onboarding clip card.
   --raised-lg = unused outer raise. Do not use on .tool.
   --raised = 1x 2x 4x, arrows, store buttons, small raised controls.
   --sunken = flour/butter rows, wells, Original/Scaled lists. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #E2E4E8;
  --neu-dark: rgba(140,145,155,0.5);
  --neu-light: rgba(255,255,255,0.85);
  --raised: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
  --raised-lg: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  --roundedneu: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light), inset 4px 4px 8px var(--neu-light), inset -4px -4px 8px var(--neu-dark);
  --window: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light), inset 4px 4px 8px var(--neu-light), inset -4px -4px 8px var(--neu-dark);
  --sunken: inset 5px 5px 10px var(--neu-dark), inset -5px -5px 10px var(--neu-light);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #2A2D32;
  --text: #E8EAEE;
  --muted: #C5C9D0;
  --soft: #A8ADB6;
  --neu-dark: rgba(8, 10, 14, 0.5);
  --neu-light: rgba(72, 78, 88, 0.85);
  --raised: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
  --raised-lg: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  --roundedneu: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light), inset 4px 4px 8px var(--neu-light), inset -4px -4px 8px var(--neu-dark);
  --window: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light), inset 4px 4px 8px var(--neu-light), inset -4px -4px 8px var(--neu-dark);
  --sunken: inset 5px 5px 10px var(--neu-dark), inset -5px -5px 10px var(--neu-light);
}
html[data-theme="dark"] body,
html[data-theme="dark"] html {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="dark"] .action-row button.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .primary,
html[data-theme="dark"] .copy-btn.on {
  background: #e8eaee;
  color: #1c1f24;
}
html[data-theme="dark"] .stores a,
html[data-theme="dark"] .all-tools a,
html[data-theme="dark"] .all-tools .icon,
html[data-theme="dark"] .pitch .bridge,
html[data-theme="dark"] .pitch .cta-label,
html[data-theme="dark"] .tools-grid .icon {
  color: var(--muted) !important;
}
html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1.page-title {
  color: var(--text) !important;
}
.page-title,
h1.page-title {
  font-weight: 700 !important;
}
.tools-grid strong {
  font-weight: 400 !important;
}
button,
.all-tools a,
.all-tools .lab,
.pitch .cta-btn,
a.cta-btn {
  font-weight: 400 !important;
}
.quick button.on,
.ing-list button.on,
#modes button.on,
.tabs button.on,
.g-modes button.on,
.sound-row button.on,
.copy-btn.on,
.bp-mode-row button.on,
#displayModes button.on,
#units button.on {
  background: var(--bg) !important;
  color: var(--text) !important;
  box-shadow: var(--sunken) !important;
}
html[data-theme="dark"] .tools-grid strong,
html[data-theme="dark"] .tools-grid a {
  color: var(--text) !important;
}
html[data-theme="dark"] .tools-grid a span {
  color: var(--muted) !important;
}
html[data-theme="dark"] .tools-grid .icon {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .all-tools a,
html[data-theme="dark"] .all-tools .lab {
  color: var(--text) !important;
}
html[data-theme="dark"] .all-tools .icon {
  color: var(--muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .seo-block {
  opacity: 0.32;
}
#toolFilter:focus::placeholder,
#toolFilter:active::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.all-tools .grid a[href="/tools"] {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.all-tools .grid a {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.all-tools .grid a .icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
  color: var(--muted, #6b7280);
}
.all-tools .grid a .icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.all-tools .grid a .lab {
  min-width: 0;
  line-height: 1.25;
}

/* Kill hardcoded light-theme white shadows (store buttons, sliders, fallbacks). */
html[data-theme="dark"] .stores a,
html[data-theme="dark"] .all-tools a,
html[data-theme="dark"] .tools-grid a,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .copy-icon-btn,
html[data-theme="dark"] .ta-grip,
html[data-theme="dark"] .quick button:not(.on),
html[data-theme="dark"] .ing-list button:not(.on),
html[data-theme="dark"] .action-row button:not(.on),
html[data-theme="dark"] .fb-fab,
html[data-theme="dark"] .fb-card,
html[data-theme="dark"] .fb-toast,
html[data-theme="dark"] .copy-btn,
html[data-theme="dark"] .primary {
  box-shadow: var(--raised) !important;
}
html[data-theme="dark"] .stores a:active,
html[data-theme="dark"] .theme-toggle:active,
html[data-theme="dark"] .copy-icon-btn:active,
html[data-theme="dark"] .ta-grip:active,
html[data-theme="dark"] .quick button:active,
html[data-theme="dark"] .sound-row button:active,
html[data-theme="dark"] .ing-list button:active,
html[data-theme="dark"] .action-row button:active,
html[data-theme="dark"] .copy-btn:active,
html[data-theme="dark"] #start:active,
html[data-theme="dark"] .timer-card-controls button:active {
  box-shadow: var(--sunken) !important;
}
.quick button:active,
.sound-row button:active,
#start:active,
.timer-card-controls button:active {
  box-shadow: var(--sunken) !important;
}
html[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(:is(.scale-badge > input, .scale-total > input, .total-field > input)),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .fb-well,
html[data-theme="dark"] .scaled-well,
html[data-theme="dark"] .result-list.scaled-well,
html[data-theme="dark"] #scaledWrap,
html[data-theme="dark"] .scale-badge,
html[data-theme="dark"] .scale-track,
html[data-theme="dark"] .scale-total {
  box-shadow: var(--sunken) !important;
}
/* Inner fields of already-sunken wells must not get a second inset. */
html[data-theme="dark"] .scale-badge > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .scale-total > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .total-field > input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  box-shadow: none !important;
  background: transparent !important;
}
html[data-theme="dark"] .scale-badge input,
html[data-theme="dark"] .scale-total,
html[data-theme="dark"] .scale-total input {
  color: #f3f4f6 !important;
  font-weight: 600;
}
html[data-theme="dark"] .scale-track input[type="range"],
html[data-theme="dark"] .scale-track input[type="range"]:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
html[data-theme="dark"] .scale-track input[type="range"]::-webkit-slider-runnable-track,
html[data-theme="dark"] .scale-track input[type="range"]::-webkit-slider-container,
html[data-theme="dark"] .scale-track input[type="range"]::-moz-range-track,
html[data-theme="dark"] .scale-track input[type="range"]::-moz-range-progress {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
html[data-theme="dark"] .scale-track input[type="range"]::-webkit-slider-thumb,
html[data-theme="dark"] .scale-track input[type="range"]::-moz-range-thumb {
  background: var(--bg) !important;
  box-shadow: var(--raised) !important;
  border: none !important;
}
html[data-theme="dark"] .quick button.on,
html[data-theme="dark"] .ing-list button.on,
html[data-theme="dark"] .unit-toggle-track,
html[data-theme="dark"] .fan-toggle,
html[data-theme="dark"] .switch .track,
html[data-theme="dark"] .switch input:checked + .track {
  background: var(--bg) !important;
  box-shadow: var(--sunken) !important;
}
html[data-theme="dark"] .unit-toggle-thumb,
html[data-theme="dark"] .switch .knob {
  background: var(--bg) !important;
  box-shadow: var(--raised) !important;
}
html[data-theme="dark"] #modes button.on {
  background: var(--bg) !important;
  color: var(--text) !important;
  box-shadow: var(--sunken) !important;
}
html[data-theme="dark"] .result-list .item.is-hi,
html[data-theme="dark"] .paste-hi {
  box-shadow: var(--sunken) !important;
}
html[data-theme="dark"] .action-row button.primary {
  box-shadow: none !important;
}

.pitch {
  margin-top: 128px !important;
  margin-bottom: 128px !important;
}
h1.page-title {
  margin-top: 128px !important;
  margin-bottom: 48px !important;
}
.all-tools {
  margin-top: 128px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

p.seo-lead {
  display: none !important;
}

.pitch a.cta-btn { display: none !important; }
.pitch .cta-btn,
a.cta-btn {
  color: var(--text) !important;
  background: var(--bg) !important;
  box-shadow: var(--raised) !important;
  font-weight: 500 !important;
}
.pitch .cta-btn:active,
a.cta-btn:active {
  box-shadow: var(--sunken) !important;
}

/* Paste lists match recipe-scaler: amount column, then name. Use on every free tool. */
.cb-paste-well {
  position: relative;
  min-height: 160px;
  padding: 14px 12px 10px;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--sunken);
  box-sizing: border-box;
}
.cb-paste-well.is-ph .item {
  opacity: 0.45;
}
.cb-paste-well textarea.paste-src {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  resize: none;
  cursor: text;
}
.result-list.paste-list .item,
.cb-paste-list .item {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7.75rem) minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text);
}
.result-list.paste-list .item + .item,
.cb-paste-list .item + .item {
  margin-top: 4px;
}
.result-list.paste-list .item .amt,
.cb-paste-list .item .amt {
  font-weight: 700;
  text-align: right;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.result-list.paste-list .item .nm,
.cb-paste-list .item .nm {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.result-list.paste-list .item.is-head,
.cb-paste-list .item.is-head {
  grid-template-columns: 1fr;
}
.result-list.paste-list .empty,
.cb-paste-list .empty {
  color: var(--soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Amount fields: tap selects the number (all tools + future). */
input[inputmode="decimal"],
input[inputmode="numeric"],
input[type="number"] {
  -webkit-user-select: text;
  user-select: text;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.total-field {
  width: 100%;
  min-width: 0;
  height: 40px;
  border-radius: 14px;
  padding: 0 12px;
  box-sizing: border-box;
  box-shadow: var(--sunken);
  background: var(--bg);
  display: flex;
  align-items: center;
}
.total-field input {
  width: 100%;
  height: 40px;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.total-field.ing-to {
  justify-content: center;
  min-height: 56px;
  height: 56px;
}
.total-field.ing-to input {
  width: auto !important;
  flex: 0 1 auto !important;
  height: 56px !important;
  text-align: center !important;
  font-size: 28px !important;
}
.ing-unit-lab {
  font-size: 22px !important;
  font-weight: 600;
}
/* Light + dark: one sunken on the wrapper, never on the nested input. */
.scale-badge > input,
.scale-total > input,
.total-field > input {
  box-shadow: none !important;
  background: transparent !important;
}

.store-preview {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 18px 0 0;
  margin-left: calc(50% - 50vw);
  padding: 20px 18px 28px;
  scrollbar-width: none;
  box-sizing: border-box;
}
@media (max-width: 1079px) {
  .store-preview { justify-content: flex-start; }
}
.store-preview::-webkit-scrollbar { display: none; }
.store-preview a {
  flex: 0 0 auto;
  scroll-snap-align: center;
  line-height: 0;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
}
.onboard-window {
  display: block;
  width: min(280px, 82vw);
  aspect-ratio: 1098 / 1992;
  border-radius: 34px !important;
  overflow: hidden;
  background: var(--bg) !important;
  /* Every clip card: --roundedneu. Inside the clip: --raised and --sunken only. */
  box-shadow: var(--roundedneu) !important;
  box-sizing: border-box;
}
.store-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: var(--bg);
  transform: none;
  border-radius: 0;
  filter: none;
}
@media print {
  .store-preview { display: none !important; }
}

/* Future free tools: keep SEO in the HTML, last in the page, visually quiet.
   Do not display:none (cloaking). Place after .all-tools / store pitch. */
section.seo-block,
.seo-block {
  margin: 128px 0 12px !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.32;
}
.seo-block h2,
.seo-block h3,
.seo-block p,
.seo-block li,
.seo-block th,
.seo-block td,
.seo-block .faq-q {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--soft) !important;
  box-shadow: none !important;
}
.seo-block h2 { font-size: 11px !important; margin: 0 0 8px !important; }
.seo-block h3 { font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.4px; margin: 12px 0 6px !important; }
.seo-block .related,
.seo-block .cluster {
  display: none !important;
}
.seo-block table {
  opacity: 0.9;
}
.seo-block a {
  color: var(--soft) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.theme-toggle,
.undo-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: var(--raised);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.theme-toggle:active,
.undo-btn:active:not(:disabled) {
  box-shadow: var(--sunken);
  transform: translateY(1px);
}
.theme-toggle svg,
.undo-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}
.undo-btn:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: var(--sunken);
}
html[data-theme="dark"] .undo-btn:not(:disabled) {
  box-shadow: var(--raised) !important;
}
html[data-theme="dark"] .undo-btn:disabled,
html[data-theme="dark"] .undo-btn:active:not(:disabled) {
  box-shadow: var(--sunken) !important;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Main tool window: --roundedneu. Not --raised. Not --window. */
.tool {
  border-radius: 34px !important;
  background: var(--bg) !important;
  box-shadow: var(--roundedneu) !important;
  overflow: visible;
  padding: 28px 26px 30px !important;
}
@media print {
  .tool {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* Text boxes wrap long lines and grow with the list. Hidden scaler source is excluded. */
textarea:not(.paste-src) {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  resize: none;
  max-height: none !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fb-well textarea {
  max-height: none !important;
}