/*
 * Phone layout for the admin pages (documents list, document dashboard / viewers / TLDR / settings, team and
 * personal settings). Linked right after funraise.webflow.css. Every rule sits inside the max-width query, so
 * tablet and desktop render exactly as the Webflow export does.
 * Some selectors are deliberately one class deeper than they look necessary: the page scripts inject their own
 * <style> tags and the server links dropdown.css after this file, so equal specificity would lose on order.
 */
@media screen and (max-width: 767px) {

  /* ---------- Shell: the top bar keeps logo, icon-only nav links and the account name ---------- */

  .adminnav {
    height: 56px;
    padding: 0 8px 0 12px;
  }

  .adminlogo {
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: -6px;
    margin-right: -2px;
    padding: 6px;
  }

  .alignnav {
    flex: 1;
    width: auto;
    min-width: 0;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .adminnav .navlink {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
  }

  .adminnav .navlink-icon {
    flex: none;
    width: 18px;
    height: 18px;
  }

  .adminnav .alignnav .navlink > div {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sidenav-row {
    flex: none;
    min-width: 0;
  }

  .sidenav-row .navlink {
    max-width: 150px;
  }

  .sidenav-row .navlink > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2em;
  }

  .adminpage {
    padding-top: 16px;
    padding-bottom: 48px;
  }

  .admincontainer {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .admincontainer .admincontainer {
    padding-left: 0;
    padding-right: 0;
  }

  .admincontainer._30 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .pagehead,
  .documenttitle,
  .tableblock,
  .headertitle {
    overflow-wrap: break-word;
  }

  /* ---------- Document page header: title, full-width actions, tabs ---------- */

  .pageheader {
    position: relative;
    margin-bottom: 20px;
  }

  .pageheader-row {
    flex-direction: column;
    align-items: stretch;
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-bottom: 4px;
  }

  .pageheader-row > .alignrow._10 {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .pageheader-row > .alignrow._10 > div {
    min-width: 0;
  }

  .pagehead {
    font-size: 22px;
    line-height: 1.3em;
  }

  .pageheader #dash-title.pagehead {
    font-size: 20px;
  }

  .pageheader-row > .alignrow._5 {
    width: 100%;
  }

  .pageheader-row > .alignrow._5 > .button {
    flex: 1;
  }

  .pagenavs {
    grid-column-gap: 0;
    grid-row-gap: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pagenavs::-webkit-scrollbar {
    display: none;
  }

  .pagelink {
    flex: 1 0 auto;
    min-height: 44px;
    padding: 14px 8px;
    font-size: 13.5px;
    letter-spacing: 0;
  }

  .pagelink .navlink-icon {
    display: none;
  }

  /* ---------- Documents list rows (also the Settings version card) ---------- */

  .documentrow {
    flex-direction: column;
    align-items: stretch;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 8px;
  }

  .documentrow > .alignrow {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    min-width: 0;
  }

  .documentrow .documentthumb {
    flex: none;
    width: 112px;
    padding: 3px;
  }

  .documentrow .documentinfo {
    flex: 1;
    min-width: 0;
  }

  .documentrow .documenttitle {
    font-size: 16px;
    line-height: 1.3em;
  }

  .documentrow > .alignrow:last-child:not(:first-child) {
    flex-wrap: wrap;
    justify-content: flex-start;
    border-top: 1.5px solid #ffffff0d;
    padding-top: 8px;
  }

  .documentrow .dividespace {
    display: none;
  }

  .adminwrapper .documentrow .sociallinks {
    opacity: 1;
    margin-left: auto;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .rowlink {
    width: 44px;
    height: 44px;
  }

  .rowlink-icon {
    width: 18px;
    height: 18px;
  }

  /* ---------- Dashboard chart: filters, 2x2 stats, bars that shrink with the width ---------- */

  .chartwrapper {
    height: auto;
  }

  .chartheader:not(.bottom) {
    flex-wrap: wrap;
    height: auto;
    min-height: 50px;
  }

  .chartstats-row {
    flex-wrap: wrap;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    padding: 10px;
  }

  .chartstats-block {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    padding: 12px 8px;
  }

  .chartstat-label {
    letter-spacing: 1px;
  }

  .chartswrapper {
    flex: none;
    height: 200px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .slidecol {
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }

  .chartlabel {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 11px;
    overflow: hidden;
  }

  .chartheader.bottom {
    padding-left: 4px;
    padding-right: 4px;
  }

  .slidelabel {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 11px;
    overflow: hidden;
  }

  /* Long decks: labels that cannot fit a column shrink, then give way to the bars (column counts via :has). */
  #dash-bars:has(> .slidecol:nth-child(14)) .chartlabel {
    font-size: 9px;
  }

  #dash-bars:has(> .slidecol:nth-child(17)) .chartlabel {
    visibility: hidden;
  }

  #dash-labels:has(> .slidelabel:nth-child(25)) .slidelabel {
    overflow: visible;
  }

  #dash-labels:has(> .slidelabel:nth-child(25)) .slidelabel:not(:first-child):not(:nth-child(5n)) > div {
    visibility: hidden;
  }

  /* ---------- Viewer tables (dashboard Top Viewers, Viewers): who on its own line, four stat columns under it ---------- */

  #dash-rows .tablerow,
  #viewers-rows .tablerow {
    flex-wrap: wrap;
  }

  #dash-rows .tablerow:not(.footer) > .tableblock,
  #viewers-rows .tablerow:not(.footer) > .tableblock {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 2px 4px 12px;
    text-align: center;
  }

  #dash-rows .tablerow:not(.footer) > .tableblock.first,
  #viewers-rows .tablerow:not(.footer) > .tableblock.first {
    flex: 1 0 100%;
    justify-content: flex-start;
    padding: 12px 12px 8px;
    text-align: left;
  }

  #dash-rows .tablerow.header > .tableblock.first,
  #viewers-rows .tablerow.header > .tableblock.first {
    display: none;
  }

  #dash-rows .tablerow.header > .tableblock,
  #viewers-rows .tablerow.header > .tableblock {
    padding: 12px 4px;
    font-size: 10px;
    letter-spacing: .5px;
    line-height: 1.2em;
  }

  #dash-rows .tablerow.dash-empty > .tableblock.first,
  #viewers-rows .tablerow.dash-empty > .tableblock.first {
    padding-bottom: 12px;
  }

  #dash-rows .tableblock.wide,
  #viewers-rows .tableblock.wide {
    flex-direction: column;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  #dash-rows .tablerow:not(.header) .tableblock.wide .completioncircle,
  #viewers-rows .tablerow:not(.header) .tableblock.wide .completioncircle {
    width: 100%;
    max-width: 72px;
    height: 20px;
  }

  #dash-rows .completionprogress,
  #viewers-rows .completionprogress {
    height: 100%;
  }

  .tableblock .oppcontent,
  .tableblock .oppcontent > div {
    min-width: 0;
  }

  .adminwrapper #viewers-rows .tableblock.first .quicklinks-floater {
    opacity: 1;
    padding-left: 8px;
    padding-right: 8px;
  }

  #viewers-rows .tableblock.first:has(.quicklinks-floater) {
    padding-right: 60px;
  }

  .quicklinks-floater .quicklinks {
    min-width: 44px;
    height: 44px;
  }

  .tablelink-block {
    min-height: 44px;
  }

  .breadcrumbblock {
    min-width: 44px;
    height: 44px;
  }

  /* Team members table: name and action share a line when they fit, the invite inputs stack. */
  .tablerow {
    flex-wrap: wrap;
  }

  .tableblock.first {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
  }

  .tableblock.last {
    flex: none;
  }

  .tablelink-block.first {
    width: auto;
  }

  /* ---------- Forms (Settings, TLDR, Team, Personal): one column, side card after the form ---------- */

  .contentform,
  .formcol,
  .formblock {
    min-width: 0;
  }

  .formwrap {
    flex-direction: column;
    align-items: stretch;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .formcol.wide {
    width: 100%;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .sidecard {
    width: auto;
    position: static;
  }

  .formrow {
    flex-direction: column;
  }

  .rowcard.downmain {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 14px;
  }

  .prompt-block {
    min-width: 0;
  }

  .prompt-block .alignrow._5 {
    flex-wrap: wrap;
  }

  .prompt-block .alignrow._5 > .textfield {
    flex: 1 1 120px;
    min-width: 0;
  }

  .alignrow.sides {
    flex-wrap: wrap;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .alignrow.sides > .alignrow._5:first-child {
    flex: 1 1 100%;
  }

  .textfield.displayfield {
    overflow: hidden;
  }

  .textfield.displayfield > div:first-child {
    white-space: nowrap;
    overflow: hidden;
  }

  /* iOS zooms into any field under 16px when it gets focus. */
  .adminwrapper input.w-input,
  .adminwrapper textarea,
  .adminwrapper select,
  .adminwrapper .textfield {
    font-size: 16px;
  }

  .adminwrapper .slides-dropdown .slides-dropdown-trigger {
    font-size: 16px;
  }

  .textfield.long {
    height: 100px;
  }

  /* ---------- Touch targets ---------- */

  .button {
    min-height: 44px;
  }

  .button.floating {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .toggleswitch {
    overflow: visible;
  }

  .toggleswitch::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }

  .deleteicon {
    width: 44px;
    height: 44px;
  }

  .deleteicon.spacetop {
    margin-top: 2px;
  }

  .draggingblock {
    min-width: 28px;
    min-height: 44px;
  }

  .draggingblock.spacetop {
    margin-top: 2px;
  }

  .colorpicker {
    width: 44px;
    height: 44px;
  }

  .adminwrapper .slides-dropdown.is-compact .slides-dropdown-trigger {
    height: 44px;
  }

  .adminwrapper .slides-dropdown .slides-dropdown-menu {
    max-width: calc(100vw - 32px);
  }

  .adminwrapper .slides-dropdown .slides-dropdown-option {
    height: 44px;
    font-size: 15px;
  }

  .tableitem-logo {
    width: 44px;
    height: 44px;
  }
}