/* Etsy orders list and dashboard sales section.
   Its own classes rather than borrowing the Bambu dialog's: two features that
   share a stylesheet drift into breaking each other, and this one has a list as
   its main content where Bambu has a form. The dock tile itself reuses the
   shared .serviceDock* classes, because it genuinely is the same component. */

/* Where the tile sits in the dock.
   ---------------------------------------------------------------------------
   The dock is `flex-direction: column-reverse` and every tile is placed by an
   explicit `order`, NOT by DOM position: bambu 1, dropbox 2, drive 3, with the
   controls row (^ and +) pinned at order 0. Higher order = higher up.

   Without a rule here Etsy defaults to order 0 -- the same bucket as the
   controls -- and in a reversed column a tile appended after them renders
   BELOW them, which is why it sat under the collapse arrow instead of stacking
   with the others. Reordering the DOM cannot fix that; only an order can. */
.serviceDockSlot:has([data-service="etsy"]){order:4}

.etsyDockNote{
  margin:8px 0 0; font-size:.72rem; line-height:1.5; color:var(--muted); opacity:.9;
}

/* Above the full-screen report (z-index 10000), because "View orders" is
   reachable from inside it -- at 1000 the dialog opened behind the very view
   that launched it, which looks like the button doing nothing. */
.etsyBackdrop{
  position:fixed; inset:0; z-index:10001;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, #000 62%, transparent);
  backdrop-filter:blur(3px);
  animation:etsyFade .18s ease;
}
@keyframes etsyFade{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .etsyBackdrop{ animation:none } }

.etsyDialog{
  width:min(620px, 100%); max-height:min(84vh, 760px);
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:16px;
  background:var(--panel); color:var(--text);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  overflow:hidden;
}
.etsyHead{
  display:flex; align-items:center; gap:12px;
  padding:15px 17px; border-bottom:1px solid var(--line);
}
.etsyHead>div{ flex:1 1 auto; min-width:0; }
.etsyHead span:first-child{ flex:0 0 auto; }
.etsyLogo img{ width:34px; height:34px; border-radius:9px; display:block; }
.etsyHead>div>span{
  display:block; color:var(--accent2, var(--accent));
  font-size:.58rem; font-weight:900; letter-spacing:.14em;
}
.etsyHead h2{ margin:1px 0 0; font-size:1.02rem; }
.etsyClose{
  appearance:none; cursor:pointer; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface-input,var(--panel));
  color:var(--text); font-size:1.2rem; line-height:1;
  transition:border-color .15s ease, color .15s ease;
}
.etsyClose:hover{ border-color:var(--accent); color:var(--accent); }

.etsyBody{ padding:15px 17px 18px; overflow-y:auto; }
.etsyLoading, .etsyEmpty{ margin:14px 2px; color:var(--muted); font-size:.82rem; line-height:1.55; }

.etsyOrders{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.etsyOrder{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface-input,var(--panel));
}
.etsyOrderMain{ flex:1 1 220px; min-width:0; }
.etsyOrderTitle{
  margin:0; font-size:.82rem; font-weight:650;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.etsyOrderMeta{ margin:3px 0 0; font-size:.74rem; color:var(--muted); }

/* ---- thumbnails ---- */
.etsyThumb{
  flex:0 0 auto; width:44px; height:44px; border-radius:8px;
  object-fit:cover; background:var(--panel); border:1px solid var(--line);
}
.etsyThumbNone{
  display:block;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--line) 55%,transparent) 0 6px, transparent 6px 12px);
}

/* ---- figures, shared by the dock card and the dashboard section ---- */
.etsyDockLoading{ margin:8px 0 0; font-size:.74rem; color:var(--muted); }
.etsyStatRow{
  display:flex; gap:14px; flex-wrap:wrap; margin:9px 0 0;
  font-size:.74rem; color:var(--muted);
}
.etsyStatRow b{ display:block; color:var(--text); font-size:.98rem; font-weight:800; font-variant-numeric:tabular-nums; }

