/* Cesaret Duvarı additions on top of /duvar/site.css (linked first): the display-mode choice, the live
   preview, the photo controls and the sentence counter. */
/* The two choices sit side by side and stack when there is no room for both (very large text): a
   long word such as "harflerim" then never pushes a choice past the card's edge. */
.mode{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.mode label{flex:1 1 8em;min-width:0;min-height:48px;display:flex;align-items:center;gap:8px;overflow-wrap:break-word;
  border:1px solid var(--field);border-radius:var(--r);padding:12px;cursor:pointer;font-size:14px;color:var(--ink)}
.mode input{margin:0;width:18px;height:18px;flex:none;accent-color:var(--navy)}
.mode label:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--soft)}
/* The preview is the public card itself (wall-card.css); this only places it in the form. */
.preview{background:none;padding:0;margin:6px 0 14px}
.preview .pv-lbl{font-family:var(--h);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.preview .wall-card{max-width:none}
/* A button that reads as a link, still a 44 px touch target. Navy: red is never text. */
.link{background:none;border:0;padding:0;color:var(--navy);font:inherit;font-size:14px;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;min-height:44px}
.counter{font-size:12px;color:var(--muted);text-align:right;margin:4px 0 0;font-variant-numeric:tabular-nums}