/* =====================================================================
   PlayFocus on a phone (HELP-82, qbGZWTWgzix0naDasd84).

   Under 600 px — the component sheet's phone breakpoint — playfocus.js
   sets data-layout="phone" on #app from lib/playfocus-phone.js's one width
   test, and every rule here keys on that attribute rather than on a media
   query of its own, so the phone shell and HELP-77's rail can never
   disagree at 599 and 600 px. From 600 px up nothing here applies: a
   tablet and a phone turned sideways get HELP-77's desktop.

   Colours are the design system's tokens only (armando-tokens.css, so
   Light, Dark and the seven palettes come from the same setting as on
   desktop, HELP-111 story 4). The header, the bottom tab bar, the bottom sheet, the More
   drawer and the floating button are not on the component sheet: they
   are drawn as Lia's design has them (gold outlines in frames B1, M1, M2
   and S1) and go onto the sheet once agreed.
   ===================================================================== */

#app.pf-app[data-layout="phone"] { display: block; min-height: 100vh; overflow-x: clip; }
#app[data-layout="phone"] > .pf-rail { display: none; }
#app[data-layout="phone"] .pf-main { min-height: 100vh; }

/* ---------------------------------------------------------------------
   The 56 px header (list screens) and the record's Back row
   ------------------------------------------------------------------ */

#app[data-layout="phone"] .pf-top {
  position: sticky;
  top: 0;
  z-index: 6;
  gap: 10px;
  height: 56px;
  min-height: 56px;
  padding: 0 8px 0 10px;
  box-sizing: border-box;
}
.pf-phead-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--brand-red), var(--brand-rail-end));
  color: var(--neutral-0);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
/* The Logo mark on colour (its README's pf-logo--oncolor): the A in the tile's own colour, the ball in brand-gold. */
.pf-phead-tile .pf-logo__mark { width: 30px; height: 30px; }
.pf-phead-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--type-title); letter-spacing: var(--type-title-tracking); }
.pf-phead-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.pf-phead-back { flex: none; }
.pf-phead-crumb { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--neutral-700); font-size: 14px; }
.pf-phead-crumb .pf-id { color: var(--brand-burgundy); }

/* ---------------------------------------------------------------------
   The 72 px bottom tab bar and the floating button
   ------------------------------------------------------------------ */

/* MobileTabBar (bundle.css, HELP-111 story 12) at the bottom of the window, one column per tab the phone has today. */
.pf-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
.pf-tabbar :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--neutral-900); border-radius: var(--radius-lg); }

/* The floating button is the design system's Button fab, docked (pf-btn--fab pf-btn--docked, HELP-93 story 2). */

/* While somebody types, the keyboard has the bottom of the screen. */
#app[data-typing="true"] .pf-tabbar,
#app[data-typing="true"] #pf-fab { display: none; }

/* The content scrolls between the header and the tab bar; with the button, never under it (B1). */
#app[data-layout="phone"] .pf-screen { padding: 12px 12px calc(72px + 24px + env(safe-area-inset-bottom, 0px)); }
#app[data-layout="phone"]:has(#pf-fab) .pf-screen { padding-bottom: calc(72px + 56px + 32px + env(safe-area-inset-bottom, 0px)); }
#app[data-layout="phone"][data-typing="true"] .pf-screen { padding-bottom: 16px; }

/* Touch targets of at least 44 px. */
#app[data-layout="phone"] .pf-btn { height: auto; min-height: 44px; }
#app[data-layout="phone"] .pf-btn--icon { width: 44px; }
#app[data-layout="phone"] .pf-search input { height: 44px; font-size: 16px; }
#app[data-layout="phone"] .pf-input { min-height: 44px; font-size: 16px; }
#app[data-layout="phone"] .pf-seg button { min-height: 40px; }
#app[data-layout="phone"] .pf-check { min-height: 44px; }

/* ---------------------------------------------------------------------
   The requirements: toolbar, board accordion, grouped list
   ------------------------------------------------------------------ */

