/* Write on a photo: the sheet (rewrite.js, the first run's "Put this onto a real page") and the workspace
   (app-photo.js, #onphoto). Uses the app's tokens (app.css :root: --sheet, --acc, --fs-*). */

/* ------------------------------------------------------------------ Write on a photo of a page (rewrite.js)
   1. the page, 2. what it says (typed, or Ditto's), then the page written */
.modal.op-modal {
  width: min(860px, 100%);
  padding: 30px 30px 24px;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 60%),
    var(--surface);
}
.op {
  margin-top: 20px;
}
/* (writing, and the page written: the dialog's own title and line give it the room) */
.modal.op-on > h3,
.modal.op-on > .m-sub {
  display: none;
}
.modal.op-on .op {
  margin-top: 0;
}
.op-form,
.op-done {
  display: grid;
  gap: 24px;
}
.op-form[hidden],
.op-done[hidden],
.op-panel[hidden],
.op-note[hidden],
.op-own[hidden],
.op-drop[hidden],
.op-pages[hidden] {
  display: none;
}
.op-step {
  display: grid;
  gap: 12px;
}
.op-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.op-h h4 {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.op-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.op-where {
  margin-left: auto;
}

/* the photo: a dashed sheet to drop it on, with a little ruled page drawn in it */
.op-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 20px 24px;
  border: 2px dashed var(--line-2);
  border-radius: 20px;
  text-align: center;
  background: var(--sheet-2);
  cursor: pointer;
  transition: border-color var(--t-1), background var(--t-1);
}
.op-drop:hover,
.op-drop.over {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 6%, var(--sheet-2));
}
.op-drop b {
  font-size: var(--fs-l);
  font-weight: 650;
}
.op-drop-sub {
  max-width: 44ch;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.op-drop-art {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  width: 58px;
  height: 74px;
  margin-bottom: 8px;
  padding: 16px 9px 0 13px;
  border-radius: 6px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 10px 22px -12px rgba(40, 30, 70, 0.5);
  transform: rotate(-4deg);
}
.op-drop-art::before {
  /* the margin rule */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 1px;
  background: color-mix(in srgb, #d9534f 55%, transparent);
}
.op-drop-art i {
  display: block;
  height: 1px;
  background: color-mix(in srgb, #4a78c8 45%, transparent);
}
.op-drop-art i:nth-child(-n + 2) {
  /* two lines already written */
  height: 2px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--acc);
  opacity: 0.8;
}
.op-drop-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.op-drop-btns .btn {
  --h: 42px;
}
.op-pages {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  border-radius: 14px;
}
.op-pages.over {
  background: var(--acc-wash);
}
.op-page {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
}
.op-page canvas {
  display: block;
  width: auto;
  height: 168px;
  border-radius: 10px;
  background: var(--sheet-2);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 10px 22px -14px rgba(30, 20, 60, 0.55);
}
.op-page figcaption {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
}
.op-page-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.op-page-x:hover {
  color: var(--bad);
}
.op-page-x svg {
  width: 14px;
  height: 14px;
}
.op-add {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 120px;
  height: 168px;
  border: 2px dashed var(--line-2);
  border-radius: 10px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.op-add:hover {
  border-color: var(--acc);
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.op-add .ico {
  width: 20px;
  height: 20px;
}
.op-own {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  font-size: var(--fs-m);
  color: var(--ink-2);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.op-own .ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--acc-ink);
}

.op-over {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
}
.op-over[hidden] {
  display: none;
}
.op-over .ws-check {
  flex: none;
  margin-top: 2px;
}
.op-over b {
  display: block;
  font-size: var(--fs-s);
  font-weight: 650;
}
.op-over small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-2);
}

/* what it says: the two ways as cards (the style sheet's .ws-card), then the one chosen */
.op-how {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.op-panel {
  display: grid;
  gap: 12px;
}
.op-words,
.op-ask {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--ink);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  resize: vertical;
  transition: box-shadow var(--t-1);
}
.op-words {
  min-height: 170px;
}
.op-ask {
  min-height: 80px;
  font-size: var(--fs-l);
  line-height: 1.45;
}
.op-words:focus,
.op-ask:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--acc), 0 0 0 4px var(--acc-wash);
}
.op-need::placeholder {
  color: var(--bad);
}
.op-hint,
.op-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.op-hint .ico,
.op-note .ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--acc-ink);
}
.op-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.op-row-t {
  min-width: 56px;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink-2);
}
.op-chips {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
}
.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
  transition: box-shadow var(--t-1), color var(--t-1), background var(--t-1);
}
.op-chip .ico {
  width: 15px;
  height: 15px;
}
.op-chip:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.op-chip[aria-pressed="true"] {
  color: var(--acc-ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 2px var(--acc);
}
.ws-seg button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 1px 3px rgba(40, 30, 70, 0.16), 0 0 0 1px var(--sheet-edge);
}

