/* The project interface (owner, round 5): the card, its sections and the picture and video viewer in one design,
   matched to the East houses: warm paper panels, ink text, a lacquer-red accent and a gold hairline, instead of the
   old violet-black. The viewer is a large sheet: a heading with the project's name and a close button that never
   sits on the picture, the picture as large as the sheet allows on a dark stage, arrows at its sides and every
   item as a thumbnail below. Loaded last, so it wins over the older layers by its own (id) selectors. */
#garden-app {
  --paper: #f7f1e5;
  --paper-light: #fcf9f2;
  --paper-deep: #ece2cd;
  --paper-edge: #d9c7a3;
  --ink: #241d17;
  --ink-soft: #5f5246;
  --lacquer: #b4372a;
  --lacquer-deep: #942a1f;
  --gold: #c09445;
  --stage: #1c1815;
}

/* ---------- The card ---------- */
#garden-app #project-card {
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border: 1px solid var(--paper-edge);
  box-shadow:
    inset 0 1px #fff,
    inset 0 -2px var(--paper-deep),
    0 18px 44px #1a0f0640;
}
#garden-app #project-card::before {
  /* The gold hairline under the top edge. */
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
  pointer-events: none;
}
#garden-app #project-card :is(h2, #project-name) {
  color: var(--ink);
  font-family: 'Noto Serif', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  font-weight: 650;
  letter-spacing: 0.005em;
}
#garden-app #project-card .eyebrow,
#garden-app #project-card #project-count {
  color: var(--lacquer);
  font-weight: 700;
}
#garden-app #project-card .project-status {
  color: var(--ink-soft);
}
#garden-app #project-card > p,
#garden-app #project-card #project-description {
  color: var(--ink-soft);
}
#garden-app #project-card #project-link {
  background: var(--lacquer);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 16px #94291f40;
}
#garden-app #project-card #project-link:hover {
  background: var(--lacquer-deep);
}
#garden-app #project-card :is(#project-switch, .project-switch) {
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
}
#garden-app #project-card .island-sections {
  border-bottom-color: var(--paper-edge);
}
#garden-app #project-card .island-sections button {
  color: var(--ink-soft);
}
#garden-app #project-card .island-sections button:hover {
  color: var(--ink);
  background: #e9dcc366;
}
#garden-app #project-card .island-sections button[aria-pressed='true'] {
  color: var(--ink);
  background: var(--paper-deep);
  box-shadow: inset 0 -3px var(--lacquer);
}
#garden-app #project-card #detail-close {
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--paper-light);
  box-shadow: 0 4px 12px #1a0f0640;
}
#garden-app #project-card .zone-content,
#garden-app #project-card #zone-description,
#garden-app #project-card .zone-content p {
  color: var(--ink);
}
#garden-app #project-card #comments-list :is(p, small, span, b, time) {
  color: var(--ink);
}
#garden-app #project-card #comments-list > * {
  background: var(--paper-light);
  border-color: var(--paper-edge);
}
#garden-app #project-card #comment-body {
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--paper-edge);
}
#garden-app #project-card #comment-body::placeholder {
  color: var(--ink-soft);
}
#garden-app #project-card :is(.comment-hint, .comment-status, #comments-link, .text-button) {
  color: var(--ink-soft);
}
#garden-app #project-card #comment-send {
  background: var(--lacquer);
  color: #fff;
  border: 0;
}
#garden-app #project-card #comment-send:disabled {
  background: var(--paper-deep);
  color: var(--ink-soft);
}

/* Dates: two labelled chips with their own icons, not a line of small print. */
#garden-app #project-card .project-footer {
  border-top: 1px solid var(--paper-edge);
  margin-top: 12px;
  padding-top: 12px;
}
#garden-app #project-card .project-footer > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#garden-app #project-card .project-footer .date-row:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}
#garden-app #project-card .project-footer .date-row b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  margin: 0;
}
#garden-app #project-card .project-footer .date-row::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--date-icon) center / contain no-repeat;
  mask: var(--date-icon) center / contain no-repeat;
  --date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4m8-4v4'/%3E%3C/svg%3E");
}
#garden-app #project-card .project-footer #project-updated-row::before {
  --date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E");
}
#garden-app #project-card .project-footer .repository {
  color: var(--ink);
}