#app[data-layout="phone"] .pf-ribbon { flex-direction: column; align-items: stretch; gap: 8px; }
.pf-pribbon-row { display: flex; align-items: center; gap: 8px; }
.pf-pribbon-row .pf-ribbon-search { flex: 1 1 auto; min-width: 0; }
#app[data-layout="phone"] .pf-ribbon .pf-seg { align-self: flex-start; }
/* MenuButton's and ActionsMenu's menus are bottom sheets on a phone, with 44 px rows (HELP-111 stories 8 and 12). */
#app[data-layout="phone"] .pf-menuwrap > .pf-menu {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-popover);
  width: auto;
  padding: 8px 8px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--elevation-5);
}
/* A sheet's rows keep the README's 48 px (HELP-117): this id-weight rule outranked .pf-menu--sheet's. */
#app[data-layout="phone"] .pf-menu:not(.pf-menu--sheet) .pf-opt, #app[data-layout="phone"] .pf-menu:not(.pf-menu--sheet) .pf-menu__item { min-height: 44px; }

.pf-pboard, .pf-plist { display: flex; flex-direction: column; gap: 10px; }
.pf-pgroup { overflow: hidden; border: 1px solid var(--neutral-200); border-radius: var(--radius-2xl); background: var(--neutral-0); box-shadow: var(--elevation-1); }
.pf-pgroup-head { margin: 0; }
.pf-pgroup-head button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 14px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--neutral-900);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.pf-pgroup-name { min-width: 0; overflow-wrap: anywhere; }
.pf-pcount { margin-left: auto; padding-left: 8px; color: var(--neutral-700); font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-pdot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--tone); }
.pf-pstates[hidden] { display: none; }
.pf-pstate {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 14px;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid var(--neutral-200);
  background: transparent;
  color: var(--neutral-900);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.pf-pstate[aria-expanded="true"] { background: var(--neutral-50); }
.pf-pstate[data-unused="true"] { color: var(--neutral-600); cursor: default; }
.pf-pstate-chev { flex: none; width: 14px; }
.pf-pstate-words { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pf-pstate-name { font-weight: 600; }
.pf-pstate-sub { color: var(--neutral-600); }
.pf-pstate-gate { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--brand-gold-tint); color: var(--brand-gold-ink); font-weight: 600; }
/* Side by side, not stacked: a robot head's ears would be lost under the next one (HELP-111 story 7). */
.pf-pstate-avatars { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.pf-pstate .pf-pcount { margin-left: 0; }
.pf-pstate-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 12px; background: var(--neutral-50); }
.pf-pstate-none { margin: 4px; color: var(--neutral-700); }

/* ---------------------------------------------------------------------
   One requirement: header, sections as an accordion (R1)
   ------------------------------------------------------------------ */

#app[data-layout="phone"] .pf-screen[data-screen="record"] { padding: 0 0 calc(72px + 24px + env(safe-area-inset-bottom, 0px)); }
/* The RecordHeader on a phone (HELP-111 story 13): the title above its StatusPill, the RecordPanel's clusters in
   one column with key and value on one line (AttributeCluster's own narrow layout). */
#app[data-layout="phone"] .pf-record { gap: 10px; padding: 10px 14px 12px; }
#app[data-layout="phone"] .pf-record__title { flex-basis: 100%; }

/* Tabs below 600 px are the accordion its README draws: 52 px rows in a radius-xl container, the open row marked
   by a 3 px inset red bar and its chevron turned. bundle.css has no rules for it: drawn here from tokens. */
.pf-psections { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.pf-psection { border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); background: var(--neutral-0); }
.pf-psection-head { margin: 0; font-size: 15px; }
.pf-psection-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--neutral-900);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  scroll-margin-top: 64px;
}
.pf-psection-btn > .pf-ico:last-child { margin-left: auto; color: var(--neutral-600); transition: transform .15s ease; }
.pf-psection-btn[aria-expanded="true"] { box-shadow: inset 3px 0 0 var(--brand-red); }
.pf-psection-btn[aria-expanded="true"] > .pf-ico:last-child { transform: rotate(90deg); }
.pf-psection-open { color: var(--feedback-danger); font-size: 14px; font-weight: 700; }
#app[data-layout="phone"] .pf-psection-body { padding: 12px 12px 14px; border-top: 1px solid var(--neutral-200); }
/* The Comments filter on a phone (HELP-119, frame P1): Show full width, Hide resolved under it, left-aligned. */
#app[data-layout="phone"] .pf-cfilter { flex-direction: column; align-items: flex-start; gap: 8px; }
#app[data-layout="phone"] .pf-cfilter__show { align-self: stretch; }
#app[data-layout="phone"] .pf-detail { padding: 14px; }
#app[data-layout="phone"] .pf-detail > .pf-btn { position: static; align-self: flex-end; }
#app[data-layout="phone"] .pf-cthread { scroll-margin-top: 72px; }
#app[data-layout="phone"] .pf-storygrid,
#app[data-layout="phone"] .pf-mockgrid { grid-template-columns: minmax(0, 1fr); }
#app[data-layout="phone"] .pf-stories-bar { flex-direction: column; align-items: flex-start; }
#app[data-layout="phone"] .pf-stories-bar > .pf-btn { margin-left: 0; }
.pf-message-text[data-clamped="true"] { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#app[data-layout="phone"] .pf-answer__col { max-width: calc(100% - 44px); }
#app[data-layout="phone"] .pf-question__actions .pf-btn { flex: 1 1 auto; }
#app[data-layout="phone"] .pf-tab-tools { flex-direction: column; align-items: stretch; width: 100%; }
#app[data-layout="phone"] .pf-ms.pf-for { width: 100%; max-width: 100%; }
#app[data-layout="phone"] .pf-story-form,
#app[data-layout="phone"] .pf-compose { max-width: none; padding: 12px; }
#app[data-layout="phone"] .pf-filerow, #app[data-layout="phone"] .pf-linkrow { padding: 8px 10px; }
#app[data-layout="phone"] .pf-histline { align-items: flex-start; flex-wrap: wrap; }
#app[data-layout="phone"] .pf-cost-tiles { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------------
   Bottom sheets and the More drawer (gold outlines in S1, M1, M2)
   ------------------------------------------------------------------ */

/* A bottom sheet: a native dialog at the bottom of the window, the README's menus and NavFooter's popovers in it. */
#app[data-layout="phone"] dialog.pf-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100% - 60px);
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--neutral-0);
  color: var(--neutral-900);
  box-shadow: var(--elevation-5);
  flex-direction: column;
  transition: transform .15s ease;
}
#app[data-layout="phone"] dialog.pf-sheet[open] { display: flex; }
dialog.pf-sheet::backdrop { background: color-mix(in srgb, var(--neutral-900) 35%, transparent); }
/* A menu in a sheet is the sheet's own body, not a dropdown. */
.pf-menu.pf-menu--sheet, .pf-railmenu.pf-menu--sheet { position: static; width: auto; padding: 0; border: 0; box-shadow: none; }
.pf-menu--sheet > .pf-menu__head { display: none; } /* the sheet's own title names it */
.pf-menu--sheet .pf-menu__item { display: flex; align-items: center; gap: 12px; min-height: 48px; border: 1px solid transparent; text-decoration: none; }
.pf-menu--sheet .pf-menu__item[aria-checked="true"] { border-color: var(--brand-red); background: var(--theme-selected-bg); font-weight: 600; }
.pf-sheet-handle {
  flex: none;
  display: block;
  width: 40px;
  height: 5px;
  margin: 8px auto 4px;
  border-radius: 3px;
  background: var(--neutral-300);
  touch-action: none;
}
.pf-sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 16px; border-bottom: 1px solid var(--neutral-200); }
/* A sheet's title: 'display', 24/32 Outfit 700. */
.pf-sheet-head h2 { flex: 1 1 auto; margin: 0; font: var(--type-display); letter-spacing: var(--type-display-tracking); outline: none; }
.pf-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 20px; }
.pf-app-row { min-height: 64px; }
.pf-sheet-note { margin: 8px 12px 0; color: var(--neutral-700); font-size: 14px; }