.etsyStats{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:0 0 14px; }
.etsyStat{
  padding:12px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface-input,var(--panel));
}
.etsyStatLabel{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.etsyStatValue{ display:block; margin:5px 0 3px; font-size:1.24rem; font-weight:800; font-variant-numeric:tabular-nums; }
.etsyStatSub{ display:block; font-size:.71rem; color:var(--muted); line-height:1.45; }

.etsyLink{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  color:var(--accent2,var(--accent)); font:inherit; font-weight:800; text-decoration:underline;
}

/* ---- best sellers ---- */
.etsySub{ margin:0 0 8px; font-size:.86rem; }
.etsyScroll{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.etsyTable{ width:100%; border-collapse:collapse; font-size:.76rem; }
.etsyTable th, .etsyTable td{ padding:8px 11px; text-align:left; border-bottom:1px solid var(--line); }
.etsyTable th{ color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.etsyTable td:nth-child(2), .etsyTable th:nth-child(2),
.etsyTable td:last-child, .etsyTable th:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.etsyTable tbody tr:last-child td{ border-bottom:0; }

.etsyFootnote{ margin:12px 0 0; font-size:.71rem; line-height:1.55; color:var(--muted); }

/* ---- dashboard panel ---- */
.etsyPanelHead{ display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; flex-wrap:wrap; }
.etsyPanelHead>div{ flex:1 1 240px; min-width:0; }
/* Etsy's own wordmark. The SVG is ~2:1 with its own viewBox, so setting only
   the height keeps it undistorted at any size, and its orange reads on both the
   light and dark themes without a per-theme override. */
.etsyPanelLogo{ display:block; height:21px; width:auto; margin:0 0 5px; }
.etsyPanelHead h2{ margin:2px 0 4px; font-size:1.02rem; }
.etsyPanelHead p{ margin:0; font-size:.76rem; line-height:1.5; color:var(--muted); }

/* Shipping and tax under the headline. Deliberately quieter than the revenue
   figure: they are there so the number can be reconciled against Etsy's own
   dashboard, not because they are what the seller is looking for. */
.etsyStatParts{
  display:block; margin:6px 0 0; padding:6px 0 0;
  border-top:1px solid var(--line);
  font-size:.68rem; line-height:1.5; color:var(--muted); opacity:.85;
}

/* ---- dock card: three periods at a glance ---- */
.etsyDockPeriods{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:1px; }
.etsyDockPeriods li{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 10px;
  padding:6px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
}
.etsyDockPeriods li:last-child{ border-bottom:0; }
.etsyDockPeriods span{ font-size:.72rem; color:var(--muted); }
.etsyDockPeriods b{ font-size:.92rem; font-weight:800; font-variant-numeric:tabular-nums; }
.etsyDockPeriods i{ grid-column:1 / -1; font-style:normal; font-size:.66rem; color:var(--muted); opacity:.75; }

/* ---- full report view ---- */
body.etsyReportOpen{ overflow:hidden; }
.etsyReport{
  position:fixed; inset:0; z-index:10000; overflow-y:auto;
  background:var(--bg);
  animation:etsyFade .2s ease;
}
@media (prefers-reduced-motion: reduce){ .etsyReport{ animation:none } }
.etsyReportShell{ max-width:1040px; margin:0 auto; padding:26px 22px 60px; }

/* Height only: the wordmark is ~2:1 and fixing both dimensions distorts it. */
.etsyReportLogo{ display:block; height:30px; width:auto; flex:0 0 auto; }

/* Hero figures. Deliberately only four: revenue, what is left, volume, and
   order size — the questions a seller actually opens a report to answer. */

.etsyBlock{ margin:0 0 26px; }
.etsyBlock h3{ margin:0 0 3px; font-size:1.02rem; }
.etsyBlockNote{ margin:0 0 11px; font-size:.74rem; color:var(--muted); }

.etsyReportActions{ display:flex; gap:9px; justify-content:flex-end; margin:22px 0 0; flex-wrap:wrap; }

@media (max-width:640px){
  .etsyReportShell{ padding:18px 14px 48px; }
  
}

/* ---- theming pass ----
   Everything below draws from the app's theme variables rather than Etsy's
   orange, so the report belongs to whichever theme is active instead of
   looking like a page from another product. */

/* A soft accent wash behind the header, fading out — gives the view a top
   edge without a hard band across it. */
.etsyReport::before{
  content:''; position:absolute; inset:0 0 auto; height:230px; pointer-events:none;
  background:
    radial-gradient(900px 240px at 12% -40px, color-mix(in srgb,var(--accent) 20%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%,transparent), transparent 78%);
}
.etsyReportShell{ position:relative; }

/* A gradient rule instead of a flat border: brightest under the title, fading
   across, so the eye starts where the content does. */
/* Sits UNDER the whole header rather than across it. Positioned from the
   header's own bottom edge, so it can never run through the close button the
   way an absolutely-placed full-width rule did. */

/* The first tile is the answer most people opened this for. */

.etsyScroll{ background:var(--panel); }

.etsyTable tbody tr{ transition:background .14s ease; }
.etsyTable tbody tr:hover{ background:color-mix(in srgb,var(--accent) 5%,transparent); }
.etsyClose{ transition:border-color .15s ease, color .15s ease, transform .15s ease; }
.etsyClose:hover{ transform:rotate(90deg); }

@media (prefers-reduced-motion: reduce){
  
  .etsyClose:hover{ transform:none; }
}

/* ---- "listed on Etsy" badge on the loaded project card ---- */
.etsyListed{
  float:right; display:inline-flex; align-items:center; gap:7px;
  margin:0 0 6px 12px; position:relative;
}
.etsyListedLogo{ height:19px; width:auto; display:block; flex:0 0 auto; }
/* Painted by CSS, so it takes the theme's accent on every theme.
   The shape comes from the supplied SVG used as a mask; the colour is a plain
   background. `color` on an <img> never reaches the SVG inside it -- that is
   what left this rendering in the file's own black, invisible on dark themes. */
.etsyListedCheck{
  width:17px; height:17px; display:block; flex:0 0 auto;
  background-color:var(--accent2, var(--accent));
  -webkit-mask:url(images/integrations/etsy-check.svg) center / contain no-repeat;
  mask:url(images/integrations/etsy-check.svg) center / contain no-repeat;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
}
/* Themed, and sized to match the status mark beside it.
   It was --muted text on --surface-input inside a --line border at 15px: three
   low-contrast choices stacked, which on a dark theme left barely anything to
   see. It now carries the accent the way the check does, so it reads as part of
   the badge rather than a faint speck next to it. */
.etsyListedHelp{
  appearance:none; cursor:help; flex:0 0 auto;
  width:17px; height:17px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent2, var(--accent));
  font:900 .64rem/1 var(--app-font,system-ui);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.etsyListedHelp:hover,
.etsyListedHelp:focus-visible{
  background:var(--accent-vivid, var(--accent));
  border-color:var(--accent);
  color:var(--accent-ink, #fff);
}
/* Keyboard focus needs its own ring: the hover styling alone is a colour change,
   which is not a focus indicator. */
.etsyListedHelp:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.etsyListedTip{
  position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  width:max-content; max-width:240px; padding:8px 11px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  font-size:.72rem; line-height:1.5; font-weight:500;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-3px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.etsyListedHelp:hover ~ .etsyListedTip,
.etsyListedHelp:focus-visible ~ .etsyListedTip{ opacity:1; visibility:visible; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .etsyListedTip{ transition:none } }

/* A dashed leader from the period to its figure, so the eye tracks across a
   two-column row without the value looking unattached. Drawn from the label's
   own pseudo-element rather than a spacer element, so the markup stays as it
   reads: label, value, count. */
.etsyDockPeriods span{ display:flex; align-items:baseline; gap:8px; }
.etsyDockPeriods span::after{
  content:''; flex:1 1 auto;
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  transform:translateY(-3px);
}
/* Clear of the button row, and vertically centred.
   .serviceDockTest sets min-height and relies on a <button> centring its own
   label; this one is an <a>, which does not — so the text sat at the top of the
   dashed box. Flex centres it in both axes. */
.serviceDockPop .etsyShopLink{
  margin-top:10px;
  display:flex; align-items:center; justify-content:center;
  padding:9px 10px; line-height:1.2;
}
@media (min-width:720px){
}
@media (max-width:560px){
}

/* ---- badge status marks ----
   The Etsy mark stays whatever the listing's state; only the status mark beside
   it changes. Colour carries the meaning, so it comes from the theme rather
   than a fixed palette. */
.etsyListedCross{
  flex:0 0 auto; width:17px; height:17px;
  display:inline-flex; align-items:center; justify-content:center;
  font:800 15px/1 var(--app-font,system-ui);
  color:var(--bad,#ef4444);
  border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--bad,#ef4444) 45%, transparent);
}
/* A product that is not currently buyable should read as present but quiet —
   the seller still wants to see it is theirs. */
.etsyListed.is-soldout .etsyListedLogo,
.etsyListed.is-ended .etsyListedLogo{ opacity:.62; filter:grayscale(.35); }
.etsyListed.is-unknown .etsyListedLogo{ opacity:.75; }

/* ---- margin table ----
   Two figures per row carry the meaning: what it cost and what was kept. Loss
   is coloured, not just negative — a minus sign in a dense table is easy to
   read past, and reading past a loss is the expensive mistake. */
.etsyMargin td:first-child span{
  display:block; margin-top:2px;
  font-size:.68rem; color:var(--muted); font-weight:400;
}
.etsyMargin td{ vertical-align:top; }
.etsyMargin td:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.etsyMargin th:not(:first-child){ text-align:right; }
.etsyTable .is-gain{ color:var(--good,#16a34a); font-weight:800; }
.etsyTable .is-loss{ color:var(--bad,#ef4444); font-weight:800; }
/* A product with no matching project is still listed — knowing it is uncosted
   is the point, so it must not be hidden. */
.etsyMargin tr.is-uncosted td{ color:var(--muted); }
.etsyMargin tr.is-uncosted td:last-child{ text-align:left; font-style:italic; }

/* ---- report header ----
   The rule under the header sat directly on top of the figure cards. It now
   belongs to the header (which owns its own bottom padding), so there is real
   space between the two rather than a line touching a card edge. */
.etsyReportHead{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:0 16px;
  padding:4px 0 22px; margin:0 0 26px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Two washes, both fading out well inside their own box so no edge is ever
   visible: one under the title, one under the flare so it sits on something
   rather than floating. Kept low -- this should read as depth, not as a
   coloured panel behind the numbers. */
.etsyReportHead::before{
  content:''; position:absolute; inset:-30px -40px auto -40px; height:180px; z-index:0;
  background:
    radial-gradient(46% 62% at 14% 46%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(40% 72% at 88% 48%, color-mix(in srgb, var(--accent2, var(--accent)) 10%, transparent), transparent 72%);
  pointer-events:none;
}
/* Line art: watermark, not illustration. Low enough to sit behind the title
   without competing, and hidden on narrow screens where it would only crowd. */

.etsyReportLogo{ position:relative; z-index:1; display:block; height:34px; width:auto; }
.etsyReportTitles{ position:relative; z-index:1; min-width:0;
  padding-left:16px; border-left:1px solid var(--line); }
.etsyReportHead h2{
  margin:0; font-size:1.6rem; letter-spacing:-.015em; line-height:1.15;
  background:linear-gradient(92deg, var(--text), color-mix(in srgb,var(--accent) 55%,var(--text)));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.etsyReportTitles p{ margin:3px 0 0; font-size:.8rem; color:var(--muted); }
.etsyReportLede{
  grid-column:1 / -1; position:relative; z-index:1;
  margin:14px 0 0; max-width:62ch;
  font-size:.86rem; line-height:1.55; color:var(--muted);
}
.etsyReportHead .etsyClose{ position:relative; z-index:1; align-self:start; }

  /* Full width, so there is no box edge to see.
   It was 54% wide and pinned right, which drew a visible vertical seam at each
   end of its own mask box and clipped the rightmost element off the page. It
   now spans the header and fades out at BOTH ends, and the artwork is inset
   from the right so nothing is cut. */
.etsyReportFlare{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:var(--accent2, var(--accent));
  opacity:.3;
  -webkit-mask-image:url(images/integrations/etsy-flare.svg),
    linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent);
  mask-image:url(images/integrations/etsy-flare.svg),
    linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent);
  /* `auto 74%` keeps the artwork's own proportions and holds it clear of the
     title; the 40px inset stops the last glyph touching the close button. */
  -webkit-mask-size:auto 74%, 100% 100%;
  mask-size:auto 74%, 100% 100%;
  -webkit-mask-position:right 40px center, center;
  mask-position:right 40px center, center;
  -webkit-mask-repeat:no-repeat, no-repeat;
  mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

@media (max-width:640px){
  /* Dropped on a phone: at that width it would sit under the title rather
     than beside it, and crowd the one thing the header exists to say. */
  .etsyReportFlare{ display:none; }
  .etsyReportHead h2{ font-size:1.28rem; }
  .etsyReportTitles{ padding-left:12px; }
}

/* ---- headline figures ----
   One panel divided into columns rather than three separate cards: these are
   three readings of the same period, and separate boxes made them look like
   unrelated numbers. */
.etsyHero{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:0 0 26px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 5%,var(--panel)), var(--panel) 62%);
}
.etsyHeroStat{ display:flex; align-items:center; gap:15px; padding:20px 22px; min-width:0; }
.etsyHeroStat + .etsyHeroStat{ border-left:1px solid var(--line); }
@media (max-width:760px){
  .etsyHeroStat + .etsyHeroStat{ border-left:0; border-top:1px solid var(--line); }
}
/* The icon carries the meaning of the figure, so it takes that figure's colour
   rather than one accent for all three. */
.etsyHeroIcon{
  flex:0 0 auto; display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  background:color-mix(in srgb, currentColor 12%, transparent);
}
.etsyHeroIcon svg{
  width:24px; height:24px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.etsyHeroStat.is-margin .etsyHeroIcon{ color:var(--accent2, var(--accent)); }
.etsyHeroStat.is-revenue .etsyHeroIcon{ color:var(--good,#16a34a); }
.etsyHeroStat.is-units .etsyHeroIcon{ color:var(--warn,#f59e0b); }

.etsyHeroText{ min-width:0; display:block; }
.etsyHeroLabel{
  display:block; font-size:.66rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.etsyHeroStat strong{
  display:block; margin:5px 0 3px;
  font-size:1.7rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.05;
}
.etsyHeroStat.is-margin strong{ color:var(--accent2, var(--accent)); }
.etsyHeroStat small{ display:block; font-size:.72rem; color:var(--muted); line-height:1.4; }

/* ---- orders total ----
   The one figure the list does not state. Given real presence so it registers
   before the rows do, but built from theme variables so it belongs to whatever
   theme is active rather than looking like a pasted-in badge. */
.etsyTotal{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:16px;
  margin:0 0 14px; padding:16px 18px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    radial-gradient(70% 140% at 12% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel) 66%);
  box-shadow:0 10px 26px -16px color-mix(in srgb, var(--accent) 70%, transparent);
  animation:etsyTotalIn .42s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes etsyTotalIn{
  from{ opacity:0; transform:translateY(-6px) scale(.985) }
  to{ opacity:1; transform:none }
}

/* A single sheen pass on open — one sweep, then gone. A looping shimmer under a
   number the user is trying to read becomes noise within seconds. */
.etsyTotalSheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%,
    color-mix(in srgb, var(--accent) 26%, transparent) 50%, transparent 66%);
  transform:translateX(-120%);
  animation:etsyTotalSweep 1.15s .22s ease-out 1 both;
}
@keyframes etsyTotalSweep{ to{ transform:translateX(120%) } }

.etsyTotalIcon{
  flex:0 0 auto; display:grid; place-items:center;
  width:48px; height:48px; border-radius:14px;
  color:var(--accent2, var(--accent));
  border:1px solid color-mix(in srgb, currentColor 36%, transparent);
  background:color-mix(in srgb, currentColor 14%, transparent);
}
.etsyTotalIcon svg{
  width:23px; height:23px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.etsyTotalText{ position:relative; z-index:1; min-width:0; }
.etsyTotalLabel{
  display:block; font-size:.64rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.etsyTotal strong{
  display:block; margin:4px 0 2px;
  font-size:1.62rem; font-weight:800; letter-spacing:-.02em;
  /* tabular figures so the count-up does not jitter the width as digits change */
  font-variant-numeric:tabular-nums;
  color:var(--accent2, var(--accent));
  line-height:1.05;
}
.etsyTotal small{ display:block; font-size:.73rem; color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  .etsyTotal{ animation:none; }
  .etsyTotalSheen{ display:none; }
}

/* ---- what the total is made of ----
   Sits directly under the headline figure, because the headline is misleading
   without it: two of its three parts are not the seller's money in the way
   "total" implies. */
.etsyTotalParts{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:-6px 0 0; padding:0 2px;
}
.etsyTotalParts li{
  display:flex; align-items:baseline; gap:7px;
  padding:6px 11px; border-radius:9px;
  border:1px solid var(--line);
  background:var(--surface-input,var(--panel));
  font-size:.73rem;
}
.etsyTotalParts span{ color:var(--muted); }
.etsyTotalParts b{ font-weight:800; font-variant-numeric:tabular-nums; }
/* Tax is money passing through, not money kept — it reads quieter than the
   parts that are actually the seller's. */
.etsyTotalParts li.is-aside{ opacity:.72; }
.etsyTotalParts li.is-aside b{ font-weight:600; }
.etsyTotalNote{
  margin:9px 2px 14px; font-size:.71rem; line-height:1.55; color:var(--muted);
}

/* ---- "Why?" fix button on an underpriced row ---- */
.etsyPricing td.etsyFixCell{ text-align:right; white-space:nowrap; width:1%; }
.etsyFix{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  font:800 .72rem var(--app-font,system-ui);
  color:var(--accent2, var(--accent));
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.etsyFix:hover{
  background:var(--accent-vivid, var(--accent)); color:var(--accent-ink,#fff);
  border-color:var(--accent); transform:translateY(-1px);
}
.etsyFix:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* A small four-point spark, so the button reads as "ask the assistant". */
.etsyFixSpark{
  width:12px; height:12px; flex:0 0 auto; background:currentColor;
  clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* The "Ask AI" column header sits over the Why buttons, right-aligned to them
   and tinted so it reads as the AI action rather than a data column. */
.etsyPricing th.etsyFixHead{ text-align:right; color:var(--accent2, var(--accent)); }

/* ---- real price tiers ----
   A title whose price changed sold at several REAL prices. The row shows the
   range and expands to those prices, each with its own margin — so no figure on
   screen is an average that no buyer was ever charged. */
.etsyTierToggle{
  display:inline-flex; align-items:center; gap:7px;
  padding:2px 8px 2px 9px; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:var(--text); font:inherit; font-variant-numeric:tabular-nums;
}
.etsyTierToggle:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, transparent); }
.etsyTierToggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.etsyTierToggle::after{
  content:''; width:0; height:0; margin-left:1px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.75; transition:transform .15s ease;
}
.etsyTierToggle.is-open::after{ transform:rotate(180deg); }
.etsyTierCount{
  font-size:.66rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent2, var(--accent)); white-space:nowrap;
}
.etsyTierRow[hidden]{ display:none; }
.etsyTierRow > td{ padding:0 0 10px !important; background:transparent; }
.etsyTierTable{
  width:100%; border-collapse:collapse;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.etsyTierTable th, .etsyTierTable td{
  padding:7px 10px; font-size:.78rem; text-align:left;
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-variant-numeric:tabular-nums;
}
.etsyTierTable th{ color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.etsyTierTable tr:last-child td{ border-bottom:0; }
/* A blended "margin each" is meaningless across several prices — say so. */
.etsyMargin td.is-mixed{ color:var(--muted); font-style:italic; }