/* proto.css · the layout the prototypes share. Every color, size, radius and
   motion comes from the design system (ramtt.css). The one addition is P14's
   other person's caret, selection and a version's changes, which the design
   system has no component for; they use its tokens only. */

html, body { height: 100%; margin: 0; }
body { background: var(--ground); }
#app { height: 100%; }
#app > [data-r="sidebar"] [data-r="sidebar-section"] { margin-top: 14px; }
#app > [data-r="sidebar"] [data-r="sidebar-item"] { flex: none; }
#app > [data-r="panel"] > [data-r="page"] { flex: 1; min-height: 0; }
#app > [data-r="panel"] > [data-r="page"][hidden] { display: none; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

/* a page shown inside another page: no sidebar, the panel fills the frame */
#app[data-embed] { grid-template-columns: minmax(0, 1fr); }
#app[data-embed] > [data-r="sidebar"] { display: none; }
#app[data-embed] > [data-r="panel"] { margin: 0; border-radius: 0; }
#app[data-embed] .nav-open { display: none; }

/* P1: three pages side by side, one frame each */
.frames { display: grid; grid-template-columns: repeat(var(--frames, 3), minmax(0, 1fr)); gap: 8px; flex: 1; min-height: 0; padding: 8px; }
.frames > iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r-contain); box-shadow: 0 0 0 var(--px) var(--line-2); background: var(--paper); }

.nav-open { display: none; }

/* P9: the owner's week fills the page with room around it; an email is shown in a frame of its own */
.canvas-pad { padding: 24px; }
iframe.mail-view { display: block; width: 100%; height: 460px; border: 0; border-radius: var(--r-contain); box-shadow: 0 0 0 var(--px) var(--line-2); }

/* P10: the PDF as the reader shows it */
iframe.pdf-view { display: block; width: 100%; height: 720px; border: 0; border-radius: var(--r-contain); box-shadow: 0 0 0 var(--px) var(--line-2); }

/* P8: a photo under its checklist item */
img.photo { display: block; width: 100%; max-width: 240px; height: auto; border-radius: var(--r-value); }

@media (max-width: 759px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #app > [data-r="sidebar"] {
    position: fixed; z-index: var(--z-dock); top: 0; bottom: 0; left: 0; width: 272px;
    box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3);
    transform: translateX(-100%);
    transition: transform var(--scale-in) var(--ease-expo);
  }
  #app[data-nav="open"] > [data-r="sidebar"] { transform: none; }
  #app > [data-r="panel"] { margin: 0; border-radius: 0; }
  .nav-open { display: inline-flex; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .frames { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(420px, 1fr); overflow: auto; }
}