/* ---------- The viewer ---------- */
#garden-app #media-viewer:not([hidden]) {
  position: fixed;
  z-index: 40;
  top: 96px;
  bottom: 136px;
  left: 490px;
  right: 28px;
  width: auto;
  height: auto;
  min-height: 0;
  max-width: none;
  max-height: none;
  transform: none;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'title close'
    'stage stage'
    'controls controls';
  gap: 0 12px;
  padding: 0 18px 14px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper-light), var(--paper));
  border: 1px solid var(--paper-edge);
  border-radius: 20px;
  box-shadow:
    inset 0 1px #fff,
    0 24px 60px #1a0f0659;
  overflow: hidden;
}
#garden-app #media-viewer .media-title {
  grid-area: title;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Noto Serif', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 650;
  color: var(--ink);
}
/* The close button sits in the heading, on paper: never on the picture, plain on any photo. */
#garden-app #media-viewer #media-close {
  grid-area: close;
  /* Relative: the close icon is an absolute ::before (garden-ui-panels.css) and must stay inside the button. */
  position: relative;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--paper-light);
  box-shadow: 0 4px 14px #1a0f0659;
  opacity: 1;
  visibility: visible;
}
#garden-app #media-viewer #media-close:hover {
  background: var(--lacquer);
}
#garden-app #media-viewer #media-close svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
#garden-app #media-viewer :is(#gallery-expand, #gallery-video) {
  grid-area: stage;
}
#garden-app #media-viewer #gallery-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: var(--stage);
  box-shadow: inset 0 0 0 1px #00000040;
  overflow: hidden;
  cursor: zoom-in;
}
#garden-app #media-viewer #gallery-expand[hidden],
#garden-app #media-viewer #gallery-video[hidden] {
  display: none;
}
#garden-app #media-viewer #gallery-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px #00000066;
}
#garden-app #media-viewer #gallery-video {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--stage);
}
#garden-app #media-viewer #gallery-controls:not([hidden]) {
  grid-area: controls;
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--ink);
}
#garden-app #media-viewer .gallery-navigation {
  position: static;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
#garden-app #media-viewer #gallery-counter {
  flex: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Arrows at the sides of the stage, on light discs: readable on a dark screenshot and on a bright photo alike. */
#garden-app #media-viewer :is(#gallery-previous, #gallery-next) {
  position: absolute;
  top: calc(56px + (100% - 56px - 92px) / 2);
  z-index: 2;
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--ink);
  background: #fcf9f2ee;
  border: 1px solid var(--paper-edge);
  box-shadow: 0 6px 18px #00000059;
  transform: translateY(-50%);
}
#garden-app #media-viewer #gallery-previous {
  left: 30px;
}
#garden-app #media-viewer #gallery-next {
  right: 30px;
}
#garden-app #media-viewer :is(#gallery-previous, #gallery-next):disabled {
  opacity: 0.35;
}
#garden-app #media-viewer :is(#gallery-previous, #gallery-next) svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
#garden-app #media-viewer .gallery-dots {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px 2px;
}
#garden-app #media-viewer .gallery-dots button {
  flex: 0 0 72px;
  width: 72px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--stage);
  border: 2px solid transparent;
  opacity: 0.75;
}
#garden-app #media-viewer .gallery-dots button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#garden-app #media-viewer .gallery-dots button[aria-current='true'] {
  border-color: var(--lacquer);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--paper-light);
}
#garden-app #media-viewer .gallery-dots button[data-kind='video']::after {
  /* A play mark on video thumbnails. */
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fffe
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23241d17'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
#garden-app #media-viewer .gallery-dots button {
  position: relative;
}
#garden-app #media-viewer #gallery-original {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--lacquer);
  font-weight: 650;
}

/* Phones: the viewer takes the whole screen; the card waits underneath. */
@media (max-width: 740px) {
  #garden-app #media-viewer:not([hidden]) {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border: 0;
    padding: env(safe-area-inset-top, 0) 12px calc(12px + env(safe-area-inset-bottom, 0));
    grid-template-rows: 60px minmax(0, 1fr) auto;
  }
  #garden-app #media-viewer #gallery-expand {
    padding: 6px;
    border-radius: 12px;
  }
  #garden-app #media-viewer :is(#gallery-previous, #gallery-next) {
    top: calc(60px + (100% - 60px - 150px) / 2);
    width: 46px;
    min-width: 46px;
    height: 46px;
  }
  #garden-app #media-viewer #gallery-previous {
    left: 20px;
  }
  #garden-app #media-viewer #gallery-next {
    right: 20px;
  }
  #garden-app #media-viewer #gallery-controls:not([hidden]) {
    flex-wrap: wrap;
  }
  #garden-app #media-viewer #gallery-original {
    flex: 1 0 100%;
    justify-content: center;
  }
}

