/* App screens: home (Oversikt), wardrobe, item detail and form, outfit list and detail. */

/* ------------------------------------------------------------------ home */
.greeting h1 {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display-serif);
  line-height: 1;
}
.greeting p { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-ink-2); font-size: var(--text-lg); }

.today {
  display: grid;
  grid-template-columns: clamp(240px, 30vw, 400px) minmax(0, 1fr);
  gap: clamp(var(--space-5), 3.5vw, var(--space-9));
  align-items: center;
  margin-top: var(--section-gap-app);
  padding: clamp(var(--space-4), 1.8vw, var(--space-6));
  border-radius: 32px;
  background: var(--color-surface);
  box-shadow: 0 0 0 1px rgb(10 25 11 / .05), var(--shadow-md);
}
.today .collage { box-shadow: none; }
.today-body { display: grid; gap: var(--space-4); align-content: center; padding-right: var(--space-4); }
.today-body h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-display-serif); line-height: 1.05; }
.today-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.today-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.today-plus {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
}
.day-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px rgb(10 25 11 / .05);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.day-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(10 25 11 / .06), var(--shadow-md); }
.day-card.is-today { box-shadow: 0 0 0 2px var(--color-green); }
.day-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); }
.day-card-head strong { font-weight: var(--weight-semibold); }
.day-card .wx { font-size: var(--text-xs); }
.day-card .collage { border-radius: var(--radius-sm); box-shadow: none; }
.day-free {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--color-line-control);
  color: var(--color-ink-3);
  font-size: var(--text-xs);
  text-align: center;
}
.day-free .icon { width: 20px; height: 20px; }

/* Horizontal shelves (Figma: "Your clothes", "Your combos" carousels). */
.shelf { position: relative; }
.shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--shelf-col, 210px);
  gap: var(--shelf-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 2px;
  padding: 4px 2px var(--space-3);
  scrollbar-width: none;
}
.shelf-track > * { scroll-snap-align: start; }
.shelf-nav { display: flex; gap: var(--space-2); }
.shelf-more {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--color-green-tint);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out);
}
.shelf-more:hover { background: #cbeccf; color: var(--color-ink); }
.shelf-more .circle {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-paper);
}

.feed-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
}
.mini-post { display: grid; gap: var(--space-3); color: inherit; text-decoration: none; }
.mini-post:hover { color: inherit; }
.mini-post footer { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.mini-post footer .likes { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; color: var(--color-ink-3); }

/* ------------------------------------------------------------------ wardrobe */
.wardrobe-tools {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.wardrobe-tools .row-between { gap: var(--space-3); }
.search { width: min(340px, 100%); }
.filter-selects { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-selects .select { min-height: 40px; width: auto; padding-left: var(--space-4); font-size: var(--text-sm); }
.result-line { font-size: var(--text-sm); color: var(--color-ink-3); }

.grid-items[data-density="list"] .item-card {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px rgb(10 25 11 / .05);
}
.grid-items[data-density="list"] .garment-tile { border-radius: var(--radius-sm); }
.grid-items[data-density="list"] .item-card-meta { margin-top: 4px; }

.add-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  aspect-ratio: 1;
  border: 2px dashed var(--color-line-control);
  border-radius: var(--radius-md);
  color: var(--color-ink-2);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.add-card:hover { border-color: var(--color-green-ink); color: var(--color-ink); }
.add-card .icon { width: 28px; height: 28px; }
.grid-items[data-density="list"] .add-card { aspect-ratio: auto; min-height: 64px; grid-auto-flow: column; }

.skeleton-card { display: grid; gap: var(--space-3); }
.skeleton-card .skeleton:first-child { aspect-ratio: 1; }
.skeleton-card .skeleton + .skeleton { height: 14px; width: 70%; }

/* ------------------------------------------------------------------ item detail */
.item-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}
.item-hero.garment-tile { border-radius: 32px; }
.item-hero.garment-tile img { width: 78%; height: 78%; }
.item-info { display: grid; gap: var(--space-5); }
.item-info h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-display-serif); line-height: 1.05; }
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-lg);
  background: var(--color-line);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-line);
}
.facts div { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); background: var(--color-surface); }
.facts dt { font-size: var(--text-xs); color: var(--color-ink-3); }
.facts dd { margin: 0; font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.item-notes { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-tile-2); color: var(--color-ink-2); }

