/* Styles for the place page app. Extracted from place.html so the
   server-rendered place page in api/postpage.js can use the same file —
   one copy, not two that drift apart. */
.placecover { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 12px; }
  .intro { font-size: 14.5px; line-height: 1.65; margin: 10px 0 0; }
  .intro-zh { color: var(--faded); margin-top: 4px; margin-bottom: 12px; }
  .intro + .placecover, .intro-zh + .placecover { margin-top: 12px; }
  .editform textarea { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); resize: vertical; }
  .loadmore { text-align: center; margin-top: 18px; }
  .ownerlink { display: block; margin: 16px auto 0; background: none; border: none; font-family: inherit; font-size: 11px; color: var(--faded); opacity: .55; cursor: pointer; letter-spacing: .06em; }
  .ownerlink:hover { opacity: 1; }
  .ownerrow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
  .editform { padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
  .editform input { font-size: 14px; padding: 8px 10px; }
  .editform .crow { flex-wrap: wrap; }
  .statusbanner { font-size: 13.5px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
  .composer { padding: 12px; margin: 12px 0 8px; }
  /* Honeypot: off-screen, skipped by tab and by screen readers. Only a bot
     that fills every field it finds will put anything in it. */
  .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
  .composer textarea { border: none; padding: 0; resize: vertical; line-height: 1.5; background: transparent; }
  .composer .titlein { border: none; padding: 0 0 6px; font-size: 16px; font-weight: 700; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 8px; }
  .composer .bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; }
  .composer .note { font-size: 11.5px; color: var(--faded); line-height: 1.5; }
  .mediabtn { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; font-size: 13px; color: var(--faded); margin-top: 8px; }
  .thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .thumb { position: relative; width: 74px; height: 74px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #000; }
  .thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }
  .thumb button { position: absolute; top: 2px; right: 2px; border: none; background: rgba(0,0,0,.6); color: #fff; border-radius: 999px; width: 20px; height: 20px; font-size: 12px; line-height: 1; }
  .post { border-left-width: 4px; border-left-style: solid; padding: 14px 14px 10px; margin-top: 12px; }
  .post .head { display: flex; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
  .post .head strong { font-size: 14px; }
  .post .head span { font-size: 12px; color: var(--faded); white-space: nowrap; }
  .post h3 { font-size: 17px; margin: 0 0 6px; }
  .post h3 a { color: var(--ink); text-decoration: none; }
  .post h3 .title-zh { font-size: 15px; color: var(--faded); font-weight: 700; margin-top: 1px; }
  .body { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
  .body a { color: var(--blue); word-break: break-all; }
  .body-zh { margin-top: 6px; }
  .origlabel { font-size: 11px; letter-spacing: .08em; color: var(--faded); text-transform: uppercase; margin-bottom: 2px; }
  .media { margin-top: 8px; }
  .inline-media { display: block; max-width: 100%; border-radius: 6px; border: 1px solid var(--line); margin: 8px 0 4px; }
  video.inline-media { width: 100%; background: #000; }
  .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .media-grid img, .media-grid video { width: 100%; height: 170px; object-fit: cover; }
  .media img, .media video { display: block; max-width: 100%; border-radius: 6px; border: 1px solid var(--line); }
  .media img, .inline-media, .thumb img { image-orientation: from-image; }
  .media video { width: 100%; background: #000; }
  .linkcard { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 10px; text-decoration: none; color: var(--ink); background: var(--paper); }
  .linkcard img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
  .lc-body { padding: 10px 12px; }
  .lc-title { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
  .lc-domain { font-size: 12px; color: var(--faded); margin-top: 3px; }
  .actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
  .reactbtn { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--ink); }
  .reactbtn.mine { border-color: var(--blue); background: var(--blue); color: #fff; }
  .sharebtn { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--faded); }
  .ctoggle { border: none; background: none; color: var(--faded); font-size: 13px; padding: 10px 0 4px; }
  .comments { border-top: 1px solid var(--line); padding-top: 8px; }
  .cname { font-size: 13px; padding: 7px 9px; margin-top: 8px; }
  .cerr { color: var(--red); font-size: 12px; margin-top: 5px; }
  .comment { padding: 6px 0; font-size: 13.5px; }
  .comment .meta { color: var(--faded); font-size: 11px; margin-left: 6px; }
  .comment .txt { line-height: 1.5; margin-top: 2px; }
  .crow input { flex: 1; font-size: 14px; padding: 8px 10px; }
  .delbtn { border: 1px solid var(--line); background: none; color: var(--faded); font-size: 11px; border-radius: 4px; padding: 1px 7px; margin-left: 8px; }
  .delbtn.armed { border-color: var(--red); background: var(--red); color: #fff; }
  .exportpanel { padding: 12px; margin-bottom: 10px; }
  .exportpanel textarea { font-size: 12px; line-height: 1.5; }
  .uploading { font-size: 12px; color: var(--faded); margin-top: 6px; }