/* ================= mobile layer =================
   Loaded last on Inhalt (index.html), Technik (technik.html) and the login gate.
   Only phone/tablet fixes live here; desktop layout stays in style.css / x.css. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.iconbtn{padding:7px 9px!important;display:inline-grid;place-items:center}
[hidden],.gp-row[hidden]{display:none!important}   /* .gp-row's display:flex beat the hidden attribute */

/* touch screens have no hover: show controls that otherwise appear on hover */
@media(hover:none){
  .board-actions{opacity:1}
  .tk-person:hover,.tk-doc:hover{transform:none}
}

/* ---------- tablet & phone ---------- */
@media(max-width:900px){
  /* section headers: title on its own line, controls wrap underneath */
  .tk-sec-head{flex-wrap:wrap;align-items:center;row-gap:10px}
  .tk-sec-head h2{flex:1 0 100%}
  .tk-sec-head .tk-sub{flex:1 0 100%;margin-top:-6px}
  .tk-sec-head .btn{white-space:nowrap;margin-left:auto}
  .tk-sec-head .tk-spacer{display:none}
  .tk-crew{grid-template-columns:1fr}
  .tk-docs{grid-template-columns:1fr}

  .loc-bar{flex-wrap:wrap;row-gap:8px}
  .board-head{flex-wrap:wrap;row-gap:8px}
  .board-actions{flex:1 1 100%;flex-wrap:wrap;min-width:0}
  .arc-col,.arc-ep{min-width:0}
  .arc-ep-head{flex-wrap:wrap;row-gap:8px}
}

/* ---------- phone ---------- */
@media(max-width:640px){
  :root{--topbar-h:54px}
  .topbar{gap:6px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
    padding-top:env(safe-area-inset-top);height:calc(var(--topbar-h) + env(safe-area-inset-top))}
  .topbar .brand,.topbar .secbadge{display:none}
  .topbar .navsel{min-width:0;max-width:60vw}
  .topbar .btn{padding:8px 10px;min-height:38px}
  .topbar .blbl{display:none}
  .navmenu{top:calc(var(--topbar-h) + env(safe-area-inset-top) - 2px);left:8px;right:8px;max-width:none}
  .navmenu-item{padding:13px 16px;font-size:13px}

  main{padding:14px 12px calc(84px + env(safe-area-inset-bottom))}
  .tk-main{padding:14px 12px calc(60px + env(safe-area-inset-bottom))}

  /* iOS zooms into any input below 16px — keep text fields at 16px */
  input[type=text],input[type=search],input[type=password],input[type=email],input[type=tel],
  input:not([type]),textarea,select,.search{font-size:16px!important}

  /* chips: one swipeable row instead of a tall wrapped block */
  .filters{gap:10px}
  .filters .chiprow,.tk-sec-head .chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    max-width:100%;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .filters .chiprow::-webkit-scrollbar,.tk-sec-head .chiprow::-webkit-scrollbar{display:none}
  .fchip{flex:none}
  .filters .search{flex:1 1 100%;max-width:none}
  .filters .fsep{display:none}
  .lsize{display:none}            /* image-size slider: one column anyway */

  /* chat: smaller bubble, dock fills the screen */
  .chat-fab{width:50px;height:50px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .chat-dock{left:0!important;right:0!important;bottom:0!important;top:auto;width:auto!important;
    max-width:none!important;height:min(82vh,640px);height:min(82dvh,640px);border-radius:16px 16px 0 0;transform-origin:bottom center;
    padding-bottom:env(safe-area-inset-bottom)}

  /* overlays use the full width */
  .sidebar{width:100vw;max-width:100vw;height:100dvh}
  .ck-ov .ck{width:calc(100vw - 20px);max-width:none;margin-top:10px}
  .ck-foot{display:none}
  .show .nav{width:44px;height:44px}

  /* Inhalt pages */
  .loc-bar .notion-meta{flex:1 0 100%}
  .board-head{gap:10px}
  .board-actions .btn{padding:7px 11px;font-size:11.5px}
  .sd-search{flex-wrap:wrap}
  .sd-search .btn{flex:none}
  .paste-hint{display:none}       /* Strg+V paste tips are desktop-only */

  /* Technik header strip */
  .tk-hero{padding:14px 15px;gap:8px 16px;border-radius:13px;margin-bottom:16px}
  .tk-hero h1{font-size:24px}
  .tk-sec-head h2{font-size:20px}

  /* crew card: notes/comments drop below the contact block */
  .tk-person{flex-wrap:wrap;padding:12px;gap:11px}
  .tk-person .tk-p-main{flex:1 1 0}
  .tk-person .tk-cm{flex:1 0 100%}
  /* call / mail / delete become a row under the contact block, aligned with the text */
  .tk-p-act{order:2;flex:1 0 100%;flex-direction:row;padding-left:55px}
  .tk-p-act .tk-del{margin-left:auto}
  .tk-person .tk-cm{order:3}
  .tk-ic{width:38px;height:38px;font-size:15px}
  .tk-person input{font-size:15px!important}
  .tk-p-name{font-size:17px!important}

  .tk-filters input{flex:1 1 100%;min-width:0}
  .tk-cm-new{min-width:0}
  .tk-cm-new input,.tk-cm-new textarea{flex:1 1 0;min-width:0}
  .tk-cm-add{flex:none}
  .tk-filters select{flex:1 1 auto;min-width:0}
}

/* login gate on phones: stack the Technik fields, let the hint breathe */
@media(max-width:640px){
  .gate-top{padding-top:max(12px,env(safe-area-inset-top))}
  .gate-sec{display:none}
  .gp-form,.gp-form2{width:100%}
  .gp-row{flex-direction:column}
  .gp-inner,.gate[data-locked] .gp-inner{width:auto!important;max-width:none!important}
  .gp-form input{font-size:16px!important;min-width:0;flex:1 1 0;width:auto}
  .gp-form button{flex:none}
  .gp-form2 button{align-self:stretch;justify-content:center}
  .gate[data-locked="technik"] .gp-technik .gp-form{max-height:300px}
  .gate[data-locked="technik"] .gp-technik .gp-hint{max-height:160px}
}

/* very narrow (iPhone SE / mini) */
@media(max-width:380px){
  .topbar .navsel{max-width:52vw}
  .topbar .btn{padding:8px}
}