.plus-lock {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.plus-lock:not(.is-open) .grid-items { filter: blur(6px) saturate(.6); opacity: .7; pointer-events: none; }
.plus-lock-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  background: rgb(242 250 243 / .5);
}
.plus-lock-card p { max-width: 38ch; color: var(--color-ink-2); }

/* ------------------------------------------------------------------ item form */
.item-form {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}
.photo-panel { display: grid; gap: var(--space-4); position: sticky; top: calc(var(--header-height) + var(--space-7)); }
.photo-panel .garment-tile { border-radius: 32px; }
.photo-panel .dropzone-lite {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  aspect-ratio: 1;
  border: 2px dashed var(--color-line-control);
  border-radius: 32px;
  background: var(--color-surface);
  color: var(--color-ink-2);
  text-align: center;
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.photo-panel .dropzone-lite:hover { border-color: var(--color-green-ink); background: var(--color-green-tint); }
.photo-panel .dropzone-lite:focus-visible { outline: 2px solid var(--color-green-ink); outline-offset: 3px; }
.photo-panel { min-width: 0; }
.photo-panel .dropzone-lite .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgb(71 221 86 / .28) 48%, transparent 52%) 0 -100% / 100% 200% no-repeat;
  animation: scan 1.6s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes scan { to { background-position: 0 100%; } }
.photo-progress { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-2); }

.form-card { display: grid; gap: var(--space-6); padding: clamp(var(--space-5), 2.6vw, var(--space-8)); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: 0 0 0 1px rgb(10 25 11 / .05), var(--shadow-sm); }
.form-card fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.form-card legend { padding: 0; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-2); }
/* a quiet note, not a control: says the value came from the photo */
.suggested { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-ink-3); pointer-events: none; }
.suggested .icon { width: 13px; height: 13px; }
.autocomplete { position: relative; }
.autocomplete .menu { top: calc(100% + 6px); left: 0; right: 0; }
.autocomplete .menu small { margin-left: auto; color: var(--color-ink-3); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ------------------------------------------------------------------ outfit detail */
.outfit-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}
.outfit-stage { display: grid; gap: var(--space-4); }
.outfit-stage .collage { border-radius: 32px; box-shadow: var(--shadow-md); }
.stage-switch { justify-self: start; max-width: 100%; }
.stage-switch button { white-space: nowrap; }
@media (max-width: 420px) {
  .stage-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; }
  .stage-switch button { justify-content: center; padding: 0 var(--space-2); }
}

/* "På figur": the same cut-outs dressed on a soft neutral silhouette, laid out by body zone. */
.collage.is-figure { background: linear-gradient(180deg, var(--color-tile-2), var(--color-tile)); }
.figure-body { position: absolute; inset: 4% 0 2%; width: 100%; height: 94%; fill: rgb(255 255 255 / .85); filter: drop-shadow(0 6px 18px rgb(10 25 11 / .06)); }

/* "Mitt bilde": the owner's own mirror photo, cropped to the same 4:5 stage. */
.selfie-empty { display: grid; place-items: center; }
.selfie-empty-body { display: grid; gap: var(--space-3); justify-items: center; max-width: 34ch; padding: var(--space-6); text-align: center; color: var(--color-ink-2); }
.selfie-note { display: flex; align-items: flex-start; text-align: left; gap: var(--space-2); font-size: var(--text-sm); }
.selfie { display: grid; gap: var(--space-4); }
.selfie-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow-md); background: var(--color-tile); }
.selfie-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.outfit-info { display: grid; gap: var(--space-6); }
.outfit-info h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-display-serif); line-height: 1.05; }
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.piece-rows { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.piece-rows a {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}
.piece-rows a:hover { background: var(--color-surface); color: inherit; }
.piece-rows .garment-tile { border-radius: var(--radius-sm); }
.piece-rows small { color: var(--color-ink-3); }

@media (max-width: 1020px) {
  /* room for the 2px today ring and the hover lift, which the scroll box would otherwise clip */
  .week-strip { grid-template-columns: repeat(7, minmax(120px, 1fr)); overflow-x: auto; padding: 6px 4px var(--space-2); margin: -6px -4px 0; scroll-padding-inline: 4px; scrollbar-width: none; }
}

@media (max-width: 860px) {
  .today { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); border-radius: var(--radius-xl); }
  .today-body { padding: 0 var(--space-2) var(--space-2); }
  .item-detail,
  .item-form,
  .outfit-detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .photo-panel { position: static; }

}