#app[data-layout="phone"] dialog.pf-fpanel { width: 100%; }
#app[data-layout="phone"] dialog.pf-fpanel > .pf-filters { width: 100%; border-left: 0; }
#app[data-layout="phone"] .pf-filters__foot .pf-btn { flex: 1 1 0; }
#app[data-layout="phone"] .pf-dialog-head { padding: 4px 8px 8px 16px; }
#app[data-layout="phone"] .pf-dialog-foot { padding: 12px 16px 16px; }
#app[data-layout="phone"] .pf-dialog-foot .pf-btn { flex: 1 1 0; }

/* MobileTabBar's More: a drawer at the right in the rail's own gradient, holding ArmandoNav's rows and NavFooter. */
#app[data-layout="phone"] dialog.pf-drawer {
  inset: 0 0 0 auto;
  width: 300px;
  max-width: 88vw;
  height: 100%;
  max-height: 100%;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  background: linear-gradient(180deg, var(--brand-red), var(--brand-rail-end));
  color: var(--neutral-0);
}
.pf-drawer .pf-sheet-head { padding: 0 8px; border: 0; justify-content: flex-end; }
.pf-drawer .pf-sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-drawer .pf-sheet-head .pf-btn { border-color: transparent; background: transparent; color: inherit; }
.pf-drawer .pf-sheet-body { display: flex; flex-direction: column; padding: 0; overflow-y: auto; }
.pf-drawer :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--neutral-900); }
/* The rail's rows inside the drawer: the drawer is the rail's ground, so the inner rail takes its size, not its own. */
.pf-drawer__rail { flex: 1 1 auto; width: auto; min-height: 0; background: none; }
.pf-drawer__rail .pf-rail__list { margin-top: 0; }