/* the hand, and Write */
.op-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.op-foot .btn {
  --h: 46px;
}
.op-hand-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
}
.op-hand {
  max-width: 230px;
}
.op-go {
  padding: 0 24px 0 20px;
}
.op-status {
  margin: -8px 0 0;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.op-status:empty {
  display: none;
}
.op-status[data-tone="error"] {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 9%, transparent);
}
.op-status .link-btn {
  font-size: inherit;
}

/* writing: the photo under a slow band of light, and a chip saying what's happening */
.op-writing {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.op-writing canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(60vh, 620px);
  opacity: 0.72;
  filter: saturate(0.8);
}
.op-writing::after {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 20%, transparent) 60%, transparent);
  animation: op-sweep 2.6s var(--ease) infinite;
  pointer-events: none;
}
.op-writing--plain {
  min-height: 220px;
}
@keyframes op-sweep {
  to {
    transform: translateY(350%);
  }
}
.op-wr-chip {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 28px);
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 650;
  white-space: nowrap;
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 14px 30px -12px rgba(20, 10, 50, 0.45);
  transform: translateX(-50%);
}
.op-wr-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-writing--plain .op-wr-chip {
  bottom: auto;
}
.op-wr-pen {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.op-wr-pen svg {
  width: 15px;
  height: 15px;
  animation: op-pen 0.9s ease-in-out infinite;
}
@keyframes op-pen {
  0%,
  100% {
    transform: translate(-2px, 1px) rotate(4deg);
  }
  50% {
    transform: translate(2px, -1px) rotate(-8deg);
  }
}

/* the page written */
.op-done-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.op-done-head b {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.15;
}
.op-done-hand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.op-done-hand .ico {
  width: 14px;
  height: 14px;
}
.op-done-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.op-done-act .btn {
  --h: 44px;
}
.op-rest {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.op-rest .ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--acc-ink);
}
.op-rest .link-btn {
  font-size: inherit;
  font-weight: 650;
}
.op-done .rewrite-page figcaption {
  justify-content: flex-start;
}

.op-done .rw-single {
  cursor: zoom-in;
}
.op-done .rw-single.op-movable {
  touch-action: none;
}
.op-done .rw-single.over-writing {
  cursor: grab;
}
.op-done .rw-single.dragging {
  cursor: grabbing;
}
.op-drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.op-drag-hint .ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--acc-ink);
}
.op-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 24px 16px;
  background: rgba(12, 10, 24, 0.86);
  cursor: zoom-out;
}
.op-zoom img {
  display: block;
  max-width: none;
  width: min(1400px, 100%);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.op-zoom-x {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
.op-zoom-x svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .op-writing::after,
  .op-wr-pen svg {
    animation: none;
  }
}
:root[data-motion="reduced"] .op-writing::after,
:root[data-motion="reduced"] .op-wr-pen svg {
  animation: none;
}

@media (max-width: 640px) {
  .modal.op-modal {
    padding: 24px 18px 0;
  }
  .op-how .ws-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .op-how .ws-txt small {
    font-size: 12.5px;
  }
  .op-where {
    margin-left: 0;
    width: 100%;
  }
  .op-where button {
    flex: 1;
  }
  .op-row-t {
    width: 100%;
  }
  .op-chip {
    height: 36px;
    padding: 0 12px 0 10px;
  }
  .op-page canvas {
    height: 148px;
  }
  .op-add {
    width: 104px;
    height: 148px;
  }
  /* (Write stays in reach at the foot while the sheet scrolls) */
  .op-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -18px;
    padding: 20px 18px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 16px);
  }
  .op-hand-l {
    width: 100%;
  }
  .op-hand {
    flex: 1;
    max-width: none;
  }
  .op-foot .grow {
    display: none;
  }
  .op-foot .btn {
    flex: 1;
  }
  .op-done {
    padding-bottom: 18px;
  }
  .op-done-act .btn {
    flex: 1 1 auto;
  }
  .op-done-act .grow {
    display: none;
  }
}

