/* Phone polish: Analysis, Developer, tap targets on Library / Roadmap / Home, and loading skeletons.
 *
 * Loaded last from app.html. Found in the founder's 375px review of the signed-in app:
 *  - Analysis: 72% of text under 12px, 40 targets under 40px, a 5,400px page of 252px rows.
 *  - Developer: 68% of text under 12px, documentation links indented unevenly, tabs 35px tall,
 *    the key-name placeholder cut off.
 *  - Library / Roadmap / Home: the card checkbox (15px), the "..." menu (30px), Open (28px), the
 *    Board / List / Group toggles (32px) and the "Working in Oroko" links (16px) were too small to tap.
 *  - Loading states were a bare line of text, or an ellipsis that looked like a value.
 * Everything under the media query is for phones and small tablets only (the app's own breakpoint).
 * The loading skeleton applies at every width (see v2-loading.js).
 */

/* ---------- Loading skeleton (all widths) ---------- */
.v2-loading{
  position:relative;
  color:transparent!important;
  user-select:none;
  min-height:44px;
}
.v2-loading::before,
.v2-loading::after{
  content:"";
  position:absolute;
  left:0;
  height:12px;
  border-radius:6px;
  background:linear-gradient(90deg,var(--surface-soft,#efece6) 25%,var(--line,#e4dfd6) 50%,var(--surface-soft,#efece6) 75%);
  background-size:200% 100%;
  animation:v2-shimmer 1.3s linear infinite;
}
.v2-loading::before{top:8px;width:min(60%,260px);}
.v2-loading::after{top:28px;width:min(38%,170px);}
/* A lone "..." standing in for a number: one block the size of the number. */
.v2-loading.v2-loading-value{min-height:30px;min-width:44px;display:inline-block;}
.v2-loading.v2-loading-value::before{top:4px;width:36px;height:22px;}
.v2-loading.v2-loading-value::after{display:none;}
@keyframes v2-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){
  .v2-loading::before,.v2-loading::after{animation:none;}
}

@media (max-width:820px){
  /* ---------- Analysis ---------- */
  :root .v2a-page .oroko-section-rule span,
  :root .v2a-page .oroko-analysis-legend-item span,
  :root .v2a-page .oroko-analysis-legend-item strong,
  :root .v2a-page .oroko-analysis-bar-row strong,
  :root .v2a-page .oroko-analysis-signal span,
  :root .v2a-page .oroko-analysis-signal button b{font-size:12px!important;}
  :root .v2a-page .eyebrow,
  :root .v2a-page .v2a-tile-label,
  :root .v2a-page small,
  :root .v2a-page .oroko-analysis-row small{font-size:12px!important;}
  :root .v2a-page .oroko-analysis-bar-title{font-size:13px!important;}
  /* "Most affected steps": whole row is the target. */
  :root .v2a-page .oroko-analysis-bar-row{min-height:44px;align-content:center;}
  /* Findings register: one tidy, shorter card per finding. */
  :root .v2a-page .oroko-analysis-row{padding:12px 14px;gap:8px;}
  :root .v2a-page .oroko-analysis-source{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;}
  :root .v2a-page .oroko-analysis-step{font-size:12px!important;flex:0 0 auto;}
  :root .v2a-page .oroko-analysis-source strong{font-size:15px!important;flex:1 1 0;min-width:0;}
  :root .v2a-page .oroko-text-action{min-height:40px!important;padding:0 4px;font-size:13px!important;flex:0 0 auto;white-space:nowrap;}
  :root .v2a-page .oroko-analysis-finding p,
  :root .v2a-page .oroko-annotation-callout p{font-size:14px!important;line-height:1.5;}
  :root .v2a-page .oroko-annotation-label strong{font-size:12px!important;}
  :root .v2a-page .oroko-analysis-context{font-size:12px!important;display:flex;flex-wrap:wrap;gap:2px 10px;}
  :root .v2a-page .oroko-analysis-solution{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  :root .v2a-page .oroko-analysis-none{font-size:13px!important;}
  :root .v2a-page .oroko-analysis-solution .btn{min-height:40px!important;font-size:13px!important;}
  :root .v2a-page .oroko-analysis-signal button{min-height:40px!important;display:inline-flex;align-items:center;padding:0 12px;font-size:13px!important;}
  :root .v2a-page .oroko-analysis-signal{gap:6px;}

  /* ---------- Developer ---------- */
  :root .pr55-kicker,
  :root .pr55-badge{font-size:12px!important;}
  :root .pr55-head-right{align-items:flex-start;gap:2px;}
  :root .pr55-docs-link{font-size:13px!important;min-height:40px;display:inline-flex;align-items:center;}
  :root .pr55-quickfacts code{font-size:12px!important;white-space:normal;overflow-wrap:anywhere;}
  :root .pr55-tabs button{min-height:44px;font-size:13px!important;padding:0 16px;}
  :root .pr55-key-create{flex-wrap:wrap;gap:8px;}
  :root .pr55-key-create input{flex:1 1 100%;min-width:0;}
  :root .pr55-key-create button{flex:1 1 100%;min-height:44px;font-size:14px!important;}
  :root .pr118-developer-page p,
  :root .pr55-page p{font-size:13px!important;line-height:1.5;}
  :root .pr55-error,
  :root .pr55-key-head p,
  :root .pr55-loading{font-size:13px!important;}
  :root .pr55-key-create input,
  :root .pr64-key-search input{min-height:44px!important;}

  /* ---------- Library ---------- */
  :root .process-card .pr52-card-select{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;margin:-8px 0 -8px -8px;}
  :root .process-card .pr52-card-select input{width:22px;height:22px;margin:0;}
  :root .process-card .pr52-menu-button{min-width:40px;min-height:40px;}
  :root .process-card .v2-open{min-height:40px;padding:0 18px;}
  :root .process-card .card-updated{min-height:40px;display:inline-flex;align-items:center;}
  :root .process-card .badge,
  :root .process-card .meta-chip,
  :root .process-card .card-updated,
  :root .process-card .issue,
  :root .process-card .avatar,
  :root .epage-count{font-size:12px!important;}
  :root .v2ft-toggle{min-height:40px;}
  :root main select{min-height:40px;}

  /* ---------- Roadmap ---------- */
  :root .v2rm-seg button{min-height:40px;font-size:13px!important;padding:0 14px;}
  :root .v2rm-seg-label{font-size:12px!important;}
  :root .pr34-eyebrow{font-size:12px!important;}
  :root .oroko-roadmap-summary small,
  :root .pr34-roadmap-vision strong{font-size:12px!important;}
  :root .pr34-roadmap-head .btn,
  :root .v2rm-head .btn{min-height:40px;}

  /* ---------- Home ---------- */
  :root .v2h-link{min-height:40px;display:inline-flex;align-items:center;font-size:14px!important;}
  :root .v2h-stat small{font-size:12px!important;}
  :root .v2h-stat span{font-size:12px!important;}
  :root .v2h-row-copy small,
  :root .v2h-row .badge,
  :root .v2h-kicker,
  :root .v2h-review-cell span{font-size:12px!important;}
  /* Buttons across the workspace pages were 38px; 40px is the floor for a thumb. */
  :root main .btn{min-height:40px!important;}

  /* ---------- Settings (the b5 pages) ---------- */
  :root .b5-page .b5-pill,
  :root .b5-page .b5-btn,
  :root .b5-page .b5-card p,
  :root .b5-page .b5-code,
  :root .b5-page .b5-footer,
  :root .b5-page strong{font-size:12px!important;}
  :root .b5-page .b5-btn{min-height:40px!important;}

  /* ---------- Top bar actions ---------- */
  :root .topbar-body .top-actions .btn,
  :root .topbar-body .top-actions .avatar{font-size:12px!important;}

  /* ---------- Library text floor (older layers pinned these at 9.5 to 11px) ---------- */
  :root .page-head .eyebrow,
  :root .v2-lib-stats small,
  :root .section-label .badge,
  :root .section-label>span,
  :root .process-card .card-owner small,
  :root .process-card .card-expand p,
  :root .process-card .v2-folder-chip,
  :root .process-card .v2-folder-chip span,
  :root .process-card .issue{font-size:12px!important;}
  :root .process-card .card-expand p{font-size:13px!important;line-height:1.5;}
}