/* Figma: 02 · Field Notes · Pages
   One block per page frame. Page body padding matches the Figma frame: 100px
   gutters inside a 1440 frame, so the content column is 1240. */
.Page { display: flex; flex-direction: column; }
.Page-body { padding: 0 var(--gutter) 80px; }
.PageHead { display: flex; flex-direction: column; gap: 12px; padding: 40px 0 26px; }
.PageHead-desc { color: var(--navy-400); max-width: 900px; }
.Count { display: flex; align-items: center; gap: 6px; padding: 10px 0; }
.Count-note { color: var(--navy-400); }
.Table { display: flex; flex-direction: column; }
.view-enter { animation: viewIn var(--base) var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } }

/* Today ------------------------------------------------------------------- */
.Today-columns { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; padding-top: 24px; align-items: start; }
.Today-left { display: flex; flex-direction: column; gap: 24px; }
.Today-list { display: flex; flex-direction: column; }
.Today-right { display: flex; flex-direction: column; gap: 22px; }
.Today-links { display: flex; flex-wrap: wrap; gap: 20px; }
.Today-more { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--navy-400); cursor: pointer; padding: 16px 0 0; }
.Today-seeall { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--teal-700); cursor: pointer; padding: 0; }

/* Tasks ------------------------------------------------------------------- */
.Tasks-summary { display: flex; border: 1px solid var(--fog); border-radius: 8px; background: var(--paper); margin-bottom: 20px; }
.Tasks-stage { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; flex: 1; border-left: 1px solid var(--fog); }
.Tasks-stage:first-child { border-left: 0; }
.Tasks-stage-top { display: flex; align-items: center; gap: 8px; }
.Tasks-stage-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--teal); }
.Tasks-stage-note { color: var(--navy-400); }
.Tasks-monthnav { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.Tasks-arrows { display: flex; gap: 4px; }
.Tasks-arrow { width: 30px; height: 30px; border: 1px solid var(--navy-200); border-radius: 6px; background: var(--paper); display: grid; place-items: center; cursor: pointer; transition: border-color var(--fast) var(--ease); }
.Tasks-arrow:hover { border-color: var(--teal); }
.Tasks-today-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--navy-200); border-radius: 999px; background: var(--paper); cursor: pointer; }
.Tasks-legend { display: flex; gap: 14px; align-items: center; margin-left: auto; color: var(--navy-400); }
.Tasks-legend span { display: inline-flex; align-items: center; gap: 6px; }
.Tasks-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.Calendar { display: flex; flex-direction: column; }
.Calendar-dow { display: grid; grid-template-columns: repeat(7, 1fr); }
.Calendar-dow span { padding: 0 8px 8px; color: var(--navy-400); }
.Calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.Calendar-day { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 132px; padding: 8px 8px 10px; border: 1px solid var(--fog); margin: 0 -1px -1px 0; }
.Calendar-day[data-weekend="true"] { background: var(--mist); }
.Calendar-day[data-muted="true"] .Calendar-num { color: var(--navy-300); }
.Calendar-daytop { display: flex; justify-content: flex-end; }
.Calendar-num { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; }
.Calendar-day[data-today="true"] .Calendar-num { background-image: var(--grad); color: var(--paper); }
.Calendar-events { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.CalendarEvent { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 3px 7px 3px 5px; border-radius: 4px; border: 0; width: 100%; text-align: left; cursor: pointer; background: var(--mist); color: var(--navy); transition: filter var(--fast) var(--ease); }
.CalendarEvent:hover { filter: brightness(0.97); }
.CalendarEvent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.CalendarEvent[data-kind="follow-up"] { background: var(--teal-100); color: var(--teal-700); }
.CalendarEvent[data-kind="overdue"] { background: var(--error-bg); color: var(--error); }
.CalendarEvent[data-kind="done"] { background: var(--green-100); color: var(--green-600); }
.Timeline-scale { display: grid; grid-template-columns: 316px minmax(0, 1fr); padding-bottom: 10px; }
.Timeline-ticks { display: grid; }
.Timeline-ticks span { color: var(--navy-400); white-space: nowrap; overflow: hidden; }
.Timeline-ticks span[data-today="true"] { color: var(--teal-700); }
.Timeline-rows { position: relative; padding-top: 8px; border-top: 1px solid var(--fog); }
.Timeline-grid { position: absolute; inset: 0; display: grid; margin-left: 316px; pointer-events: none; }
.Timeline-grid i { border-left: 1px solid var(--fog); }
.Timeline-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teal); opacity: 0.55; pointer-events: none; }
.TimelineRow { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: center; padding: 6px 0; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; position: relative; }
.TimelineRow-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.TimelineRow-text { display: flex; flex-direction: column; min-width: 0; }
.TimelineRow-text span:last-child { color: var(--navy-400); }
.TimelineRow-track { position: relative; height: 34px; }
.TimelineBar { position: absolute; top: 3px; height: 28px; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--teal-100); color: var(--teal-700); transition: transform var(--base) var(--ease); }
.TimelineRow:hover .TimelineBar { transform: translateY(-1px); }
.TimelineBar i { width: 12px; height: 12px; border-radius: 999px; background: var(--teal); flex: none; }
.TimelineBar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.TimelineBar[data-kind="due-soon"] { background: var(--teal); color: var(--paper); }
.TimelineBar[data-kind="due-soon"] i { background: var(--paper); }
.TimelineBar[data-kind="overdue"] { background: var(--error-bg); color: var(--error); }
.TimelineBar[data-kind="overdue"] i { background: var(--error); }
.TimelineBar[data-kind="done"] { background: var(--green-100); color: var(--green-600); }
.TimelineBar[data-kind="done"] i { background: var(--green-600); }