/* ------------------------------------------------------------------ Write on a photo: the workspace (app-photo.js) */
.ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: calc(100dvh - 76px);
  padding: 0 clamp(12px, 2vw, 28px) 16px;
}
.ph-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 22px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 12px 32px -20px rgba(30, 20, 60, 0.4);
}
.ph-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
}
.ph-back:hover {
  background: var(--acc-wash);
}
.ph-back-arr {
  width: 18px;
  height: 18px;
  transform: scaleX(-1);
}
.ph-titles {
  min-width: 0;
}
.ph-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(26px * var(--ts, 1));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ph-sub {
  margin: 2px 0 0;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.ph-mode {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ph-mode button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.ph-mode button .ico {
  width: 16px;
  height: 16px;
}
.ph-mode button[aria-checked="true"] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 1px 3px rgba(40, 30, 70, 0.16), 0 0 0 1px var(--sheet-edge);
}
.ph-mode button[aria-checked="true"] .ico {
  color: var(--acc-ink);
}
.ph-dl {
  display: flex;
  gap: 8px;
}
.ph-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px);
  gap: 14px;
  min-height: 0;
}

/* the canvas: a soft dotted desk, the page on it, zoomed and panned */
.ph-view {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    color-mix(in srgb, var(--sheet-2) 92%, var(--ink));
  box-shadow: inset 0 0 0 1px var(--sheet-edge), 0 12px 32px -20px rgba(30, 20, 60, 0.4);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.ph-view.over {
  box-shadow: inset 0 0 0 3px var(--acc);
}
.ph-view.drag-pan {
  cursor: grabbing;
}
.ph-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  --inv: 1;
}
.ph-cv {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(4px * var(--inv));
  box-shadow: 0 calc(18px * var(--inv)) calc(50px * var(--inv)) calc(-18px * var(--inv)) rgba(20, 14, 40, 0.5);
}
.ph-ghost {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}
.ph-ghost[hidden] {
  display: none;
}
.ph-box {
  position: absolute;
  border-radius: calc(4px * var(--inv));
  box-shadow: 0 0 0 calc(1.5px * var(--inv)) var(--acc);
  cursor: move;
}
.ph-box[hidden] {
  display: none;
}
.ph-h {
  position: absolute;
  width: calc(16px * var(--inv));
  height: calc(16px * var(--inv));
  margin: calc(-8px * var(--inv));
  border: calc(2.5px * var(--inv)) solid var(--acc);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(2px * var(--inv)) calc(6px * var(--inv)) rgba(0, 0, 0, 0.25);
}
.ph-h-nw { left: calc(-6px * var(--inv)); top: calc(-6px * var(--inv)); cursor: nwse-resize; }
.ph-h-ne { right: calc(-6px * var(--inv)); top: calc(-6px * var(--inv)); cursor: nesw-resize; }
.ph-h-sw { left: calc(-6px * var(--inv)); bottom: calc(-6px * var(--inv)); cursor: nesw-resize; }
.ph-h-se { right: calc(-6px * var(--inv)); bottom: calc(-6px * var(--inv)); cursor: nwse-resize; }
.ph-h-w,
.ph-h-e {
  top: 50%;
  width: calc(10px * var(--inv));
  height: calc(28px * var(--inv));
  margin: calc(-14px * var(--inv)) calc(-5px * var(--inv));
  border-radius: calc(6px * var(--inv));
  cursor: ew-resize;
}
.ph-h-w { left: calc(-6px * var(--inv)); }
.ph-h-e { right: calc(-6px * var(--inv)); }
.ph-box-tag {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: none;
  align-items: center;
  gap: calc(6px * var(--inv));
  margin-bottom: calc(12px * var(--inv));
  padding: calc(5px * var(--inv)) calc(12px * var(--inv)) calc(5px * var(--inv)) calc(9px * var(--inv));
  border-radius: 999px;
  font-size: calc(13px * var(--inv));
  font-weight: 650;
  white-space: nowrap;
  color: var(--acc-ink);
  background: var(--sheet);
  box-shadow: 0 0 0 calc(1px * var(--inv)) var(--acc-line);
}
.ph-box-tag .ico {
  width: calc(13px * var(--inv));
  height: calc(13px * var(--inv));
  animation: op-pen 0.9s ease-in-out infinite;
}
.ph-box.busy .ph-box-tag {
  display: inline-flex;
}
.ph-box.busy {
  animation: ph-busy 1.2s ease-in-out infinite;
}
@keyframes ph-busy {
  50% {
    background: color-mix(in srgb, var(--acc) 12%, transparent);
  }
}
.ph-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  cursor: default;
}
.ph-empty[hidden] {
  display: none;
}
.ph-empty h2 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: calc(30px * var(--ts, 1));
  font-weight: 500;
}
.ph-empty p {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-2);
}
.ph-empty-art {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  width: 92px;
  height: 118px;
  padding: 24px 14px 0 20px;
  border-radius: 8px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 18px 34px -16px rgba(40, 30, 70, 0.5);
  transform: rotate(-5deg);
}
.ph-empty-art::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 1.5px;
  background: color-mix(in srgb, #d9534f 55%, transparent);
}
.ph-empty-art i {
  display: block;
  height: 1.5px;
  background: color-mix(in srgb, #4a78c8 45%, transparent);
}
.ph-empty-art i:nth-child(-n + 2) {
  height: 3px;
  margin-right: 14px;
  border-radius: 2px;
  background: var(--acc);
}
.ph-empty-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.ph-tools {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bar, var(--sheet));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 10px 26px -14px rgba(20, 14, 40, 0.5);
  transform: translateX(-50%);
  cursor: default;
}
.ph-tools[hidden],
.ph-hint[hidden],
.ph-strip[hidden] {
  display: none;
}
.ph-z,
.ph-z-pct,
.ph-peek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.ph-z:hover,
.ph-z-pct:hover,
.ph-peek:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ph-z svg,
.ph-peek .ico {
  width: 16px;
  height: 16px;
}
.ph-z-pct {
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}
.ph-sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--sheet-edge);
}
.ph-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bar, var(--sheet));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px var(--sheet-edge);
  transform: translateX(-50%);
  pointer-events: none;
}
.ph-hint .ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--acc-ink);
}
.ph-strip {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bar, var(--sheet));
  box-shadow: 0 0 0 1px var(--sheet-edge);
}
.ph-strip button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.ph-strip button.on {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge);
}

