/* Inherit the theme's locally hosted Jost; tokens stay inside plugin surfaces. */
:is(.yarni-community, .yarni-community-account) {
  --yc-ink: var(--Greyscale-Text-Title, #212121);
  --yc-muted: #525252;
  --yc-line: var(--Greyscale-Border-Default, #aeaeae);
  --yc-soft: var(--Greyscale-Surface-Subtle, #f3f3f3);
  --yc-pink: var(--Pink-100, #ed98aa);
  --yc-pink-soft: var(--Surface-Subtle, #fef4f6);
  --yc-danger: #89273e;
  --yc-space: var(--wp--custom--spacing-medium, 24px);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding-inline: 4px;
  color: var(--yc-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

:is(.yarni-community, .yarni-community-account) *,
:is(.yarni-community, .yarni-community-account) *::before,
:is(.yarni-community, .yarni-community-account) *::after {
  box-sizing: border-box;
  min-width: 0;
  letter-spacing: 0;
}

:is(.yarni-community, .yarni-community-account) :is(h2, h3, p, figure, ul) { margin: 0; }
:is(.yarni-community, .yarni-community-account) a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* The theme globally removes outlines with !important; restore scoped focus. */
:is(.yarni-community, .yarni-community-account) :focus-visible {
  outline: 3px solid var(--yc-ink) !important;
  outline-offset: 3px;
}

:is(.yarni-community, .yarni-community-account) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  height: auto;
  padding: 11px 20px;
  border: 1px solid var(--yc-ink);
  border-radius: 0;
  background: var(--yc-ink);
  color: #fff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
:is(.yarni-community, .yarni-community-account) button:disabled {
  border-color: var(--yc-line);
  background: var(--yc-soft);
  color: var(--yc-muted);
  cursor: wait;
}

/* Unframed account sections retain the existing accessible DOM/form order. */
.yarni-community-account {
  container: yc-account / inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px var(--yc-space);
  padding-block: 8px 24px;
}
.yarni-community-account > * { grid-column: 1 / -1; max-width: 100%; }
.yarni-community-account h2 { font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.yarni-community-account > ul { padding: 0; list-style: none; }
.yarni-community-account > ul:empty { display: none; }
.yarni-community-account > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--yc-line);
}
.yarni-community-account > ul > li > a { flex: 1 1 14rem; padding-block: 4px; font-weight: 500; }
.yarni-community-account .yc-project-state { flex: 0 1 auto; color: var(--yc-muted); font-size: .875rem; line-height: 1.5; }
.yarni-community-account > p > a,
.yarni-community > a { display: inline-block; min-height: 44px; padding-block: 10px; margin-inline-end: 16px; }
.yarni-community-account > form {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding-block: var(--yc-space);
  border: 0;
  border-top: 1px solid var(--yc-line);
  background: transparent;
}
.yarni-community-account .yc-details { min-width: 0; margin: 0; padding: 0; border: 0; }
.yarni-community-account .yc-details legend { width: 100%; padding: 0; margin: 0 0 24px; font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.yarni-community-account .yc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.yarni-community-account .yc-fields .yc-wide { grid-column: 1 / -1; }
.yarni-community-account .yc-fields .form-group { width: auto; margin: 0; padding: 0; }
.yarni-community-account .yc-fields label { min-height: 1.6em; display: flex; align-items: end; font-size: 16px; }
.yarni-community-account .yc-fields .yc-wide label { min-height: 0; }
.yarni-community-account .input-info { display: block; margin-top: 8px; color: var(--yc-muted); font-size: .875rem; line-height: 1.5; }
.yarni-community-account h3.account-edit-subtitle { margin-top: 16px; font-size: 1.25rem; font-weight: 600; }
.yarni-community-account .yc-archive { color: var(--yc-muted); font-size: .875rem; }
.yarni-community-account .yc-archive summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.yarni-community-account .yc-archive p { padding-block: 8px; }
.yarni-community-account label { display: block; color: var(--yc-ink); font-size: .875rem; font-weight: 500; line-height: 1.6; }
.yarni-community-account :is(input[type="text"], textarea, select, input[type="file"]) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  height: 48px;
  margin-block-start: 8px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--yc-ink);
  border-radius: 0;
  background-color: #fff;
  color: var(--yc-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.yarni-community-account select { appearance: auto; padding-inline-end: 24px; }
.yarni-community-account textarea.form-control { height: 128px; min-height: 128px; resize: vertical; }
.yarni-community-account input[type="checkbox"] {
  appearance: auto;
  display: inline-block;
  position: static;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 4px 8px 4px 0;
  vertical-align: middle;
  accent-color: var(--yc-ink);
  opacity: 1;
}
.yarni-community-account input[type="file"] { height: auto; padding: 12px; border: 1px dashed var(--yc-line); background: var(--yc-soft); }
.yarni-community-account input[type="file"]::file-selector-button {
  max-width: 100%;
  min-height: 44px;
  margin: 0 12px 4px 0;
  padding: 8px 12px;
  border: 1px solid var(--yc-ink);
  border-radius: 0;
  background: #fff;
  color: var(--yc-ink);
  font: inherit;
  white-space: normal;
  cursor: pointer;
}
.yarni-community-account figure { width: min(100%, 22rem); margin-block-start: 8px; }
.yarni-community-account figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--yc-soft);
}
.yarni-community-account figure + form { align-self: center; justify-items: start; padding-block: 0 16px; border: 0; }
.yarni-community-account figure + form button { background: transparent; color: var(--yc-danger); border-color: currentColor; }
.yarni-community-account [role="status"]:not(:empty) { padding: 12px 16px; border-inline-start: 3px solid var(--yc-pink); background: var(--yc-pink-soft); }
.yarni-community-account progress:not([hidden]) { display: block; width: 100%; height: 12px; accent-color: var(--yc-ink); }

@supports selector(form:has(input)) {
  .yarni-community-account form:has(> input[name="operation"][value="save"]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .yarni-community-account form:has(> input[name="operation"][value="save"]) > :is(p:has(textarea), p:has(select[name="order_line"]), button) { grid-column: 1 / -1; }
  .yarni-community-account label:has(input[type="checkbox"]) { min-height: 44px; padding-block: 8px; cursor: pointer; }
  .yarni-community-account form:has(> input[name="operation"][value="withdraw"]) button { background: transparent; color: var(--yc-danger); border-color: currentColor; }
}

/* Stable slots reveal complete project images, never cropped craft details. */
.yarni-community { container: yc-gallery / inline-size; margin-block: 24px; }
.yarni-community .yarni-community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px var(--yc-space);
  margin-block-end: var(--yc-space);
}
.yarni-community article { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-block-end: 16px; border-bottom: 1px solid var(--yc-line); }
.yarni-community article img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin-block-end: 8px; background: var(--yc-soft); }
.yarni-community h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.yarni-community article h3 + p { color: var(--yc-muted); font-size: .875rem; }
.yarni-community .yarni-community-vote { width: 9rem; min-width: 0; margin-block-start: auto; background: #fff; color: var(--yc-ink); font-variant-numeric: tabular-nums; }
.yarni-community .yarni-community-vote[aria-pressed="true"] { border-color: var(--yc-danger); background: var(--yc-pink-soft); color: var(--yc-danger); }
.yarni-community .yarni-community-vote:disabled { opacity: .65; }
.yarni-community .yc-score { min-width: 3ch; text-align: end; }
.yarni-community > p { color: var(--yc-muted); font-size: .9375rem; }
.yarni-community .yc-status { min-height: 1.6em; margin-block: 8px; }
.yarni-community .yc-photos { width: 100%; border-block: 1px solid var(--yc-line); }
.yarni-community .yc-photos summary { padding: 12px 4px; min-height: 48px; cursor: pointer; }
.yarni-community .yc-photos img { margin-top: 12px; }
.yarni-community .yc-product-link { display: block; width: 100%; min-height: 48px; padding-block: 12px; }
.yarni-community .yc-product-link span { display: block; color: var(--yc-muted); font-size: .875rem; }

@media (hover: hover) {
  :is(.yarni-community, .yarni-community-account) a:hover { text-decoration-thickness: 2px; }
  :is(.yarni-community, .yarni-community-account) button:not(:disabled):hover { border-color: var(--yc-ink); background: var(--yc-pink); color: var(--yc-ink); }
}
@media (max-width: 960px) {
  .yarni-community .yarni-community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .yarni-community .yarni-community-grid { grid-template-columns: minmax(0, 1fr); }
  .yarni-community-account > form > button { width: 100%; }
}
@container yc-gallery (max-width: 56rem) {
  .yarni-community .yarni-community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container yc-gallery (max-width: 40rem) {
  .yarni-community .yarni-community-grid { grid-template-columns: minmax(0, 1fr); }
}
@container yc-account (min-width: 34rem) {
  .yarni-community-account > figure { grid-column: 1; }
  .yarni-community-account > figure + form { grid-column: 2; }
}
@container yc-account (max-width: 40rem) {
  .yarni-community-account .yc-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .yarni-community-account .yc-fields label { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.yarni-community, .yarni-community-account) *,
  :is(.yarni-community, .yarni-community-account) *::file-selector-button { transition: none; }
}