/* P12: the list pane holds the filter, the list of every record and the bulk bar */
.crm-filter { padding: 8px 8px 4px; }
.crm-filter [data-r="field-hint"] { margin: 4px 4px 0; }
.crm-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 0 8px; }
.crm-rows > [data-part="viewport"] { flex: 1; height: auto; min-height: 0; margin: 0 8px; }
.crm-rows > [data-part="info"] { margin: 8px 12px 0; }
.crm-rows [data-part="row"] { top: 0; grid-template-columns: 8px minmax(0, 1fr) minmax(0, 38%) 44px; will-change: transform; }
.crm [data-r="bulk-bar"] { margin: 0 8px 8px; }
.crm .task > [data-r="field"] { flex: 1; min-width: 0; }
.crm-rows [data-part="row"] > [data-part="date"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm[data-list="deals"] .crm-rows [data-part="row"] { grid-template-columns: 8px minmax(0, 1fr) 84px 44px; }

/* P13: the 12 words in three columns, the fields to type them in the same grid */
ol.words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; }
.words-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.row > .grow { flex: 1; min-width: 0; }
@media (max-width: 759px) { ol.words, .words-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* P14: the other person's caret and selection in their color, and a version's changes */
.collab-caret { position: relative; margin: 0 -1px; border-left: 2px solid var(--c); word-break: normal; pointer-events: none; }
.collab-caret > [data-r="avatar"] { position: absolute; top: -18px; left: -9px; }
.collab-selection { background: color-mix(in oklab, var(--c) 22%, transparent); }
[data-r="rich-text"] [data-change="added"] { background: color-mix(in oklab, var(--c) 24%, transparent); }
[data-r="rich-text"] [data-change="removed"] { text-decoration-line: line-through; color: var(--ink-3); }

[data-part="side"] > [data-panel][hidden] { display: none; }

/* P24: the plan's bar, the capture line, and the month and timeline drawn on tokens */
.z24-main { padding: 16px 24px 48px; }
.z24-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.z24-capture { flex: 1; min-width: 260px; }
.z24-read { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: 8px 0 12px; }
.z24-meta { color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.z24-title { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.z24-panel { padding: 12px 16px 24px; }
.z24-group + .z24-group { margin-top: 20px; }
.z24-group > h3 { margin-bottom: 6px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.z24-log { margin: 0; padding: 0; list-style: none; }
.z24-log > li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: var(--px) solid var(--line-1); font-size: var(--fs-13); line-height: var(--lh-13); }
.z24-days, .z24-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.z24-days > span { padding: 4px 6px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.z24-day { min-height: 92px; padding: 4px; border-top: var(--px) solid var(--line-1); border-left: var(--px) solid var(--line-1); }
.z24-week > .z24-day:last-child { border-right: var(--px) solid var(--line-1); }
.z24-month > .z24-week:last-child > .z24-day { border-bottom: var(--px) solid var(--line-1); }
.z24-day[data-other] { background: var(--well); }
.z24-date { display: block; padding: 0 2px 2px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.z24-day[data-today] > .z24-date { color: var(--ink); font-weight: var(--fw-550); }
.z24-item { display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 2px; padding: 2px 4px; border: 0; border-radius: var(--r-key); background: var(--raised); box-shadow: inset 0 0 0 var(--px) var(--line-2); color: var(--ink); font: inherit; font-size: var(--fs-12); line-height: var(--lh-12); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.z24-item[data-due] { color: var(--ink-2); }
.z24-timeline { position: relative; padding-top: 28px; }
.z24-ticks { position: absolute; top: 0; left: 200px; right: 0; height: 24px; }
.z24-ticks > span { position: absolute; top: 4px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; }
.z24-layer { position: absolute; top: 0; bottom: 0; left: 200px; right: 0; pointer-events: none; }
.z24-now { position: absolute; top: 0; bottom: 0; width: var(--px); background: var(--ink); }
.z24-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; height: 32px; border-bottom: var(--px) solid var(--line-1); }
.z24-name { overflow: hidden; padding-right: 12px; font-size: var(--fs-13); line-height: var(--lh-13); white-space: nowrap; text-overflow: ellipsis; }
.z24-track { position: relative; height: 100%; }
.z24-span { position: absolute; top: 8px; height: 16px; min-width: 6px; padding: 0; border: 0; border-radius: var(--r-key); background: var(--ink-3); }
.z24-span[data-status="in-progress"] { background: var(--ink); }
.z24-month-head { align-items: center; gap: 4px; margin-bottom: 8px; }
.z24-month-head > h2 { margin-right: 8px; }

/* P25: the list of notes beside the note, the side panel, and the graph of links */
.z25-main { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 24px; padding: 16px 24px 48px; }
.z25-list, .z25-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.z25-list mark, .z25-list mark { background: var(--well); color: var(--ink); border-radius: var(--r-key); }
.z25-area > textarea { min-height: 360px; }
.z25-meta { color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.z25-panel { padding: 12px 16px 24px; }
.z25-head { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
.z25-links { display: flex; flex-wrap: wrap; gap: 4px; }
.z25-related { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-row); background: transparent; box-shadow: inset 0 0 0 var(--px) var(--line-2); color: var(--ink); font: inherit; font-size: var(--fs-13); line-height: var(--lh-13); text-align: left; }
@media (hover: hover) { .z25-related:hover { background: var(--plane-hover); } }
.z25-graph svg { display: block; width: 100%; height: auto; }
.z25-edge { stroke: var(--line-5); stroke-width: 1; }
.z25-node circle { fill: var(--raised); stroke: var(--ink-3); stroke-width: 1.5; }
.z25-node[data-open] circle { fill: var(--ink); stroke: var(--ink); }
/* the graph is drawn at 960 by 600 and scaled to the column, so its labels are sized in its own units */
.z25-node text { fill: var(--ink-2); font-size: 17px; /* allow: type-scale · SVG user units, scaled down with the drawing */ }
.z25-main[data-view="graph"] { grid-template-columns: minmax(0, 1fr); }
.z25-main[data-view="graph"] > .z25-list { display: none; }
.z25-node:focus-visible { outline: none; }
.z25-node:focus-visible circle { stroke: var(--ink); stroke-width: 3; }
@media (max-width: 759px) { .z25-main { grid-template-columns: minmax(0, 1fr); } }

.z25-between { justify-content: space-between; align-items: center; }

/* P27: the workspace, a sidebar beside the tool that is open */
.z27 { height: calc(100vh - 48px); }
.z27-work { position: relative; min-width: 0; }
.z27-work > iframe { display: block; width: 100%; height: 100%; border: 0; }
.z27-work > iframe[hidden] { display: none; }
.z27-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; padding: 8px; }
.z27-note { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.z27-members > .row > .grow { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
/* the shell has no narrow layout, so on a phone the sidebar is a row above the tool */
@media (max-width: 759px) {
  .z27 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .z27 > [data-r="sidebar"] { display: flex; flex-direction: row; align-items: center; gap: 2px; min-width: 0; padding: 4px 8px; overflow-x: auto; }
  .z27 > [data-r="sidebar"] > [data-part="head"] { display: none; }
  .z27-foot { flex-direction: row; align-items: center; margin: 0 0 0 auto; padding: 0; }
}
/* P24: the task's properties as rows of label and select, and the date picker's popover */
.z24-props { display: flex; flex-direction: column; gap: 8px; }
.z24-props > [data-r="form-row"] { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; }
.z24-props [data-r="select"] { justify-self: start; }
.z24-pop { position: fixed; z-index: var(--z-popover); }