/* the panel: the page, the words, how it looks; Write at its foot */
.ph-panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 24px;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 0;
  border-radius: 22px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 12px 32px -20px rgba(30, 20, 60, 0.4);
}
.ph-sec {
  display: grid;
  gap: 12px;
}
.ph-sec .op-h h2 {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.ph-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ph-thumb-w {
  position: relative;
}
.ph-thumb {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.ph-thumb canvas {
  display: block;
  width: auto;
  height: 84px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--sheet-edge);
}
.ph-thumb.on canvas {
  box-shadow: 0 0 0 2.5px var(--acc);
}
.ph-thumb-x {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.ph-thumb-x svg {
  width: 12px;
  height: 12px;
}
.ph-add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 66px;
  height: 84px;
  padding: 0 10px;
  border: 2px dashed var(--line-2);
  border-radius: 10px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.ph-add:hover {
  border-color: var(--acc);
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.ph-add .ico {
  width: 18px;
  height: 18px;
}
.ph-how {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ph-how button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.ph-how button .ico {
  width: 16px;
  height: 16px;
}
.ph-how button[aria-selected="true"] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 1px 3px rgba(40, 30, 70, 0.16), 0 0 0 1px var(--sheet-edge);
}
.ph-how button[aria-selected="true"] .ico {
  color: var(--acc-ink);
}
.ph-words {
  min-height: 150px;
}
.ph-field {
  display: grid;
  gap: 8px;
}
.ph-field > span {
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink-2);
}
.ph-hand {
  width: 100%;
  height: 44px;
}
.ph-inks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ph-ink {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
  transition: transform var(--t-1), box-shadow var(--t-1);
}
.ph-ink:hover {
  transform: scale(1.08);
}
.ph-ink[aria-checked="true"] {
  box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--acc);
}
.ph-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ph-size {
  flex: 1;
  accent-color: var(--acc);
}
.ph-size-v {
  min-width: 82px;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.ph-foot {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  margin: 0 -20px;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sheet) 0%, transparent), var(--sheet) 22px);
}
.ph-go {
  --h: 50px;
  justify-content: center;
  width: 100%;
  font-size: var(--fs-m);
}
.ph-status {
  margin: 0;
}