/* Contacts ---------------------------------------------------------------- */
/* Pager -------------------------------------------------------------------- */
.Pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 18px; }
.Pager button { border: 0; background: none; color: var(--teal-700); cursor: pointer; }
.Pager button:hover { color: var(--navy); }

/* Team -------------------------------------------------------------------- */
.Team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 20px; }
.Team-note { display: flex; gap: 10px; align-items: flex-start; padding-top: 32px; color: var(--navy-400); max-width: 760px; }

/* Inbox ------------------------------------------------------------------- */
.Inbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding: 14px 0 26px; align-items: stretch; }

/* Ask --------------------------------------------------------------------- */
.Ask-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.Ask-rail { display: flex; flex-direction: column; gap: 8px; padding: 24px 16px; background: var(--mist); }
.Ask-new { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--fog); border-radius: 8px; background: var(--paper); cursor: pointer; }
.Ask-rail-label { color: var(--navy-400); padding: 10px 12px 2px; }
.Ask-main { display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter); }
.Ask-thread { display: flex; flex-direction: column; gap: 28px; width: 720px; max-width: 100%; padding: 36px 0 0; flex: 1; }
.Ask-composer { width: 720px; max-width: 100%; padding: 24px 0 28px; position: sticky; bottom: 0; background: linear-gradient(to top, var(--paper) 72%, rgba(255, 255, 255, 0)); }
.Ask-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 720px; max-width: 100%; margin: auto 0; text-align: center; padding: 60px 0; }
.Ask-intro-mark { width: 44px; height: 44px; display: grid; place-items: center; }
.Ask-intro-mark svg { stroke: url(#fn-gradient); }
.Ask-starters { display: flex; gap: 12px; width: 100%; padding-top: 14px; }

/* iPad Pro portrait and other tablets ------------------------------------- */
/* Figma: 03 · Field Notes · Tablet & Phone, the iPad Pro row (1024 x 1366).   */
@media (max-width: 1099px) and (min-width: 720px) {
  :root { --gutter: 40px; }
  .AppHeader-inner { height: 60px; gap: 16px; }
  .AppHeader-logo img { width: 92px; }
  .AppHeader-nav { gap: 18px; }
  .AppHeader-fresh span[data-freshness], .AppHeader-refresh-label { display: none; }
  /* One row: the number, then the two ways in. The third line said what the
     page below it already shows. */
  .CaptureCard[data-layout="bar"] { gap: 28px; padding: 16px 26px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-head { padding-right: 28px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-way:nth-child(3) { display: none; }
  .Today-columns { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
  /* A 1240 table at 944: the summary is the column to give up first. */
  /* A dropped column keeps its cell, empty and zero wide: display:none would
     shift every cell after it one column to the left. */
  :root { --cols-VisitTableRow: 3px 80px 108px minmax(0, 1fr) 0px 80px 210px 15px; }
  .VisitTableRow > :nth-child(5), .TableHeader[data-for="VisitTableRow"] > :nth-child(5) { visibility: hidden; overflow: hidden; }
  :root { --cols-ContactTableRow: 22px 176px minmax(0, 1fr) 0px 0px 150px 78px 54px 92px 15px; }
  .ContactTableRow > :nth-child(4), .ContactTableRow > :nth-child(5),
  .TableHeader[data-for="ContactTableRow"] > :nth-child(4), .TableHeader[data-for="ContactTableRow"] > :nth-child(5) { visibility: hidden; overflow: hidden; }
  .Inbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .Team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .Ask-rail { display: none; }
  .Ask-shell { grid-template-columns: minmax(0, 1fr); }
}

/* Phone ------------------------------------------------------------------- */
/* Figma: the phone row of the same board (390 x 844). Navigation moves to a
   bottom tab bar, records open as pages and menus come up as sheets. */
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  .AppHeader-inner { height: 56px; gap: 12px; }
  .AppHeader-logo img { width: 84px; }
  .AppHeader-nav { display: none; }
  .AppHeader-fresh { gap: 10px; margin-left: auto; }  /* no nav to push it, so push it */
  .AppHeader-refresh-label { display: none; }
  .AppHeader-more { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -9px; }
  .TabBar { display: flex; }
  /* room for the tab bar under every page */
  .Page-body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .PageHead { padding: 22px 0 16px; }
  .PageHead h1 { font-size: 26px; line-height: 1.05; }
  .PageHead-desc { display: none; }

  /* Today */
  .Today-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 20px; }
  .Today-right { order: 2; }
  .BriefingHeader-top { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0 12px; }
  .BriefingHeader-meta { align-items: flex-start; }
  .BriefingHeader-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 14px; }
  .MetricTile { min-width: 0; }
  /* The capture bar gives up its instructions: the number and the two ways it
     can be reached are the whole point on a phone. */
  /* One tap target and nothing else: the whole bar opens Messages. */
  .CaptureCard[data-layout="bar"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-head { grid-column: 1; min-width: 0; padding: 0; border: 0; gap: 2px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-number { font-size: 22px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-number::after { content: ''; position: absolute; inset: 0; border-radius: 8px; }
  .CaptureCard[data-layout="bar"] .CaptureCard-ways { display: none; }
  /* The arrow carries the gradient itself; a filled circle around it was one shape too many. */
  .CaptureCard-go { grid-column: 2; display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
  .CaptureCard-go svg { stroke: url(#fn-gradient); stroke-width: 2.4; }

  /* Rows · Figma: Phone Row. The same markup, two lines instead of a table. */
  .Table { overflow: visible; }
  .TableHeader { display: none; }
  .Row { min-width: 0; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 0; }
  .VisitTableRow { grid-template-columns: 3px 34px minmax(0, 1fr) auto 15px; }
  .VisitTableRow > :nth-child(2) { grid-column: 4; grid-row: 1; justify-self: end; }   /* the date */
  .VisitTableRow-rep { grid-column: 2; grid-row: 1 / span 2; }
  .VisitTableRow-rep > span:last-child { display: none; }  /* the rep's name; the photo stays */
  .VisitTableRow-stripe { grid-row: 1 / span 2; height: 100%; }
  .VisitTableRow-contact { grid-column: 3; grid-row: 1 / span 2; }
  .VisitTableRow > :nth-child(5) { display: none; }                                     /* the summary */
  .VisitTableRow > :nth-child(6) { grid-column: 4; grid-row: 2; justify-self: end; }     /* the pill */
  .VisitTableRow-next { display: none; }
  .VisitTableRow .chev { grid-column: 5; grid-row: 1 / span 2; }

  .TaskTableRow { grid-template-columns: 20px minmax(0, 1fr) auto 15px; }
  .TaskTableRow-task { grid-column: 2; grid-row: 1 / span 2; }
  .TaskTableRow-owner, .TaskTableRow > :nth-child(5) { display: none; }
  .TaskTableRow-due { grid-column: 3; grid-row: 1; justify-self: end; }
  .TaskTableRow > :nth-child(6) { grid-column: 3; grid-row: 2; justify-self: end; }
  .TaskTableRow .chev { grid-column: 4; grid-row: 1 / span 2; }
  .Checkbox { grid-row: 1 / span 2; }

  .ContactTableRow { grid-template-columns: 22px minmax(0, 1fr) auto 15px; }
  .ContactTableRow > :nth-child(1) { grid-row: 1 / span 2; }
  .ContactTableRow > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .ContactTableRow > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .ContactTableRow > :nth-child(4), .ContactTableRow-email, .ContactTableRow-phone,
  .ContactTableRow > :nth-child(9) { display: none; }
  .ContactTableRow > :nth-child(7) { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .ContactTableRow > :nth-child(8) { display: none; }
  .ContactTableRow .chev { grid-column: 4; grid-row: 1 / span 2; }

  .MediaRow { grid-template-columns: 52px minmax(0, 1fr) 15px; }
  .MediaRow-preview { width: 52px; height: 40px; grid-row: 1; }
  .MediaRow-who { grid-column: 2; grid-row: 1; }
  .MediaRow-middle { grid-column: 1 / span 2; grid-row: 2; padding-top: 6px; }
  .MediaRow > :nth-child(4) { display: none; }
  .MediaRow .chev { grid-column: 3; grid-row: 1; }

  /* Filters: the menu opens as a sheet rather than a dropdown */
  .FilterBar-row { flex-wrap: wrap; }
  .FilterBar-row .SearchField { flex: 1 1 100%; width: 100%; min-width: 0; }
  .FilterMenu { flex: 1 1 0; }
  .FilterMenu-button { width: 100%; justify-content: center; }
  .FilterMenu-list { position: fixed; inset: auto 0 0 0; z-index: 35; min-width: 0; border-radius: 18px 18px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px -8px rgba(10, 38, 52, 0.22); animation: sheetIn var(--base) var(--ease); }
  body:has(.FilterMenu-scrim) { overflow: hidden; }  /* the page behind a sheet stays put */
  .FilterMenu-scrim { display: block; position: fixed; inset: 0; z-index: 34; background: rgba(0, 15, 29, 0.38); animation: scrimIn var(--base) var(--ease); }
  .FilterMenu-grabber { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--navy-200); margin: 0 auto 8px; }
  /* Touch: the handle belongs to the drag, the lists keep their own momentum
     and do not hand a stray scroll to the page behind them. */
  .Sheet-grabber, .Sheet-head, .FilterMenu-grabber, .Drawer-bar { touch-action: none; }
  .Sheet, .FilterMenu-list, .Modal, .Drawer { will-change: transform; }
  .Sheet-body, .Drawer-body, .FilterMenu-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .FilterMenu-list { max-height: 70vh; overflow-y: auto; }
  .Sheet-body { max-height: 60vh; overflow-y: auto; }
  /* a finger needs a target, not a hairline */
  .Sheet-option, .FilterMenu-option { min-height: 48px; }
  .IconButton { min-width: 40px; min-height: 40px; }
  .TabBar-tab { min-height: 48px; }
  .FilterMenu-option { padding: 14px 4px; border-bottom: 1px solid var(--fog); border-radius: 0; }
  .ViewToggle { width: 100%; }
  .ViewToggle button { flex: 1; justify-content: center; }

  /* A record is a page on a phone, not a panel at the side */
  .Drawer, .Drawer[data-wide="true"] { width: 100%; box-shadow: none; }
  .Drawer-body { padding: 18px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .Modal { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; }
  .Inbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .Team-grid { grid-template-columns: minmax(0, 1fr); }
  .TeamCard { grid-template-columns: 96px minmax(0, 1fr); }

  /* Ask: the thread runs full width, the composer sits inset above the tab bar */
  .Ask-shell { grid-template-columns: minmax(0, 1fr); }
  .Ask-rail { display: none; }
  .Ask-main { padding: 0; }
  .Ask-thread { width: 100%; padding: 16px 16px 0; gap: 16px; }
  .Ask-composer { width: auto; margin: 0 13px calc(96px + env(safe-area-inset-bottom, 0px)); padding: 12px 0 0; }
  .ChatMessage-bubble { max-width: 85%; }
  .Ask-intro { width: 100%; padding: 28px 16px; gap: 10px; }
  .Ask-intro h1 { font-size: 26px; line-height: 1.08; text-wrap: balance; }
  .Ask-intro p { font-size: 14px; }
  .Ask-starters { flex-wrap: wrap; }
  .StarterCard { flex: 1 1 calc(50% - 6px); }

  /* Tasks: the desk views that need width stay on the desk */
  .Tasks-summary { flex-wrap: wrap; }
  .Tasks-stage { flex: 1 1 calc(50% - 1px); border-left: 0; border-top: 1px solid var(--fog); }
  .Tasks-stage:first-child, .Tasks-stage:nth-child(2) { border-top: 0; }
  .Timeline-scale, .Timeline-grid, .TimelineRow-track { display: none; }
  .Timeline-rows { border-top: 0; }
  .TimelineRow { grid-template-columns: minmax(0, 1fr); }
  .Calendar { overflow-x: auto; display: block; }
  .Calendar-dow, .Calendar-week { min-width: 700px; }
  .Tasks-monthnav, .Tasks-legend { flex-wrap: wrap; }
  .Tasks-legend { margin-left: 0; }
  .Done-summary { flex-wrap: wrap; gap: 10px 20px; }
}
@keyframes sheetIn { from { transform: translateY(14px); opacity: 0; } }
@keyframes scrimIn { from { opacity: 0; } }

/* Tasks · Done view ------------------------------------------------------- */
.Done-summary { display: flex; align-items: baseline; gap: 20px; padding: 4px 0 18px; }
.Done-summary b { font-family: var(--display); font-weight: 900; font-size: 20px; }
.Done-summary span { color: var(--navy-400); }