/* The app on a phone (Board 2's phone boards, under 760 px): its own top bar, the components
   drawer, the edit sheet, the menu sheet, the screen switcher, the flowchart focus view,
   full-screen play, the New project page, and the other tools as pages. Values are the phone
   boards'; the big-screen widgets (buttons, fields, tiles, cards) come from base.css and keep
   their look. */

.phone-app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

/* Top bar (Part · Phone top bar) ----------------------------------------------------------- */

.ph-top {
  position: relative;
  z-index: 30;
  flex: none;
  height: calc(56px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: env(safe-area-inset-top, 0px) calc(10px + env(safe-area-inset-right, 0px)) 0 calc(10px + env(safe-area-inset-left, 0px));
  color: var(--ink);
  background: var(--topbar);
  border-bottom: var(--bw) solid var(--line);
}
.ph-brand { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 2px 2px 0 #271813; }
:root[data-skin="clean"] .ph-brand { color: #ffffff; background: #9a3412; border: 0; border-radius: 11px; box-shadow: none; }
.ph-title {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 0 4px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
}
.ph-title-text { max-width: 100%; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; font-weight: var(--hw); letter-spacing: var(--hs); text-transform: var(--ht); line-height: 1.15; }
:root[data-skin="clean"] .ph-title-text { font-size: 18px; }
.ph-title-text > span, .ph-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-sub { max-width: 100%; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.ph-menu-btn, .ph-menu-btn.on-icon { width: 44px; height: 44px; }

/* Sheets: the drawer, the edit sheet, the switcher, the prototype menu ---------------------- */

.ph-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  border-top: var(--bw) solid var(--line);
  border-radius: 0;
  box-shadow: 0 -6px 0 rgba(39, 24, 19, 0.15);
}
:root[data-skin="clean"] .ph-sheet { border-radius: 20px 20px 0 0; box-shadow: 0 -12px 32px -14px rgba(28, 34, 48, 0.4); }
.ph-sheet > .handle { margin-top: 8px; }
.ph-drawer, .ph-edit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; }
.ph-drawer { transition: height 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ph-edit, .ph-pick, .ph-pmenu { animation: ph-sheet-up 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.ph-pick, .ph-pmenu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: 560px; max-height: calc(100dvh - 72px); margin: 0 auto; }
@keyframes ph-sheet-up { from { transform: translateY(100%); } }

.ph-scrim { position: fixed; left: 0; right: 0; top: calc(56px + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 40; background: rgba(39, 24, 19, 0.45); animation: fade-in 160ms ease both; }
:root[data-skin="clean"] .ph-scrim { background: rgba(28, 34, 48, 0.4); }
.ph-in-play .ph-scrim { top: 0; }

/* Builder (Phone · Builder, Add a component, Edit a component) ----------------------------- */

.ph-work { min-height: 0; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px); background-size: 20px 20px; }
.ph-stage { position: absolute; left: 0; right: 0; top: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ph-stage::-webkit-scrollbar { display: none; }
.ph-stage > .stage { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ph-dev { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ph-dev .wf-part { cursor: pointer; }
.ph-zoom { position: absolute; right: 12px; top: 13px; z-index: 5; padding: 2px 6px; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--muted); background: var(--surface); border: var(--bwc) solid var(--line); border-radius: var(--rs); }
.ph-work .layer-bar { left: 12px; top: 8px; max-width: calc(100% - 84px); }
.ph-work .layer-label { display: none; }
.ph-work .layer-btn { max-width: 104px; }
.ph-work .layer-bar > .layer-btn:first-of-type { border-left: 0; }

/* "Lands here · after Filter chips" beside the screen while dropping */
.ph-land { position: absolute; z-index: 7; width: 92px; display: flex; flex-direction: column; padding: 6px 8px; pointer-events: none; color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 3px 3px 0 #271813; animation: fade-in 160ms ease both; }
:root[data-skin="clean"] .ph-land { color: #ffffff; background: #9a3412; border: 0; border-radius: 10px; box-shadow: 0 10px 20px -10px rgba(154, 52, 18, 0.7); }
.ph-land b { font-size: 10.5px; font-weight: 700; letter-spacing: var(--ls); text-transform: var(--lt); }
.ph-land span { font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }

/* The components drawer */
.ph-drawer-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.ph-to-screens { height: 36px; }
.ph-drawer-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.ph-drawer-tip { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ph-drawer-btn { width: 36px; height: 36px; }
.ph-peek { flex: none; display: flex; gap: 8px; padding: 2px 12px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding: 0 12px; }
.ph-peek::-webkit-scrollbar { display: none; }
.ph-peek .tile { width: 70px; height: 70px; flex: none; gap: 4px; padding: 0; font-size: 11px; }
.ph-peek .moves { display: none; }
.ph-drawer-find { flex: none; padding: 4px 12px 0; }
.ph-drawer-find .field-search { height: 40px; }
.ph-drawer-find .field-search input { font-size: 14px; }
.ph-chips { flex: none; display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
.ph-chips::-webkit-scrollbar { display: none; }
.ph-chip {
  height: 34px;
  flex: none;
  padding: 0 12px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls);
  text-transform: var(--lt);
  white-space: nowrap;
  color: var(--ink);
  background: var(--surface);
  border: var(--bwc) solid var(--line);
  border-radius: 0;
}
.ph-chip.is-on { color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 2px 2px 0 #271813; }
:root[data-skin="clean"] .ph-chip { font-size: 13px; font-weight: 600; border-color: var(--control); border-radius: 999px; }
:root[data-skin="clean"] .ph-chip.is-on { color: #ffffff; background: #9a3412; border: 1px solid #9a3412; box-shadow: none; }
.ph-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.ph-none { grid-column: 1 / -1; margin: 0; }

/* Tiles on a touch screen: no hover lift; a tap presses them (Board 2's "just tapped") */
.phone-app .tile:hover { transform: none; box-shadow: var(--shadow-c); }
.phone-app .tile:active { color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 1px 1px 0 #271813; transform: translate(1px, 1px) scale(0.97); }
:root[data-skin="clean"] .phone-app .tile:active {
  --ic-ink: #ffffff;
  --ic-track: #ffffff;
  --ic-strong: #ffffff;
  --ic-strong-line: #ffffff;
  --ic-on-strong: #9a3412;
  color: #ffffff;
  background: #9a3412;
  border: 1px solid #9a3412;
  box-shadow: none;
  transform: scale(0.97);
}
.phone-app .tile.is-taken:active { color: var(--muted); background: var(--surface2); transform: none; }

/* The edit sheet: the settings card's parts at touch size */
.ph-edit .set-head { flex: none; gap: 10px; padding: 8px 14px 12px 16px; background: transparent; border-radius: 0; }
.ph-edit .set-icon { width: 38px; height: 38px; }
.ph-edit .set-name .card-title { font-size: 15px; }
:root[data-skin="clean"] .ph-edit .set-name .card-title { font-size: 18px; }
.ph-edit .set-head .btn-primary { height: 40px; padding: 0 16px; }
.ph-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.set-body.is-touch { gap: 12px; padding: 14px 16px 18px; }
.set-body.is-touch .set-row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.set-body.is-touch .label { font-size: 14px; }
.set-body.is-touch .range-row { gap: 12px; }
.set-body.is-touch .range-row input { height: 28px; }
.set-body.is-touch .range-row b { font-size: 15px; }
.set-body.is-touch .seg-sm .seg { height: 36px; font-size: var(--seg-size); }
.set-body.is-touch .set-more > summary { min-height: 32px; }
.set-body.is-touch .ix { gap: 8px; padding: 10px; }
.set-body.is-touch .ix-top, .set-body.is-touch .ix-pair { gap: 8px; }
.set-body.is-touch .btn-add { min-height: 44px; }
.ph-edit .set-foot { flex: none; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ph-edit .set-foot .icon-sm { width: 40px; height: 40px; }
.ph-edit .set-foot .btn-danger { height: 40px; }

/* Menu (Phone · Menu) ---------------------------------------------------------------------- */

.ph-menu {
  position: fixed;
  right: calc(8px + env(safe-area-inset-right, 0px));
  width: min(480px, calc(100% - 16px));
  top: calc(56px + 8px + env(safe-area-inset-top, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: pop-open 160ms ease-out both;
}
.ph-mgroup { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ph-go { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-go-btn {
  min-width: 0;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: var(--bwc) solid var(--line);
  border-radius: 0;
}
.ph-go-btn.is-on { color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 3px 3px 0 #271813; }
:root[data-skin="clean"] .ph-go-btn { border-radius: 12px; box-shadow: var(--shadow-c); }
:root[data-skin="clean"] .ph-go-btn.is-on { color: #ffffff; background: #9a3412; border: 1px solid #9a3412; }
.ph-mpair { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ph-mpair > button { height: 44px; min-width: 0; }
.ph-qas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ph-qa {
  min-width: 0;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface2);
  border: var(--bwc) solid var(--line);
  border-radius: 0;
}
.ph-qa.is-on { color: #271813; background: #ff5f1f; border: 2px solid #271813; }
:root[data-skin="clean"] .ph-qa { border-color: transparent; border-radius: 10px; }
:root[data-skin="clean"] .ph-qa.is-on { color: #9a3412; background: rgba(154, 52, 18, 0.12); border: 1px solid transparent; }
.ph-mrows { flex: none; display: flex; flex-direction: column; }
.ph-mrow {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  font-family: var(--ui);
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(39, 24, 19, 0.2);
  border-radius: 0;
}
:root[data-skin="clean"] .ph-mrow { border-bottom: 1px solid #e6dccb; }
.ph-mrow.is-last { border-bottom: 0; }
div.ph-mrow { cursor: default; }
.ph-mrow .col { align-items: flex-start; min-width: 0; }
.ph-mrow-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.ph-mrow-label { font-size: 15px; font-weight: 600; }
.ph-mtrio { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-mtrio > button { min-width: 0; height: 42px; padding: 0 6px; }
.ph-mlook { flex: none; display: flex; align-items: center; gap: 12px; }
.ph-mlook .seg-wrap { flex: 1 1 auto; }

/* Screen switcher (the title's chevron) ------------------------------------------------------ */

.ph-pick-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px 16px; border-bottom: var(--bw) solid var(--line); }
.ph-pick-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; overflow-y: auto; overscroll-behavior: contain; }
.ph-pick-row { width: 100%; flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 8px; text-align: left; color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 0; }
.ph-pick-row.is-on { background: #ffe9e3; border-color: #271813; box-shadow: 2px 2px 0 #271813; }
:root[data-skin="clean"] .ph-pick-row { border: 1px solid transparent; border-radius: 12px; }
:root[data-skin="clean"] .ph-pick-row.is-on { background: rgba(154, 52, 18, 0.07); border-color: rgba(154, 52, 18, 0.35); box-shadow: none; }
.ph-pick-row .col { gap: 2px; }
.ph-pick-row .card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-pick-row.is-planned .btn-sm { height: 34px; }
.ph-pick-thumb { flex: none; display: flex; }
.ph-pick-thumb .thumb { border: var(--bwc) solid var(--line); border-radius: 6px; }
.ph-pick-name { min-width: 0; display: flex; align-items: center; gap: 6px; }
.ph-pick-plan { width: 30px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 2px dashed #271813; border-radius: 6px; }
:root[data-skin="clean"] .ph-pick-plan { border: 1.5px dashed #b9ab92; }
.ph-pick-sep { margin: 8px 8px 2px; }
.ph-pick-foot { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: var(--bw) solid var(--line); }
.ph-pick-foot .btn-primary { width: 100%; height: 44px; }

/* Flowchart, one screen at a time (Phone · Flowchart) --------------------------------------- */

.ph-flow {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
  background-attachment: local;
  touch-action: pan-y;
}
.ph-fl-top { height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 14px 6px; }
.ph-fl-opens { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ph-fl-opens .ph-fl-dot { width: 8px; height: 8px; flex: none; background: var(--accent); border-radius: 50%; }
.ph-fl-back { height: 30px; min-width: 0; max-width: 60%; margin-left: auto; }
.ph-fl-back > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ph-fl-focus { position: relative; }
.ph-fl-focus.is-planned { height: 110px; }

.ph-fl-card {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(3px - var(--bw));
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ph-fl-head { height: 38px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; background: var(--head); border-bottom: 2px solid #271813; }
:root[data-skin="clean"] .ph-fl-head { border-bottom: 1px solid #e6dccb; }
.ph-fl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-fl-head .tag-accent { flex: none; }
.ph-fl-open.icon-sm { width: 26px; height: 26px; }
.ph-fl-picture { flex: none; display: flex; flex-direction: column; }
.ph-fl-picture.is-open { height: 96px; }
.ph-fl-toggle { height: 26px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-family: var(--ui); font-size: 11.5px; font-weight: 600; text-align: left; color: var(--muted); background: transparent; border: 0; }
.ph-fl-thumb { position: relative; display: block; flex: none; height: 66px; margin: 0 10px; overflow: hidden; background: #fbf8f1; border: var(--bwc) solid var(--line); border-radius: var(--rs); pointer-events: none; }
.ph-fl-thumb-zoom { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ph-fl-label { height: 20px; flex: none; display: flex; align-items: center; margin-top: 6px; padding: 0 10px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:root[data-skin="clean"] .ph-fl-label { font-family: var(--ui); font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.ph-fl-label.is-goes { border-top: 1px dashed #271813; }
:root[data-skin="clean"] .ph-fl-label.is-goes { border-top-color: #d3c6ad; }
.ph-fl-row { width: 100%; height: 26px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; font-family: var(--ui); font-size: 13px; text-align: left; white-space: nowrap; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.ph-fl-row .i { color: var(--ink); }
.ph-fl-row .i .fill-accent { fill: currentColor; }
.ph-fl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ph-fl-row.is-hot { font-weight: 700; background: #ffe9e3; }
:root[data-skin="clean"] .ph-fl-row.is-hot { background: rgba(154, 52, 18, 0.08); }
.ph-fl-row.is-muted, .ph-fl-row.is-muted .i { color: var(--muted); }
.ph-fl-tag.tag { flex: none; padding: 0 5px; font-size: 9.5px; }
.ph-fl-pill { height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1; border-radius: 0; }
.ph-fl-pill.is-one { min-width: 18px; padding: 0 4px; color: #271813; background: #ff5f1f; border: 2px solid #271813; }
.ph-fl-pill.is-many { padding: 0 5px; font-size: 9.5px; color: #ffffff; background: #271813; border: 2px solid #271813; }
:root[data-skin="clean"] .ph-fl-pill { border-radius: 999px; }
:root[data-skin="clean"] .ph-fl-pill.is-one { padding: 0 5px; color: #1c2230; background: #f1e9d8; border: 0; }
:root[data-skin="clean"] .ph-fl-pill.is-many { padding: 0 6px; background: #9a3412; border: 0; }

.ph-fl-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ph-fl-line { fill: none; stroke: #271813; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.ph-fl-line.is-hot { stroke: #ff5f1f; stroke-width: 3px; }
:root[data-skin="clean"] .ph-fl-line { stroke: #474e5f; stroke-width: 1.75px; }
:root[data-skin="clean"] .ph-fl-line.is-hot { stroke: #9a3412; stroke-width: 2.25px; }
.ph-fl-dot.is-row { position: absolute; z-index: 2; width: 10px; height: 10px; pointer-events: none; background: #ff5f1f; border: 2px solid #271813; border-radius: 50%; }
:root[data-skin="clean"] .ph-fl-dot.is-row { background: #9a3412; border-color: #fffdf8; box-shadow: 0 0 0 1px #9a3412; }
.ph-fl-chip {
  position: absolute;
  z-index: 2;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: var(--bwc) solid #271813;
  border-radius: 0;
  box-shadow: var(--shadow-c);
}
.ph-fl-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-fl-chip.is-hot { color: #271813; background: #ff5f1f; border: 2px solid #271813; box-shadow: 2px 2px 0 #271813; }
.ph-fl-chip.is-planned { font-weight: 600; color: var(--muted); background: transparent; border: 2px dashed #271813; box-shadow: none; }
:root[data-skin="clean"] .ph-fl-chip { border-color: #d3c6ad; border-radius: 9px; }
:root[data-skin="clean"] .ph-fl-chip.is-hot { color: #ffffff; background: #9a3412; border: 1px solid #9a3412; }
:root[data-skin="clean"] .ph-fl-chip.is-planned { border: 1.5px dashed #b9ab92; }
.ph-fl-chip:active { transform: translate(1px, 1px); box-shadow: none; }
:root[data-skin="clean"] .ph-fl-chip:active { transform: scale(0.97); }
.ph-fl-plan.fc-planned { top: 0; height: 96px; cursor: default; }
.ph-fl-hint { margin: 10px 14px 0; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* "Whole flow" */
.ph-mini {
  width: calc(100% - 28px);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 12px 14px;
  font-family: var(--ui);
  text-align: left;
  color: var(--ink);
}
.ph-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ph-mini-cols { display: flex; align-items: center; gap: 14px; overflow: hidden; }
.ph-mini-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ph-mini-start { width: 40px; height: 24px; background: var(--accent); border: 2px solid #271813; }
:root[data-skin="clean"] .ph-mini-start { border: 0; border-radius: 5px; }
.ph-mini-name { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ph-mini-name.is-start { font-weight: 700; color: var(--ink); }
.ph-mini-col.is-here .ph-mini-name { font-weight: 700; color: var(--accent-ink); }
.ph-mini-stack { display: flex; flex-direction: column; gap: 3px; }
.ph-mini-box { width: 30px; height: 8px; background: #ffffff; border: 1.5px solid #271813; }
.ph-mini-dash { width: 30px; height: 8px; border: 1.5px dashed #271813; }
:root[data-skin="clean"] .ph-mini-box { background: #d3c6ad; border: 0; border-radius: 2px; }
:root[data-skin="clean"] .ph-mini-dash { border: 1px dashed #b9ab92; border-radius: 2px; }
.ph-mini-arrow { flex: none; display: flex; color: var(--ink); }
.ph-mini-more { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Play, full screen (Phone · Prototype) ------------------------------------------------------ */

.ph-play { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--canvas); }
.ph-play.is-own { background: #fbf8f1; }
.ph-play.is-own .frame { box-shadow: none; }
.ph-play.is-own .frame-none .frame-screen { outline: 0; box-shadow: none; }
.ph-play-fit { position: relative; flex: none; }
.ph-play-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 300px; padding: 24px; text-align: center; }
.ph-play-empty .btn-primary { margin-top: 6px; height: 44px; }
.toast.ph-hint { pointer-events: none; }
.ph-hint .toast-text { line-height: 1.25; }
.ph-hint .toast-text b { font-size: var(--lsz); letter-spacing: var(--ls); text-transform: var(--lt); }
.ph-hint .toast-text span { font-size: 12.5px; opacity: 0.85; }

.ph-pmenu { gap: 14px; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.ph-pmenu-head { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.ph-pmenu-head .col { min-width: 0; }
.ph-pmenu-pair { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ph-pmenu-pair > button { height: 44px; min-width: 0; }
.ph-pmenu-rows { flex: none; display: flex; flex-direction: column; }

/* The other tools as pages: Screens, Themes, Code and Device -------------------------------- */

.ph-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); }
.ph-page-top {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
  border-bottom: var(--bw) solid var(--line);
}
.ph-preview { display: flex; justify-content: center; max-width: 100%; }
.ph-preview .thumb { overflow: visible; }
.ph-page-tip { align-self: stretch; margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.ph-code-dev { position: relative; align-self: stretch; }
.ph-code-dev .ph-insp { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ph-panel { flex: 1 0 auto; display: flex; flex-direction: column; background: var(--panel); }
.ph-panel .panel-head { padding: 14px 16px; }
.ph-panel .panel-body { flex: none; overflow: visible; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.ph-panel [data-act="panel-close"], .ph-panel .panel-head-row:has([data-act="panel-close"]) > .title { display: none; }
.ph-panel .panel-head-row:has(> .title + .grow + [data-act="panel-close"]:last-child) { display: none; }
.ph-panel .panel-head-row:has([data-act="panel-close"]) { min-height: 0; }
.ph-panel-foot { flex: none; padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.ph-page-screens .ph-panel { flex: 1 1 auto; }

/* New project (Phone · New project) ------------------------------------------------------------ */

.ph-np { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.ph-np-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.ph-np-group { flex: none; display: flex; flex-direction: column; gap: 8px; }
label.ph-np-group { gap: 6px; }
.ph-np-starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ph-np-start { min-width: 0; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; background: #ffffff; border: 2px solid #271813; box-shadow: 2px 2px 0 #271813; }
.ph-np-start.is-on { box-shadow: 3px 3px 0 #271813; }
:root[data-skin="clean"] .ph-np-start { background: #fffdf8; border: 1px solid #e6dccb; border-radius: 14px; box-shadow: none; }
:root[data-skin="clean"] .ph-np-start.is-on { border: 1.5px solid #9a3412; box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.12); }
.ph-np-thumb { height: 96px; flex: none; display: flex; justify-content: center; overflow: hidden; background: #ffe9e3; border-bottom: var(--bwc) solid #271813; }
:root[data-skin="clean"] .ph-np-thumb { background: #f1e9d8; border-bottom-color: #e6dccb; }
.ph-np-shot { display: block; height: max-content; margin-top: 12px; overflow: hidden; border-radius: 16px 16px 0 0; }
.ph-np-blank { width: 110px; height: 240px; flex: none; display: flex; justify-content: center; margin-top: 12px; padding-top: 26px; color: var(--muted); background: #fbf8f1; border: 2px dashed #271813; border-radius: 16px 16px 0 0; }
:root[data-skin="clean"] .ph-np-blank { border-color: #b9ab92; }
.ph-np-opt { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px 10px; font-family: var(--ui); font-size: 14px; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.ph-np-start.is-on .ph-np-opt { background: #ff5f1f; }
:root[data-skin="clean"] .ph-np-start.is-on .ph-np-opt { background: rgba(154, 52, 18, 0.08); }
.ph-np-opt:focus-visible { outline-offset: -4px; }
.ph-np-opt .col { min-width: 0; }
.ph-np-opt .np-sub { font-size: 12px; line-height: 1.3; }
.ph-np-devices .seg { height: 40px; }
.ph-np-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-np-theme { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; color: var(--ink); background: #ffffff; border: 2px solid #271813; border-radius: 0; }
.ph-np-theme.is-on { background: #ff5f1f; box-shadow: 2px 2px 0 #271813; }
:root[data-skin="clean"] .ph-np-theme { background: #fffdf8; border: 1px solid #e6dccb; border-radius: 999px; }
:root[data-skin="clean"] .ph-np-theme.is-on { background: rgba(154, 52, 18, 0.08); border: 1.5px solid #9a3412; box-shadow: none; }
.ph-np-sw { width: 36px; height: 26px; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #271813; border-radius: 0; }
:root[data-skin="clean"] .ph-np-sw { border-color: #d3c6ad; border-radius: 999px; }
.ph-np-sw > span { display: block; }
.ph-np-theme .theme-name { line-height: 1.1; white-space: nowrap; }
.ph-np-theme .tn-sketch { font-size: 18px; font-weight: 400; }
.ph-np-theme .tn-clean { font-size: 14px; }
.ph-np-theme .tn-blueprint { font-size: 11.5px; }
.ph-np-theme .tn-brutal { font-size: 13px; letter-spacing: 0.03em; }
.ph-np-theme .tn-midnight { font-size: 14px; letter-spacing: -0.02em; }
.ph-np-system { align-self: flex-start; margin-top: 4px; }
.ph-np-foot { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: var(--bw) solid var(--line); }
.ph-np-create { width: 100%; height: 48px; }

/* What the big screen floats, placed for a phone ------------------------------------------- */

.phone-app .toast { left: 12px; right: 12px; bottom: auto; top: calc(56px + 12px + env(safe-area-inset-top, 0px)); width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; animation-name: ph-toast-in; }
.ph-in-play .toast { top: calc(69px + env(safe-area-inset-top, 0px)); }
@keyframes ph-toast-in { from { opacity: 0; transform: translateY(-12px); } }
.phone-app .history { left: 8px; right: 8px; top: calc(56px + 8px + env(safe-area-inset-top, 0px)); bottom: auto; width: auto; max-width: none; max-height: calc(100dvh - 88px); }
.phone-app .history-head .icon-sm { width: 36px; height: 36px; }
.phone-app .drag-ghost { width: 96px; height: 62px; gap: 2px; font-size: 10.5px; box-shadow: 6px 6px 0 rgba(39, 24, 19, 0.9); transform: var(--ghost-at) rotate(-6deg); }
:root[data-skin="clean"] .phone-app .drag-ghost { border-radius: 12px; box-shadow: 0 18px 30px -14px rgba(28, 34, 48, 0.45); }
.phone-app .drag-ghost.is-over { transform: var(--ghost-at) rotate(-3deg) scale(0.92); }
.phone-app .drag-ghost.is-still { transform: var(--ghost-at); }
.phone-app .drag-ghost .tile-art { width: 44px; height: auto; }

/* iOS zooms into any field under 16 px when it gets focus */
@supports (-webkit-touch-callout: none) {
  .phone-app input:not([type="range"]), .phone-app select, .phone-app textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-edit, .ph-pick, .ph-pmenu, .ph-menu, .ph-land { animation: fade-in 120ms ease both; }
  .phone-app .toast { animation-name: fade-in; }
  .ph-drawer, .ph-stage > .stage { transition: none; }
}