/* the pens: a little nib drawn for each, the chosen one in their colour */
.ph-pens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ph-pen {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink-2);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
  white-space: nowrap;
}
.ph-pen:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.ph-pen[aria-checked="true"] {
  color: var(--acc-ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 2px var(--acc);
}
.ph-pen span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-pen-ic {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.ph-pen-ic::before {
  /* the line it draws */
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: var(--lw, 2px);
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%) rotate(-28deg);
}
.ph-pen-ballpoint { --lw: 2px; }
.ph-pen-gel { --lw: 2.6px; }
.ph-pen-fineliner { --lw: 1.4px; }
.ph-pen-marker { --lw: 5px; }
.ph-pen-pencil::before {
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px);
  opacity: 0.7;
}
.ph-pen-fountain::before {
  height: 4px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.ph-ink-fixed {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.ph-ink-fixed .ph-ink {
  display: inline-block;
  cursor: default;
}
.ph-end {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.ph-shape-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ph-shape .ico {
  width: 15px;
  height: 15px;
}
.ph-shape-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--acc-ink);
}
.ph-shape-note[hidden] {
  display: none;
}
.ph-shape-note .ico {
  width: 14px;
  height: 14px;
}

/* the page's corners: a quad over the photo, a pin at each corner to drag */
.ph-quad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ph-quad-poly {
  fill: color-mix(in srgb, var(--acc) 10%, transparent);
  stroke: var(--acc);
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}
.ph-pin {
  fill: #fff;
  stroke: var(--acc);
  cursor: grab;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.ph-view.drag-pin,
.ph-view.drag-pin .ph-pin {
  cursor: grabbing;
}
.ph-shapebar {
  position: absolute;
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 650;
  background: var(--bar, var(--sheet));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px var(--acc-line), 0 10px 26px -14px rgba(20, 14, 40, 0.5);
  transform: translateX(-50%);
  cursor: default;
}
.ph-shapebar[hidden] {
  display: none;
}
.ph-shapebar > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .ph {
    height: auto;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  .ph-sub {
    display: none;
  }
  .ph-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ph-view {
    height: 62vh;
    min-height: 340px;
  }
  .ph-panel {
    overflow: visible;
  }
  .ph-foot {
    position: static;
  }
}
@media (max-width: 640px) {
  .ph-top {
    padding: 8px 10px 8px 8px;
  }
  .ph-title {
    font-size: 21px;
  }
  .ph-mode {
    order: 5;
    width: 100%;
  }
  .ph-mode button {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 0 10px;
  }
  .ph-titles {
    flex: 1;
  }
  .ph-dl {
    order: 6;
    width: 100%;
  }
  .ph-dl .btn {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }
  .ph-hint {
    display: none;
  }
}


/* ---- the boxes: each piece of writing an object on the page; a frame only on the one selected */
.ph-blocks {
  position: absolute;
  inset: 0;
}
.ph-blk {
  position: absolute;
  border-radius: calc(8px * var(--inv));
  outline: none;
  cursor: pointer;
  transition: box-shadow var(--t-1);
}
.ph-view:not(.dragging) .ph-blk:not(.sel):hover {
  box-shadow: 0 0 0 calc(1.5px * var(--inv)) var(--acc-line);
}
.ph-blk:focus-visible {
  box-shadow: 0 0 0 calc(2px * var(--inv)) var(--ink), 0 0 0 calc(6px * var(--inv)) color-mix(in srgb, var(--acc) 45%, transparent);
}
.ph-blk.sel {
  cursor: move;
}
.ph-blk.busy {
  animation: ph-busy 1.2s ease-in-out infinite;
}
.ph-blk.empty {
  display: grid;
  place-items: center;
  border-radius: calc(10px * var(--inv));
  outline: calc(2px * var(--inv)) dashed var(--acc-line);
  background: color-mix(in srgb, var(--acc) 7%, transparent);
}
.ph-blk-empty {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--inv));
  padding: calc(6px * var(--inv)) calc(14px * var(--inv));
  border-radius: 999px;
  font-size: calc(14px * var(--inv));
  font-weight: 650;
  white-space: nowrap;
  color: var(--acc-ink);
  background: var(--sheet);
  box-shadow: 0 0 0 calc(1px * var(--inv)) var(--acc-line);
  pointer-events: none;
}
.ph-blk-empty .ico {
  width: calc(14px * var(--inv));
  height: calc(14px * var(--inv));
}
/* (the frame passes clicks through to the writing under it; only its handles take them) */
.ph-box {
  pointer-events: none;
}
.ph-h {
  pointer-events: auto;
}
.ph-view.peeking :is(.ph-blocks, .ph-box, .ph-mini) {
  visibility: hidden;
}

