/* Crop the homework photo (TUTOR_PHOTO_CROP=1): the sheet from static/board/photo-crop.js. Today's page + the /?ui=2 preview. */
html.pc-open, html.pc-open body { overflow: hidden; }
.pc-back { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(17, 24, 39, .72); font-family: var(--ui, "Inter", system-ui, sans-serif); color: #1f2937; }
.pc-sheet { display: flex; flex-direction: column; width: min(960px, 100%); height: min(860px, 100%); background: #fff;
  border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); overflow: hidden; }
.pc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 20px; border-bottom: 1px solid #e5e7eb; }
.pc-head h2 { flex: 1; min-width: 0; margin: 0; font: 700 18px/1.3 var(--ui, "Inter", system-ui, sans-serif); color: #111827; }
.pc-ic { width: 20px; height: 20px; flex: none; }

/* the photo: dark surround, the part outside the box dimmed */
.pc-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 26px; background: #111827; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
.pc-frame { position: relative; flex: none; cursor: crosshair; }
.pc-img { display: block; }
.pc-shade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pc-hole { position: absolute; box-shadow: 0 0 0 9999px rgba(17, 24, 39, .6); }
.pc-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, .45); cursor: move; touch-action: none; }
.pc-box:focus { outline: none; }
.pc-box:focus-visible { box-shadow: 0 0 0 3px #93c5fd; }
.pc-g { position: absolute; background: rgba(255, 255, 255, .55); opacity: 0; transition: opacity .15s; pointer-events: none; }
.pc-dragging .pc-g { opacity: 1; }
.pc-g1, .pc-g2 { top: 0; bottom: 0; width: 1px; } .pc-g1 { left: 33.33%; } .pc-g2 { left: 66.67%; }
.pc-g3, .pc-g4 { left: 0; right: 0; height: 1px; } .pc-g3 { top: 33.33%; } .pc-g4 { top: 66.67%; }

/* handles: 44 px touch targets centred on the corners / edge middles; the visible knob inside */
.pc-h { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: flex; align-items: center; justify-content: center; touch-action: none; z-index: 1; }
.pc-h b { display: block; background: #fff; border: 2px solid var(--brand, #2563eb); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.pc-nw, .pc-ne, .pc-se, .pc-sw { z-index: 2; }
.pc-nw b, .pc-ne b, .pc-se b, .pc-sw b { width: 18px; height: 18px; border-radius: 50%; }
.pc-n b, .pc-s b { width: 26px; height: 8px; border-radius: 6px; }
.pc-e b, .pc-w b { width: 8px; height: 26px; border-radius: 6px; }
.pc-nw { left: 0; top: 0; cursor: nwse-resize; } .pc-se { left: 100%; top: 100%; cursor: nwse-resize; }
.pc-ne { left: 100%; top: 0; cursor: nesw-resize; } .pc-sw { left: 0; top: 100%; cursor: nesw-resize; }
.pc-n { left: 50%; top: 0; cursor: ns-resize; } .pc-s { left: 50%; top: 100%; cursor: ns-resize; }
.pc-e { left: 100%; top: 50%; cursor: ew-resize; } .pc-w { left: 0; top: 50%; cursor: ew-resize; }

.pc-hint { margin: 0; padding: 10px 16px 0; text-align: center; font: 500 14px/1.4 var(--ui, "Inter", system-ui, sans-serif); color: #4b5563; }
.pc-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }

/* buttons (today's page: like its other buttons; the preview adds its own .u-btn / .u-primary) */
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid #d1d5db; background: #fff; color: #1f2937; font: 600 15px var(--ui, "Inter", system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.pc-btn:hover { border-color: var(--brand, #2563eb); }
.pc-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.pc-btn:disabled { opacity: .6; cursor: default; }
.pc-go { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; padding: 0 22px; }
.pc-go:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* phones: the whole screen, the photo as big as it can be */
@media (max-width: 719px) {
  .pc-back { padding: 0; }
  .pc-sheet { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  .pc-head { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px; }
  .pc-head h2 { font-size: 17px; }
  .pc-stage { padding: 24px; }
  .pc-bar .pc-btn { flex: 1 1 0; padding: 0 12px; }
  .pc-bar .pc-go { flex: 2 1 0; }
}
@media (max-width: 359px) { .pc-cancel .pc-ic { display: none; } }

/* the /?ui=2 preview: its radii, colours and type */
.ui2 .pc-back { font-family: var(--ui); }
.ui2 .pc-sheet { border-radius: var(--r2, 18px); box-shadow: var(--shadow2); }
.ui2 .pc-head h2 { font: 700 var(--t20, 20px) var(--ui); color: var(--ink); }
.ui2 .pc-hint { color: var(--muted); }
#u2 .pc-btn { min-height: 44px; gap: 8px; }
@media (max-width: 719px) { .ui2 .pc-sheet { border-radius: 0; box-shadow: none; } .ui2 .pc-head h2 { font-size: 17px; } }