/* Glimra – mobil och surfplatta (smala skärmar och pekskärm) */
html { -webkit-text-size-adjust: 100%; }
.sheet-x, .props-x, .v-props-x, .v-sheet-x, .rail .v-rail-props, .rail .rail-more, .l-short { display: none; }

/* Menyer som ark nedifrån (mobil) */
.ctx-sheet-back { position: fixed; inset: 0; z-index: 2000; background: rgba(18, 14, 34, .4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .16s; }
.ctx-sheet-back.show { opacity: 1; }
.ctx-menu.ctx-sheet { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; min-width: 0; border-radius: 18px 18px 0 0; padding: 14px 10px calc(10px + env(safe-area-inset-bottom)); max-height: 80vh; max-height: 80dvh; overflow-y: auto; transform: translateY(20px); transition: transform .18s; box-shadow: 0 -10px 40px rgba(30, 10, 20, .25); }
.ctx-sheet-back.show .ctx-sheet { transform: none; }
.ctx-sheet::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 4px; background: #ddd0d6; margin: -4px auto 10px; }
.ctx-sheet .ctx-item { min-height: 50px; font-size: 15.5px; gap: 14px; padding: 10px 14px; border-radius: 12px; }
.ctx-sheet .ctx-cancel { justify-content: center; font-weight: 600; margin-top: 6px; background: #f6f2f4; }

/* Pekskärm: inga hovringsberoende kontroller, större greppytor */
@media (hover: none) {
  .card .more, .v-mt-add { opacity: 1; }
  .swatch-lg .x { display: flex; }
}
@media (pointer: coarse) {
  .v-clip .hl, .v-clip .hr { width: 18px; }
  .v-selbox .v-sh { width: 22px; height: 22px; }
  .v-selbox .v-sh[data-h=se] { right: -12px; bottom: -12px; }
  .v-selbox .v-rot { width: 28px; height: 28px; top: -38px; }
  input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
}
.v-clip { touch-action: pan-x pan-y; }
.v-clip.sel, .v-clip.sel .hl, .v-clip.sel .hr { touch-action: none; }
.v-ruler, .v-playhead .knob { touch-action: none; }

@media (max-width: 900px) {
  body { font-size: 14px; }
  .modal-back { padding: 8px; align-items: flex-end; }
  .modal { border-radius: 16px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal-body { padding: 6px 16px 14px; }
  .modal-head { padding: 14px 12px 4px 16px; }
  .modal-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; padding: 0 12px; }
  .modal-body .row, .modal-body .chips { flex-wrap: wrap; }
  .modal-body img, .modal-body canvas { max-width: 100%; }
  .formats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .toast { max-width: 100%; }
  .popover { max-width: calc(100vw - 16px); }

  /* ---------- Dialoger för mallar och appar ---------- */
  /* Mallförhandsvisning: bilden överst, knapparna under */
  .tpl-preview { flex-direction: column; gap: 14px; }
  .tpl-preview .big { min-height: 0; padding: 12px; }
  .tpl-preview .big img { max-height: 42vh; max-height: 42dvh; }
  .tpl-preview .side { width: auto; }
  /* Matchinfo: fälten radbryts, lagen och målen får hela bredden */
  .mi { gap: 14px; }
  .mi-left { padding: 12px; }
  .mi-row { flex-wrap: wrap; row-gap: 10px; }
  .mi-row > .mi-fld { flex: 1 1 140px !important; min-width: 0; }
  .mi-row:has(> .icon-btn) > .mi-fld, .mi-row > .mi-fld:has(textarea) { flex-basis: 100% !important; }
  .mi-row > .icon-btn { margin: -4px auto; transform: rotate(90deg); }
  .mi-fld .row > .input { min-width: 0; }
  .mi-row > .mi-fld:has(select) { flex-basis: 100% !important; }
  .mi-fld .row { flex-wrap: nowrap !important; }
  .mi-fld .row > .select { flex: 1; min-width: 0; }
  .mi-fld input[type=date], .mi-fld input[type=time] { min-width: 0; width: 100%; }
  .mi-modal .modal-foot > .row { flex: 1 1 100%; margin-right: 0 !important; }
  /* Diagram: diagramtyperna radbryts */
  .modal .btn-row { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important; }
  /* Emoji-byggaren: förhandsvisningen överst, valen under */
  .em { grid-template-columns: 1fr; gap: 12px; }
  .em-prev { width: 180px; height: 180px; }
  .em-prev-img { width: 164px; height: 164px; }
  .em-right { max-height: none; overflow: visible; padding-right: 0; }
  .em-tiles { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
  /* Klubbmärken: sökrutan på egen rad */
  .cp-modal .modal-body .search { flex: 1 1 100%; }
  .cp-modal .modal-body { min-height: 0; }

  /* ---------- Startsidan ---------- */
  #view-home { flex-direction: column; height: 100vh; height: 100dvh; }
  .home-side { width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px 6px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-side .brand { padding: 0 4px; flex: 1; min-width: 0; }
  .home-side .brand img { width: 30px; height: 30px; }
  .home-side .brand span { font-size: 19px; }
  #btn-new { width: auto !important; margin: 0 !important; height: 38px !important; padding: 0 14px; flex: none; }
  #home-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; flex-direction: row !important; gap: 0 !important; height: calc(60px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(30, 10, 20, .06); }
  #home-nav .nav-btn { flex: 1 1 0; min-width: 0; height: 100%; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px; border-radius: 0; font-size: 10.5px; font-weight: 600; color: var(--muted); }
  #home-nav .nav-btn .ico { width: 22px; height: 22px; }
  #home-nav .nav-btn.active { background: none; color: var(--accent); }
  #home-nav .nav-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .l-long { display: none; } .l-short { display: inline; }
  .home-side .spacer, .home-side .foot, #btn-open-folder, #btn-folder { display: none; }
  #btn-open-file { order: 2; width: 38px; height: 38px; padding: 0; justify-content: center; }
  #btn-open-file span { display: none; }
  .home-main { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  .home-main .row { flex-wrap: wrap; }
  .home-main .row > .input { flex: 1 1 160px; width: auto !important; }
  .home-main img, .home-main canvas { max-width: 100%; }
  .hero { padding: 24px 14px 18px; border-radius: 16px; margin-bottom: 18px; }
  .hero h1 { font-size: 23px; margin-bottom: 14px; }
  .hero .search input { height: 44px; }
  .quick { gap: 6px; margin-top: 16px; }
  .quick button { width: 66px; font-size: 11px; }
  .quick button .qi { width: 46px; height: 46px; }
  .sec-head { margin: 20px 0 10px; flex-wrap: wrap; }
  .sec-head h2 { font-size: 17px; }
  .sec-head .row { width: 100%; }
  .sec-head .search { width: auto !important; flex: 1; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tpl-grid { columns: 2 130px; column-gap: 10px; }
  .tpl-grid .tcard .ti { min-height: 0; width: 100%; }
  .pack-banner .pk-thumbs { display: none; }

  /* ---------- Designeditorn ---------- */
  #view-editor { height: 100vh; height: 100dvh; }
  .topbar { height: calc(50px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0; gap: 2px; }
  .topbar .tb-btn { padding: 0 8px; }
  .topbar .tb-btn span, .topbar .save-state span, .topbar .btn-export span { display: none; }
  .topbar .title input { width: 100%; max-width: 40vw; font-size: 14px; }
  .topbar .btn-export { padding: 0 12px; height: 36px; }
  .ed-main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); position: relative; }
  .rail { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: calc(60px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); flex-direction: row; overflow: hidden; z-index: 70; gap: 0; }
  .rail button { flex: 1 1 0; min-width: 0; padding: 6px 1px; font-size: 10.5px; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #rail > button[data-tab]:nth-child(n+5) { display: none; }
  #rail .rail-more { display: flex; }
  .more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 6px; }
  .more-item { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--text); }
  .more-item .ri { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-l); color: var(--accent-d); display: flex; align-items: center; justify-content: center; }
  .more-item.active { border-color: var(--accent); background: var(--accent-l); }
  .rail button .ri { width: 36px; height: 28px; }
  .panel, .panel.closed { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto; height: 56vh; height: 56dvh; margin-left: 0 !important; z-index: 65; border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(30, 10, 20, .22); transition: transform .22s ease; }
  .panel.closed { transform: translateY(calc(100% + 80px)); }
  .panel-close { display: none; }
  .panel::before { content: ''; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #ddd0d6; }
  .panel .panel-head { padding-top: 18px; padding-right: 52px; }
  .sheet-x { display: flex; position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6f2f4; align-items: center; justify-content: center; color: var(--muted); z-index: 3; }
  .props, .props.closed { display: block; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto; height: 56vh; height: 56dvh; z-index: 66; border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(30, 10, 20, .22); padding: 18px 16px 30px; transition: transform .22s ease; }
  .props.closed { transform: translateY(calc(100% + 80px)); }
  .props-x { display: flex; position: fixed; right: 10px; bottom: calc(56vh + 60px - 46px + env(safe-area-inset-bottom)); width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6f2f4; align-items: center; justify-content: center; color: var(--muted); z-index: 67; }
  .props.closed + .props-x { display: none; }
  .ctxbar { flex-wrap: wrap; overflow: visible; min-height: 48px; padding: 5px 6px; gap: 2px; }
  .ctxbar .cb { height: 34px; padding: 0 8px; font-size: 13px; }
  .ctxbar .icon-btn, .ctxbar .color-btn { width: 34px; height: 34px; }
  .ctxbar .font-btn { min-width: 0; max-width: 130px; }
  .ctxbar .sep { display: none; }
  .ctxbar .size-ctl { height: 34px; }
  .ctx-hint { display: none; }
  .stage-inner { padding: 30px 14px 20px; }
  .pagebar { height: 84px; padding: 0 8px; gap: 6px; }
  .pthumb { height: 60px; } .pthumb .pi { height: 48px; }
  .padd { width: 48px; height: 48px; margin-top: -10px; }
  .zoom { width: auto; gap: 2px; }
  .zoom input[type=range], .zoom #zoom-out, .zoom #zoom-in { display: none; }
  .tpl-banner { font-size: 12px; }

  /* ---------- Videoredigeraren ---------- */
  #view-video { height: 100vh; height: 100dvh; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  #view-video .v-main { flex-direction: column; }
  #view-video .v-center { flex: 1; }
  #view-video .v-controls { height: 46px; padding: 0 8px; }
  #view-video .v-controls .v-cr { flex: none; }
  #view-video .v-controls .v-cr .v-keys-btn { display: none; }
  #view-video .v-controls .v-cl { flex: none; width: auto; }
  #view-video .v-cbtns { flex: 1; justify-content: flex-end; }
  #view-video .v-play { width: 38px; height: 38px; }
  #view-video .v-time { font-size: 12px; }
  /* Handtag ovanför tidslinjen: dra nedåt för större video, uppåt för större tidslinje */
  #view-video .v-resizer { display: block; height: 22px; background: #fff; border-top: 1px solid var(--line); touch-action: none; cursor: ns-resize; }
  #view-video .v-resizer::after { top: 8px; width: 46px; height: 5px; margin-left: -23px; background: #cdbcc3; }
  #view-video .v-resizer.drag::after { background: var(--accent); }
  #view-video .v-tl { height: 38vh !important; height: var(--tlh-m, 38dvh) !important; }
  #view-video.tl-mini .v-tl-scroll { visibility: hidden; }
  #view-video .v-tl-bar { height: 42px; padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
  #view-video .v-tl-bar::-webkit-scrollbar { display: none; }
  #view-video .v-tl-hint { display: none; }
  #view-video .v-tl-bar input[type=range] { max-width: 70px; min-width: 50px; }
  #view-video .v-tl-bar .cb span { display: none; }
  #view-video .v-head .tn { display: none; }
  #view-video .v-empty { white-space: normal; line-height: 1.3; font-size: 12px; }
  #view-video .v-head { padding-left: 6px; gap: 2px; }
  #view-video .rail { z-index: 70; }
  .rail .v-rail-props { display: flex; }
  .v-rail-props.has-sel .ri { background: rgba(159, 231, 207, .22); color: #9fe7cf; }
  #view-video .v-panel, #view-video .v-props { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto; height: 58vh; height: 58dvh; z-index: 65; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(30, 10, 20, .25); transition: transform .22s ease; }
  #view-video .v-panel.closed, #view-video .v-props:not(.open) { transform: translateY(calc(100% + 80px)); }
  #view-video .v-props { padding: 18px 16px 30px; overflow-y: auto; z-index: 66; }
  #view-video .v-panel::before, #view-video .v-props::before { content: ''; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #ddd0d6; }
  #view-video .v-props::before { position: sticky; display: block; margin: -11px auto 10px; left: auto; top: 0; }
  #view-video .v-panel .panel-head { padding-top: 18px; padding-right: 52px; }
  .v-sheet-x { display: flex; position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6f2f4; align-items: center; justify-content: center; color: var(--muted); z-index: 3; }
  #view-video .v-props .v-ph { padding-right: 40px; }
  #view-video .v-props.open + .v-props-x { display: flex; position: fixed; right: 10px; bottom: calc(58vh + 60px - 48px + env(safe-area-inset-bottom)); bottom: calc(58dvh + 60px - 48px + env(safe-area-inset-bottom)); width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6f2f4; align-items: center; justify-content: center; color: var(--muted); z-index: 67; }
  .v-media-grid { grid-template-columns: repeat(3, 1fr); }
  .v-tstyles { grid-template-columns: repeat(3, 1fr); }
  .v-ts { height: 64px; }
  .v-ts span { font-size: 16px !important; }
  .v-trgrid { grid-template-columns: repeat(4, 1fr); }
  .v-fgrid { grid-template-columns: repeat(4, 1fr); }
  body.v-open #toasts { top: calc(56px + env(safe-area-inset-top)); }
}

/* Surfplatta på högkant: smalare paneler */
@media (min-width: 901px) and (max-width: 1100px) {
  .panel { width: 290px; } .panel.closed { margin-left: -290px; }
  .props { width: 250px; }
  .v-panel { width: 270px; }
  .v-props { width: 260px; }
  .v-tl-hint { display: none; }
  .home-side { width: 210px; }
}