/* The older glass layer styles these buttons with !important (garden-ui-panels.css); the project design wins it
   back here, by a stronger selector. The close icon is that layer's mask in the current colour. */
#garden-app #media-viewer #media-close,
#garden-app #project-card #detail-close {
  background: var(--ink) !important;
  color: #fff !important;
  border: 2px solid var(--paper-light) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px #1a0f0659;
}
#garden-app #media-viewer #media-close:hover,
#garden-app #project-card #detail-close:hover {
  background: var(--lacquer) !important;
}
#garden-app #media-viewer :is(#gallery-previous, #gallery-next) {
  background: #fcf9f2ee !important;
  color: var(--ink) !important;
  border: 1px solid var(--paper-edge) !important;
  border-radius: 50% !important;
}
#garden-app #media-viewer #gallery-original {
  background: var(--lacquer) !important;
  color: #fff !important;
  border: 0 !important;
}
@media (max-width: 740px) {
  /* The card above already shows the name and its × on a phone. */
  #garden-app #media-viewer .media-title {
    visibility: hidden;
  }
}
#garden-app #project-card #project-link {
  background: var(--lacquer) !important;
  color: #fff !important;
  border: 0 !important;
}
#garden-app #project-card #project-link :is(svg, span, i) {
  color: #fff;
}
#garden-app #project-card #project-link::after {
  background:
    var(--arrow-white) center / 17px no-repeat,
    var(--lacquer-deep);
  box-shadow: inset 0 1px 0 #ffffff59;
}
#garden-app #project-card #comment-send svg {
  stroke: currentColor;
}

/* A long project name (garden.mjs: over 18 characters) takes its own line above the Open button instead of
   running under it, and wraps in balanced lines only when even that line is too short, so no single letter is
   ever left alone on a line (owner, round 9). */
#garden-app #project-card .exhibit-heading:has(.long-name) {
  flex-wrap: wrap;
  row-gap: 6px;
}
/* The icon (36 px on a computer, 30 on a phone) and its gap (12 / 8 px) stay on the name's line: with 42 px
   left for them the desktop name took the whole row and pushed the icon onto a line of its own (round 17). */
#garden-app #project-card .exhibit-heading h2.long-name {
  flex: 1 1 calc(100% - 52px);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
#garden-app #project-card .exhibit-heading:has(.long-name) #project-link {
  position: relative;
  inset: auto;
  margin-left: auto;
}
/* Sideways swipes across the card belong to the page (bindProjectCardSwipe: next / previous project); upright
   ones still scroll its text. */
#garden-app #project-card {
  touch-action: pan-y;
}

/* ---------- Neon ---------- */
/* The Neon light style (Settings → light, app[data-light-style]) dresses the same card and viewer at night: deep
   violet glass, light text and soft cyan and magenta accents in place of paper, ink, lacquer and gold. Natural
   keeps the paper look above. No switch of its own: it follows the chosen light (owner, round 9). */
#garden-app[data-light-style='neon'] {
  --paper: #1b1530;
  --paper-light: #241b3d;
  --paper-deep: #2e2450;
  --paper-edge: #6d55b8;
  --ink: #f2ecff;
  --ink-soft: #bfb1de;
  --lacquer: #7b4dff;
  --lacquer-deep: #9a5cff;
  --gold: #4fd8ff;
  --stage: #0d0a17;
}
#garden-app[data-light-style='neon'] #project-card,
#garden-app[data-light-style='neon'] #media-viewer {
  box-shadow:
    inset 0 1px #ffffff1f,
    0 0 0 1px #8a6bff33,
    0 0 26px #8a5cff30,
    0 18px 44px #06031480;
}
#garden-app[data-light-style='neon'] #project-card .island-sections button:hover {
  background: #3a2d66;
}
/* The close and arrow buttons are ink on paper in Natural (forced with !important against the older glass layer);
   here light ink would vanish on them, so they turn to violet glass with a soft glow. */
#garden-app[data-light-style='neon'] #media-viewer #media-close,
#garden-app[data-light-style='neon'] #project-card #detail-close {
  background: var(--paper-deep) !important;
  color: var(--ink) !important;
  border-color: var(--paper-edge) !important;
}
#garden-app[data-light-style='neon'] #media-viewer :is(#gallery-previous, #gallery-next) {
  background: #2a2148ee !important;
  color: var(--ink) !important;
  border-color: var(--paper-edge) !important;
  box-shadow:
    0 0 14px #8a5cff40,
    0 6px 18px #00000059;
}