/* A mockup full screen (C2), as on every width since the feedback round,
   with who stored it and when. A feedback round's notes go under the
   mockup on a phone: beside it they would leave the mockup no width. */
#app[data-layout="phone"] .pf-viewer-body { flex-direction: column; padding: 8px; gap: 8px; }
#app[data-layout="phone"] .pf-viewer iframe { flex: 1 1 0; min-height: 0; }
#app[data-layout="phone"] .pf-mf-panel { width: auto; max-height: 45%; }
.pf-viewer-stored { flex: none; margin: 0; padding: 10px 16px; border-top: 1px solid var(--neutral-200); font-size: 14px; }
.pf-viewer-stored[hidden] { display: none; }

/* ---------------------------------------------------------------------
   The story panel on a phone: the SidePanel at full width (bundle.css),
   its tabs an accordion (S1); the cycle's SidePanel takes the full width too
   ------------------------------------------------------------------ */

#app[data-layout="phone"] .pf-sp-side .pf-side__head { gap: 4px; padding: 8px 8px 8px 12px; }
.pf-sp-place { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.pf-sp-titled .pf-side__title { padding-top: 2px; }
.pf-sp-code { margin: 14px 24px 0; font-size: 14px; }
#app[data-layout="phone"] .pf-sp-title { padding: 2px 16px 6px; }
.pf-sp-sections { padding: 4px 12px 32px; }

/* ---------------------------------------------------------------------
   The Stories list as cards (T1)
   ------------------------------------------------------------------ */

.pf-pstories .pf-pgroup-head .pf-id { flex: none; }

/* ---------------------------------------------------------------------
   Assign to on a phone (HELP-95 story 3): the confirmation at 360 px.
   The Actions sheet's group is ActionsMenu's own (pf-menu--sheet), and
   the notes row is RecordHeader's.
   ------------------------------------------------------------------ */

#app[data-layout="phone"] .pf-confirm .pf-dfoot-buttons { flex-wrap: wrap; }
#app[data-layout="phone"] .pf-confirm .pf-dfoot-buttons .pf-btn { flex: 1 1 140px; min-height: 44px; height: auto; white-space: normal; }
.pf-menu--sheet > .pf-menu__head[data-group="true"] { display: block; }
/* HELP-99: the pull request link in the record's notes row is a 44 px tap target on a phone. */
#app[data-layout="phone"] .pf-record__notes .pf-ref--ext { min-height: 44px; }

/* The Team panel (HELP-104, P1-P3): Team at the right end of the Board | List row, two columns of cards from 320 px of content, one below. */
.pf-pribbon-row--views { justify-content: space-between; }
#app[data-layout="phone"] .pf-team { padding: 12px; }
#app[data-layout="phone"] .pf-team-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* New requirement as the full-screen sheet (HELP-93 story 2): every tap target at least 44 px. */
.pf-newreq .pf-dialog--sheet .pf-input:not(textarea),
.pf-newreq .pf-dialog--sheet .pf-ms__field,
.pf-newreq .pf-dialog--sheet .pf-radio,
.pf-newreq .pf-dialog--sheet .pf-drop .pf-btn { min-height: 44px; }

/* RequirementIntro on a phone (HELP-123 story 5): the canvas is the Dialog box, but not the Dialog's
   full-screen sheet, so it keeps its own height and corners and fits the visible part of the main area.
   For the design system artifact: bundle.css's phone rule for .pf-dialog reaches the intro's canvas too. */
@media (max-width: 600px) {
  .pf-reqintro .pf-reqintro__canvas { min-height: 0; border: var(--border-default); border-radius: var(--radius-2xl); }
}