/* the selected box's own toolbar, just above it, the same size at any zoom */
.ph-mini {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 12px 28px -12px rgba(20, 14, 40, 0.45);
  transform: scale(var(--inv)) translateY(calc(-100% - 12px));
  transform-origin: 0 0;
  white-space: nowrap;
}
.ph-mini[hidden] {
  display: none;
}
.ph-mini button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.ph-mini button:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ph-mini button svg {
  width: 17px;
  height: 17px;
}
.ph-mini .ph-mini-del:hover {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}
.ph-mini-sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--sheet-edge);
}

/* undo and redo, beside the mode */
.ph-history {
  display: inline-flex;
  gap: 4px;
}
.ph-ico-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
}
.ph-ico-btn:hover:not(:disabled) {
  background: var(--acc-wash);
}
.ph-ico-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ph-ico-btn svg {
  width: 18px;
  height: 18px;
}
.ph-redo svg {
  transform: scaleX(-1);
}

/* which writing the panel edits: the main writing, each text box, and one more */
.ph-editing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ph-ed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink-2);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
}
.ph-ed:hover:not(:disabled) {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.ph-ed[aria-pressed="true"] {
  color: var(--acc-ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 2px var(--acc);
}
.ph-ed-add {
  border: 1.5px dashed var(--line-2);
  background: transparent;
  box-shadow: none;
}
.ph-ed-add:disabled {
  opacity: 0.5;
  cursor: default;
}
.ph-ed .ico {
  width: 14px;
  height: 14px;
}
.ph-addtext .ico {
  color: var(--acc-ink);
}
@media (max-width: 640px) {
  .ph-history {
    order: 3;
  }
  .ph-ico-btn {
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-blk.busy {
    animation: none;
  }
}
:root[data-motion="reduced"] .ph-blk.busy {
  animation: none;
}

/* writing: a pill over the page while anything on it is being written */
.ph-busy {
  position: absolute;
  left: 50%;
  bottom: 74px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 12px 28px -12px rgba(20, 14, 40, 0.45);
  transform: translateX(-50%);
  pointer-events: none;
}
.ph-busy[hidden] {
  display: none;
}
.ph-busy-pen {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.ph-busy-pen svg {
  width: 14px;
  height: 14px;
  animation: op-pen 0.9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ph-busy-pen svg {
    animation: none;
  }
}
:root[data-motion="reduced"] .ph-busy-pen svg {
  animation: none;
}
.ph-peek {
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* (the view's toolbar on a phone: icons, their names kept for screen readers) */
  .ph-tools .ph-peek > span {
    display: none;
  }
  .ph-tools .ph-peek {
    width: 40px;
    padding: 0;
  }
}

/* Fine controls and notebook tools share the writing workspace's visual language. */
.writing-controls { display:grid; gap:12px; margin-top:20px; }
.writing-save { display:flex; gap:8px; align-items:center; }
.writing-save input { min-width:0; flex:1; }
.writing-save .btn { flex-shrink:0; }
.writing-group { border:1px solid var(--line, #ddd9d2); border-radius:14px; padding:0 14px; background:var(--surface,#fff); }
.writing-group summary { padding:15px 0; cursor:pointer; font-weight:650; }
.writing-control { display:grid; gap:8px; margin:4px 0 18px; font-size:14px; }
.writing-control > span { display:flex; justify-content:space-between; gap:10px; }
.writing-control output { color:var(--acc,#a87827); font-variant-numeric:tabular-nums; }
.writing-control input { width:100%; accent-color:var(--acc,#a87827); }
.ph-custom-ink { display:flex; align-items:center; justify-content:space-between; font-size:14px; margin-top:12px; }
.ph-custom-ink input,.ph-draw-tools input[type=color] { width:36px;height:34px;padding:3px;border:1px solid var(--line,#ddd9d2);border-radius:9px;background:var(--surface,#fff);cursor:pointer; }
.ph-draw-tools { position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:15;display:flex;gap:5px;align-items:center;padding:7px;border:1px solid var(--line,#ddd9d2);border-radius:16px;background:var(--surface,#fff);box-shadow:0 4px 20px #25263a18;max-width:calc(100% - 24px); }
.ph-draw-tools[hidden] { display:none; }
.ph-draw-tools button { border:0;background:transparent;color:inherit;border-radius:10px;padding:9px 11px;cursor:pointer;font:inherit;font-size:13px; }
.ph-draw-tools button[aria-pressed=true] { background:var(--acc,#a87827);color:white; }
.ph-draw-tools input[type=range] { width:70px;accent-color:var(--acc,#a87827); }
.ph[data-tool=pen] .ph-view,.ph[data-tool=highlight] .ph-view { cursor:crosshair; }
.ph[data-tool=erase] .ph-view { cursor:cell; }
.notebook-export { display:grid;gap:15px; }
.notebook-export-field { display:grid;gap:7px;font-size:14px;font-weight:550; }
.notebook-export-field select,.notebook-export-field input { width:100%;min-width:0;box-sizing:border-box; }
.notebook-export-note { font-size:13px;line-height:1.6;color:var(--text-2,#666);margin:0; }
.notebook-export-actions { display:flex;gap:8px;flex-wrap:wrap; }
.notebook-export [role=status] { font-size:13px;line-height:1.5; }
.st-saved-looks { display:grid;gap:10px;margin:12px 0; }
@media(max-width:640px) {
  .ph-draw-tools { gap:1px;top:10px;padding:5px; }
  .ph-draw-tools button { padding:8px 7px;font-size:12px; }
  .ph-draw-tools input[type=range] { width:45px; }
  .ph-dl { flex-wrap:wrap; }
  .writing-save { flex-wrap:wrap; }
}

/* Keep drawing controls and exports reachable on narrow screens. */
.ph-draw-tools { flex-wrap:wrap;justify-content:center;width:max-content; }
.ph-draw-tools select { max-width:125px;min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:inherit; }
.ph-dl { flex-wrap:wrap; }

/* The page is the task. Styling stays available without filling the sidebar. */
.ph-appearance { border-top: 1px solid var(--line); margin-top: 12px; }
.ph-appearance > summary { padding: 16px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); }
.ph-paper-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-save-state { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; }