@media (max-width: 640px) {
  .shelf-track { --shelf-col: 148px; gap: var(--space-3); }
  .facts { grid-template-columns: 1fr 1fr; }
  .search { width: 100%; }
}

/* ------------------------------------------------------------------ settings */
.settings {
  display: grid;
  grid-template-columns: 200px minmax(0, 720px);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}
.settings-nav {
  position: sticky;
  top: calc(var(--header-height) + var(--space-7));
  display: grid;
  gap: 2px;
}
.settings-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-2);
  text-decoration: none;
}
.settings-nav a:hover { background: var(--color-tile-2); color: var(--color-ink); }
.settings-nav a[aria-current="true"] { background: var(--color-green-tint); color: var(--color-ink); }
.settings-body { display: grid; gap: var(--space-6); }
.settings-section { scroll-margin-top: calc(var(--header-height) + var(--space-7)); gap: var(--space-5); }
.settings-section h2 { font-size: var(--text-xl); }
.settings-form { display: grid; gap: var(--space-7); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.settings-danger { box-shadow: 0 0 0 1px rgb(180 60 50 / .25); }

@media (max-width: 860px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-nav {
    position: static;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .settings-nav a { flex: none; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-line); border-radius: var(--radius-pill); }
}

/* ------------------------------------------------------------------ billing */
.billing > * + * { margin-top: var(--space-5); }
.billing-status { gap: var(--space-3); justify-items: start; }
.billing-status h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-display-serif); }
.billing-upgrade {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  align-items: start;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  border-radius: 28px;
  background: linear-gradient(160deg, var(--color-sky-tint), var(--color-surface) 60%);
  box-shadow: 0 0 0 1px rgb(10 25 11 / .05);
}
.plus-pitch { display: grid; gap: var(--space-4); justify-items: start; }
.plus-pitch h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display-serif); line-height: 1.08; }
.plus-from { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-sky-ink); }
.plus-price { display: flex; align-items: baseline; gap: var(--space-2); }
.plus-price strong { font-size: var(--text-display-2); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1; }
.plus-price span { color: var(--color-ink-2); }
.compare { display: grid; padding: 0; margin: 0; list-style: none; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-line); overflow: hidden; }
.compare li { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.compare li + li { border-top: 1px solid var(--color-line); }
.compare li span:not(:first-child) { display: flex; justify-content: center; text-align: center; color: var(--color-ink-2); }
.compare li span:last-child { color: var(--color-ink); font-weight: var(--weight-semibold); }
.compare .icon { color: var(--color-green-ink); }
.compare .icon.is-off { color: var(--color-ink-3); }
.compare-head { background: var(--color-tile-2); font-weight: var(--weight-semibold); }
.receipts { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.receipts li { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); }
.redirect { position: fixed; inset: 0; z-index: var(--z-sheet); display: grid; place-items: center; background: rgb(242 250 243 / .86); backdrop-filter: blur(6px); }
.redirect[hidden] { display: none; }
.redirect-card { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-7); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.redirect-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--color-tile); border-top-color: var(--color-green-ink); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .redirect-spinner { animation-duration: 3s; } }
@media (max-width: 860px) { .billing-upgrade { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ photo quality */

/* ------------------------------------------------------------------ photo guide (before the camera opens) */
.dialog-guide { width: min(760px, calc(100vw - 32px)); }
.guide-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.guide-tip { display: grid; gap: var(--space-2); align-content: start; }
.guide-tip h3 { margin-top: var(--space-2); font-size: var(--text-md); line-height: 1.25; }
.guide-tip p { font-size: var(--text-sm); color: var(--color-ink-2); }
.guide-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.guide-shot { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; margin: 0; border-radius: var(--radius-sm); background: var(--ground); overflow: hidden; }
.guide-shot { --line: #F4F7F2; }
.guide-shot > svg { width: 100%; height: 100%; fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guide-shot.is-faint { --line: #D9DBD3; }
.guide-shot .g-sun, .guide-shot .g-flash { stroke: #F2B53A; }
.guide-shot .g-flash { fill: #F2B53A; stroke-width: 1.5; }
.guide-shot .g-shadow { stroke: none; fill: rgb(20 30 22 / .35); }
.guide-shot .g-frame { stroke: rgb(255 255 255 / .7); stroke-width: 2.5; }
.guide-shot figcaption {
  position: absolute;
  inset: auto 4px 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .92);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}
.guide-shot figcaption .icon { width: 12px; height: 12px; flex: none; }
.guide-shot.is-good figcaption .icon { color: var(--color-green-ink); }
.guide-shot.is-bad figcaption .icon { color: var(--color-danger); }
@media (max-width: 640px) {
  .dialog-guide .dialog-body { padding: var(--space-5); }
  .guide-tips { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .guide-shot { aspect-ratio: 4 / 3; }
  .guide-shot > svg { width: 78%; }
}

/* ------------------------------------------------------------------ cut step (second step of the photo dialog) */
.photo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.cut-step { gap: var(--space-4); }
.cut-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: min(52vh, 460px);
  border-radius: var(--radius-lg);
  background: var(--color-tile);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
.cut-stage img { position: absolute; inset: 0; margin: auto; width: 92%; height: 92%; object-fit: contain; }
.cut-stage.is-cut img { filter: var(--shadow-garment); }
/* edit: dark ground, so the faded (not selected) part reads as switched off */
.cut-stage.is-editing { background: #26302A; cursor: crosshair; }
.cut-busy {
  position: absolute;
  inset: auto var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .92);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.spinner { width: 16px; height: 16px; border: 2px solid var(--color-line); border-top-color: var(--color-green-ink); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.cut-bar { display: grid; gap: var(--space-3); }
.cut-summary, .cut-hint { color: var(--color-ink-2); font-size: var(--text-sm); }
.cut-bar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.cut-bar-actions .btn-primary { order: 3; }
.link-button { justify-self: start; padding: 0; border: 0; background: none; color: var(--color-ink-3); font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { color: var(--color-ink); }
.seed-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.seed-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 0 3px var(--color-surface), var(--shadow-md); }
.seed-dot.is-drop { background: var(--color-danger); }
/* the two tools read as one switch: exactly one is always on */
.cut-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius-pill); background: var(--color-tile); }
.cut-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cut-tool:hover { color: var(--color-ink); }
.cut-tool:focus-visible { outline: 2px solid var(--color-green-ink); outline-offset: 2px; }
.cut-tool.is-keep .icon { color: var(--color-green-ink); }
.cut-tool.is-drop .icon { color: var(--color-danger); }
.cut-tool[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm, 0 1px 3px rgb(10 25 11 / .12)); }
.cut-tool.is-keep[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--color-green-ink); }
.cut-tool.is-drop[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--color-danger); }
@media (max-width: 640px) {
  .cut-stage { height: min(46vh, 380px); }
  .cut-bar-actions { justify-content: stretch; }
  .cut-bar-actions .btn { flex: 1 1 auto; }
  .cut-bar-actions .btn-primary { flex-basis: 100%; order: -1; }
}

/* item form: where it was bought */
.shop-fields { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); }
.label-sm { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-2); }
@media (max-width: 560px) { .shop-grid { grid-template-columns: minmax(0, 1fr); } }
/* item page: the shop row spans both columns of the facts grid */
.facts .fact-wide { grid-column: 1 / -1; }
.facts .fact-wide dd { flex-wrap: wrap; font-weight: var(--weight-regular); }

/* settings: profile photo */
.avatar-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.avatar-field-body { display: grid; gap: var(--space-2); flex: 1 1 220px; }

/* settings: two-step verification and follow requests */
.dialog-wide { width: min(600px, calc(100vw - 32px)); }
.twofa-steps { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.2em; line-height: var(--leading-normal); }
.twofa-qr { justify-self: center; width: min(220px, 100%); aspect-ratio: 1; padding: var(--space-3); border-radius: var(--radius-md); background: #fff; box-shadow: 0 0 0 1px var(--color-line); }
.twofa-qr svg { display: block; width: 100%; height: 100%; }
.twofa-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.twofa-key code { font-size: var(--text-base); letter-spacing: 0.05em; overflow-wrap: anywhere; }
.twofa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-tile-2); list-style: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--text-base); }
.follow-requests { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }