/* Procedure page and compact canvas chrome on phones.
 *
 * Loaded last (after v2-procedure.css) so it can settle the many earlier layers that each set their own
 * small type sizes for the Procedure page. Contract, enforced by scripts/test-procedure-mobile.mjs:
 *   - body copy is at least 14px and secondary labels at least 12px on phones
 *   - every tap target on the Procedure page and the compact canvas chrome is at least 40px tall
 *   - documents, links, notes and annotations wrap instead of clipping
 *   - "On this page" is collapsed behind a toggle on phones; wide screens keep the sticky side list
 * Colours come from the shared design tokens only, so light and dark themes follow automatically.
 * Nothing here touches the canvas drawing, nodes, connectors or fit and layout maths.
 */

/* ---------- All widths: long unbroken strings (document links, URLs) wrap instead of clipping ---------- */
.oroko-procedure-page .procedure-step-body,
.oroko-procedure-page .procedure-step-copy,
.oroko-procedure-page .procedure-doc-block li,
.oroko-procedure-page .procedure-doc-block a,
.oroko-procedure-page .procedure-doc-block p,
.oroko-procedure-page .procedure-note-box,
.oroko-procedure-page .oroko-annotation-callout p,
.oroko-procedure-page .procedure-meta span,
.oroko-procedure-page .procedure-branches span,
.oroko-procedure-page .v2-sop-grid dd{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* The collapse toggle only exists for phones. */
.procedure-index-toggle{display:none;}

/* ---------- Phones ---------- */
@media(max-width:700px){
  /* Header, state picker and actions. */
  :root .oroko-procedure-page .eyebrow{font-size:12px!important;letter-spacing:.05em!important;line-height:1.3!important;}
  :root .oroko-procedure-page .page-head p,
  :root .oroko-procedure-page .procedure-doc-head p{font-size:14px;line-height:1.55;}
  :root .oroko-procedure-page .procedure-doc-actions label{font-size:12px;letter-spacing:.06em;}
  :root .oroko-procedure-page .procedure-doc-actions select{min-height:44px;font-size:14px;}
  :root .oroko-procedure-page .procedure-doc-actions .btn{min-height:44px;font-size:14px;}
  :root .v2-procedure-page .v2-proc-states{width:100%;}
  :root .v2-procedure-page .v2-proc-states button{flex:1;min-height:44px;font-size:14px;}
  :root .oroko-procedure-page .procedure-doc-status{font-size:12px;flex-wrap:wrap;gap:4px 8px;}

  /* Process tab row (Flow / Operational / ...): 44px targets, scrolls sideways when five do not fit. */
  :root .page-context .layer-nav,
  :root .editor-context .layer-nav{
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  :root .page-context .layer-nav::-webkit-scrollbar,
  :root .editor-context .layer-nav::-webkit-scrollbar{display:none;}
  :root .page-context .layer-nav button,
  :root .editor-context .layer-nav button{
    flex:1 0 auto;
    min-height:44px;
    padding:0 14px;
    font-size:13px;
    scroll-snap-align:center;
  }
  /* Breadcrumb: a compact back link to Library plus the current page name. */
  :root .page-context{flex-direction:column;align-items:stretch;gap:2px;margin:-6px 0 14px;padding-bottom:6px;}
  :root .page-context .breadcrumbs{font-size:13px;gap:8px;overflow:visible;}
  :root .page-context .breadcrumbs>:nth-child(2),
  :root .page-context .breadcrumbs>:nth-child(3),
  :root .page-context .breadcrumbs>:nth-child(4),
  :root .page-context .breadcrumbs>:nth-child(5){display:none;}
  :root .page-context .breadcrumbs>:first-child{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:var(--muted);
    font-weight:600;
    cursor:pointer;
  }
  :root .page-context .breadcrumbs>:first-child::before{content:"\2039";margin-right:6px;font-size:20px;line-height:1;}
  :root .page-context .breadcrumbs>:last-child{overflow:hidden;text-overflow:ellipsis;}

  /* "On this page": collapsed by default, sticky toggle, list opens inline. */
  :root .pr118-procedure-layout{display:flex!important;flex-direction:column;align-items:stretch!important;gap:12px!important;}
  :root .pr118-procedure-layout>.procedure-doc-index{
    order:-1;
    position:sticky!important;
    top:0!important;
    z-index:6;
    margin:0 -14px;
    padding:0 14px!important;
    border:0!important;
    border-bottom:1px solid var(--line)!important;
    background:var(--bg,var(--surface))!important;
  }
  :root .procedure-doc-index .pr118-summary-kicker,
  :root .procedure-doc-index .pr118-procedure-live{display:none!important;}
  :root .procedure-index-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:48px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:14px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }
  :root .procedure-index-toggle small{margin-left:auto;color:var(--muted);font-size:12px;font-weight:600;}
  :root .procedure-index-toggle i{
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .15s ease;
  }
  :root .procedure-doc-index.is-open .procedure-index-toggle i{transform:rotate(225deg) translate(-2px,-2px);}
  :root .procedure-index-toggle:focus-visible,
  :root .procedure-index-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
  :root .procedure-doc-index .procedure-index,
  :root .procedure-doc-index .procedure-key{display:none;}
  :root .procedure-doc-index.is-open .procedure-index{
    display:flex;
    max-height:min(60dvh,420px);
    overflow-y:auto;
    overscroll-behavior:contain;
    margin-bottom:10px;
  }
  :root .procedure-doc-index.is-open .procedure-key{display:block;margin:4px 0 12px;}
  :root .procedure-index-link{min-height:44px;grid-template-columns:32px minmax(0,1fr);align-items:center;padding:0;}
  :root .procedure-index-link span{font-size:12px;}
  :root .procedure-index-link strong{font-size:14px;}
  :root .procedure-key-head,
  :root .procedure-key-list>span{font-size:12px;}

  /* SOP header. */
  :root .v2-procedure-page .v2-sop-header>h2{font-size:12px;}
  :root .v2-procedure-page .v2-sop-grid dt{font-size:12px;}
  :root .v2-procedure-page .v2-sop-grid dd{font-size:14px;}

  /* Steps. */
  :root .pr118-procedure-page .procedure-item{padding:14px 12px 14px 10px!important;}
  :root .pr118-procedure-page .procedure-num{font-size:12px!important;}
  :root .pr118-procedure-page .procedure-item h3{font-size:16px!important;}
  :root .pr118-procedure-page .procedure-item p,
  :root .pr118-procedure-page .procedure-step-copy{font-size:14px!important;line-height:1.6!important;}
  :root .v2-procedure-page .v2-proc-type{font-size:12px;padding:3px 9px;}
  :root .v2-procedure-page .v2-proc-locate{min-height:44px;font-size:14px;padding:0 14px;}
  :root .v2-procedure-page .v2-proc-empty{font-size:14px;}

  /* Owner / role / system / duration: a clean two-column key and value list with no stray separators. */
  :root .pr118-procedure-page .procedure-meta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    gap:6px!important;
    margin-top:12px!important;
  }
  :root .pr118-procedure-page .procedure-meta span{
    display:grid;
    grid-template-columns:84px minmax(0,1fr);
    align-items:baseline;
    gap:8px;
    font-size:14px!important;
    line-height:1.4;
  }
  :root .pr118-procedure-page .procedure-meta span+span::before{content:none!important;display:none!important;}
  :root .pr118-procedure-page .procedure-meta b{margin:0;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
  :root .pr118-procedure-page .procedure-branches span{font-size:13px!important;}

  /* Inputs, outputs, documents, notes, annotations. */
  :root .procedure-doc-block h4,
  :root .procedure-annotations>h4{font-size:12px;}
  :root .procedure-doc-block li,
  :root .procedure-doc-block p,
  :root .pr118-procedure-page .procedure-note-box{font-size:14px!important;line-height:1.55;}
  :root .oroko-annotation-label,
  :root .oroko-annotation-label strong{font-size:12px;}
  :root .oroko-procedure-page .oroko-annotation-callout p,
  :root .oroko-annotation-callout.compact>p{font-size:14px!important;line-height:1.5;}
  :root .pr118-procedure-page .procedure-subprocess,
  :root .pr118-procedure-page .procedure-subprocess-open{min-height:44px;font-size:14px;}
}

/* ---------- Compact canvas chrome (phones and small tablets, Flow tab) ---------- */
@media(max-width:820px){
  /* One slim context row: the topbar already names the process, so the breadcrumb goes. */
  :root .editor-context{padding:6px 10px 0;gap:0;}
  :root .editor-context .breadcrumbs{display:none;}

  /* Toolbar: state switch on one row, Create Future State and the zoom controls sharing the next. */
  :root .editor-toolbar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap;
    align-items:center!important;
    gap:6px!important;
    padding:6px 10px!important;
  }
  :root .editor-toolbar .state-switch{flex:1 1 100%;order:1;}
  :root .editor-toolbar .state-switch button{min-height:40px;}
  :root .editor-toolbar .pr57-active-state{display:none!important;}
  :root .editor-toolbar .pr57-copy-state{flex:1 1 0;width:auto!important;order:2;min-height:40px;min-width:0;font-size:13px;white-space:nowrap;}
  :root .editor-toolbar .canvas-controls{
    order:3;
    flex:0 0 auto;
    width:auto!important;
    margin-left:auto;
    gap:4px;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    justify-content:flex-end;
  }
  :root .editor-toolbar .canvas-controls button{min-width:40px;min-height:40px;}
  :root .editor-toolbar .canvas-controls .zoom-label{min-width:34px;text-align:center;font-size:12px;}

  /* Canvas gets the height the chrome gave back. */
  :root .canvas-wrap{height:calc(100dvh - 248px);min-height:360px;}

  /* "Add to canvas": a small collapsed button; it opens its step menu and Start / End when tapped. */
  :root .canvas-palette{
    left:10px!important;
    top:10px!important;
    width:auto!important;
    min-width:0;
    padding:4px!important;
    gap:4px;
  }
  :root .canvas-palette .palette-title{display:none;}
  :root .canvas-palette .oroko-canvas-add{min-height:40px;width:auto;padding:0 12px;gap:6px;}
  :root .canvas-palette .oroko-canvas-add b{display:none;}
  :root .canvas-palette>button[data-special-type]{display:none;}
  :root .canvas-palette:has(.oroko-canvas-add[aria-expanded="true"])>button[data-special-type]{display:block;min-height:40px;}

  /* Docked palette (see dockPalette in pr28-canvas-workspace-v2.js). Floating over the pannable canvas it hid
     any step panned beneath it, and a hidden step cannot be tapped. On phones it sits in its own row above the
     canvas instead. Start and End open beside the button (a row, so the canvas never shifts), and the step menu
     opens over the canvas. */
  :root .canvas-wrap{display:flex!important;flex-direction:column;}
  :root .canvas-wrap>#canvas{flex:1 1 auto;min-height:0;height:auto!important;}
  :root .canvas-wrap>.canvas-palette.pr-palette-docked{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    flex:0 0 auto;
    align-self:flex-start;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center;
    gap:6px;
    width:auto!important;
    max-width:100%;
    min-height:50px;
    margin:0 0 8px;
    z-index:6;
  }
  :root .canvas-wrap>.canvas-palette.pr-palette-docked>button[data-special-type]{margin:0;white-space:nowrap;}
}

@media print{
  .procedure-index-toggle{display:none!important;}
}