/* Maintenance Assistant slices: a real prototype page with its shell trimmed to fit a frame (see slice.js).
   Nothing here restyles the product. It removes the full-window sizing, keeps drawers and dialogs inside the part of the frame the
   visitor can see, and adds the phone and tablet layouts the prototype was never given (it was built for a desktop window).
   Poppins is served from this site's own fonts folder instead of Google Fonts; the colours, sizes and spacing are the product's. */

@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- frame ---------- */
html.gf-slice,
html.gf-slice body{height:auto;min-height:0;overflow:visible}
html.gf-slice.gf-embedded,
html.gf-slice.gf-embedded body{overflow:hidden}
html.gf-slice .page{width:100%;height:auto;min-height:0}
html.gf-slice .main{flex:none}

/* ---------- overlays: the frame can be far taller than the window, so these follow the visible part of it ---------- */
html.gf-embedded .backdrop,
html.gf-embedded .voice-backdrop,
html.gf-embedded .modal-backdrop,
html.gf-embedded .success-overlay,
html.gf-embedded .drawer{top:var(--gf-vt,0px);bottom:auto;height:var(--gf-vh,100%)}
html.gf-embedded .drawer{max-height:100%}
/* a dialog taller than the part of the frame the visitor can see keeps its title and its close button in view and scrolls its own list */
html.gf-embedded .modal{max-height:max(160px,calc(var(--gf-vh,100%) - 24px))}
html.gf-embedded .modal-body{min-height:0;overflow-y:auto}

/* ---------- toast (the product has none; links that leave the piece say so here) ---------- */
.gf-toast{position:fixed;z-index:600;left:50%;bottom:24px;max-width:calc(100% - 32px);padding:10px 16px;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;color:var(--txt);font-size:13px;line-height:1.45;text-align:center;box-shadow:0 8px 24px rgb(0 0 0 / .4);opacity:0;transform:translate(-50%,8px);transition:opacity .18s,transform .18s;pointer-events:none}
html.gf-embedded .gf-toast{bottom:auto;top:calc(var(--gf-vt,0px) + var(--gf-vh,100vh) - 64px)}
.gf-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- home: the full-window hero becomes a framed one ---------- */
html.gf-slice[data-page="home"] .page{min-height:480px}
html.gf-slice[data-page="home"] .hero{padding:88px 32px 56px}
html.gf-slice[data-page="home"] .hero-inner{width:100%}
html.gf-slice[data-page="home"] .search-wrapper{margin:0 auto}

/* ---------- results: the sources list repeats the "3 sources" link, and the follow-up bar is a second search box, so the frame keeps the answer ---------- */
html.gf-slice[data-page="results"] .sources-section{display:none}
html.gf-slice[data-page="results"] .followup-section{display:none}
html.gf-slice[data-page="results"] .main{padding-top:32px}
html.gf-slice[data-page="results"] .results{margin-bottom:0}

/* ---------- manuals: a card's date and actions may not fit side by side in a narrow column ---------- */
html.gf-slice .manual-footer{flex-wrap:wrap}
html.gf-slice .manual-actions{flex-shrink:1;flex-wrap:wrap}

/* ---------- manuals: a library scrolls inside its frame, with the product header pinned ---------- */
html.gf-slice.gf-embedded[data-page="manuals"],
html.gf-slice.gf-embedded[data-page="manuals"] body{overflow:auto;scrollbar-color:var(--bdr) var(--bg)}
html.gf-slice[data-page="manuals"] .stats-bar{display:none}

/* ---------- tablet and below ---------- */
@media (max-width:900px){
  html.gf-slice .nav{padding:0 24px}
  html.gf-slice .main{padding:32px 24px 40px;gap:24px}
  html.gf-slice .manual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.gf-slice .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  /* where the prototype stacks the ticket form's side panels under it, the frame leaves them out: the form is the piece */
  html.gf-slice[data-page="ticket"] .panel{display:none}
}

/* drawers keep their scroll to themselves */
html.gf-slice .notif-list,
html.gf-slice .sb-nav,
html.gf-slice .modal-body{overscroll-behavior:contain}

/* ---------- phone ---------- */
@media (max-width:640px){
  /* iOS zooms the page when a field under 16px takes focus */
  html.gf-slice input,
  html.gf-slice textarea,
  html.gf-slice select{font-size:16px}
  html.gf-slice .nav{padding:0 16px;gap:12px}
  html.gf-slice .main{padding:24px 16px 32px;gap:20px}
  html.gf-slice .search-nav{min-width:0;overflow:hidden}
  html.gf-slice .search-nav input{min-width:0;width:100%}      /* the field keeps the width of its placeholder otherwise, and runs under the bell */
  html.gf-slice .nav-right{gap:12px}
  html.gf-slice .modal{width:100%}
  html.gf-slice .modal-head,
  html.gf-slice .modal-body{padding-left:16px;padding-right:16px}

  /* home */
  html.gf-slice[data-page="home"] .topbar{padding:12px 16px;gap:12px}
  html.gf-slice[data-page="home"] .topbar-name{display:none}
  html.gf-slice[data-page="home"] .hero{padding:80px 16px 48px}
  html.gf-slice[data-page="home"] .hero-inner{gap:32px}
  html.gf-slice[data-page="home"] .brand{flex-direction:column;gap:12px;text-align:center}
  html.gf-slice[data-page="home"] .brand-name{font-size:24px;white-space:normal}
  html.gf-slice[data-page="home"] .search-bar-row{flex-wrap:wrap}
  html.gf-slice[data-page="home"] .search-bar-row .search-hero{flex:1 1 100%;min-width:0;padding:0 16px}
  html.gf-slice[data-page="home"] .search-hero input{min-width:0}      /* Safari and Firefox keep an input as wide as its placeholder, which pushed the attach and mic buttons out of the frame */
  html.gf-slice[data-page="home"] .search-bar-row .btn-primary-lg{width:100%}
  html.gf-slice[data-page="home"] .action-row{gap:8px}
  html.gf-slice[data-page="home"] .action-row .btn-secondary{flex:1 1 calc(50% - 8px);padding:0 10px;font-size:13px}

  /* results */
  html.gf-slice .query-box{padding:12px 16px;flex-wrap:wrap}
  html.gf-slice .query-meta{flex-direction:row-reverse;align-items:center;width:100%;justify-content:space-between}
  html.gf-slice .answer-summary{padding:16px}
  html.gf-slice .answer-box{padding:12px 16px}
  html.gf-slice .acc-trigger{padding:14px 16px}
  html.gf-slice .acc-inner{padding:0 16px 16px}
  html.gf-slice .steps{padding:12px 16px}
  html.gf-slice .full-answer{padding:12px 16px}
  html.gf-slice .video-grid{grid-template-columns:minmax(0,1fr)}
  html.gf-slice .feedback{padding:16px}
  html.gf-slice .feedback-left{flex-wrap:wrap}
  html.gf-slice .followup-bar{padding:0 12px}
  html.gf-slice .followup-actions .btn-primary{padding:0 12px}

  /* upload */
  html.gf-slice .upload-card{padding:20px 16px;gap:24px}
  html.gf-slice .dropzone{padding:24px 16px;text-align:center}
  html.gf-slice .footer-actions{flex-wrap:wrap}

  /* ticket */
  html.gf-slice .form-card{padding:20px 16px;gap:24px}
  html.gf-slice .form-row-2{grid-template-columns:minmax(0,1fr)}
  html.gf-slice .priority-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.gf-slice .form-footer{flex-wrap:wrap}
  html.gf-slice .success-modal{padding:32px 20px;max-width:calc(100% - 32px)}

  /* manuals */
  html.gf-slice .manual-grid{grid-template-columns:minmax(0,1fr)}
  html.gf-slice .page-header{gap:16px}
  html.gf-slice .toolbar-search{min-width:0;flex:1 1 100%;max-width:none}
}

/* ---------- the whole prototype on a phone (m/*.html): the page scrolls inside the frame, and the three pages the five slices never showed get a phone layout too ---------- */
html.gf-slice[data-whole],
html.gf-slice.gf-embedded[data-whole]{overflow:auto}
html.gf-slice[data-whole] body,
html.gf-slice.gf-embedded[data-whole] body{overflow:visible}

@media (max-width:900px){
  /* settings: the list of sections becomes a row of tabs above the content */
  html.gf-slice[data-page="settings"] .settings-layout{flex-direction:column;min-height:0}
  html.gf-slice[data-page="settings"] .settings-nav{width:auto;height:auto;position:static;flex-direction:row;gap:4px;padding:8px 16px;border-right:0;border-bottom:1px solid var(--bdr);overflow-x:auto;overflow-y:hidden}
  html.gf-slice[data-page="settings"] .settings-nav-label,
  html.gf-slice[data-page="settings"] .settings-nav-divider{display:none}
  html.gf-slice[data-page="settings"] .settings-nav-item{flex:none;width:auto;padding:10px 14px;white-space:nowrap;border-radius:8px}
  html.gf-slice[data-page="settings"] .settings-nav-item.active::before{left:14px;right:14px;top:auto;bottom:3px;width:auto;height:3px;border-radius:3px}
  html.gf-slice[data-page="settings"] .settings-content{padding:24px 16px 96px;gap:32px}
  html.gf-slice[data-page="settings"] .save-bar{left:0;padding:0 16px}
  /* my tickets and how to use */
  html.gf-slice[data-page="tickets"] .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.gf-slice[data-page="faqs"] .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* the ticket table needs about 800px, so below that each row becomes a card: id and actions on the first line, the title under them, then the rest */
  html.gf-slice[data-page="tickets"] .table-head{display:none}
  html.gf-slice[data-page="tickets"] .ticket-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 16px}
  html.gf-slice[data-page="tickets"] .ticket-id{order:1}
  html.gf-slice[data-page="tickets"] .ticket-actions{order:2;margin-left:auto}
  html.gf-slice[data-page="tickets"] .ticket-title-cell{order:3;flex:1 1 100%}
  html.gf-slice[data-page="tickets"] .ticket-name{white-space:normal}
  html.gf-slice[data-page="tickets"] .ticket-row>:not(.ticket-id):not(.ticket-actions):not(.ticket-title-cell){order:4}
  html.gf-slice[data-page="tickets"] .toolbar-search{min-width:0;flex:1 1 100%}
}
@media (max-width:640px){
  html.gf-slice[data-page="settings"] .group-title{padding:14px 16px 10px}
  html.gf-slice[data-page="settings"] .setting-row{flex-wrap:wrap;padding:16px;gap:12px}
  html.gf-slice[data-page="settings"] .setting-label{flex:1 1 180px}
  html.gf-slice[data-page="settings"] .setting-row .setting-select{width:100%}
  html.gf-slice[data-page="settings"] .setting-row .setting-input{width:100%;min-width:0}
  html.gf-slice[data-page="settings"] .setting-control{min-width:0}
  html.gf-slice[data-page="settings"] .setting-control:has(.setting-select,.setting-input){flex:1 1 100%}
  html.gf-slice[data-page="settings"] .setting-control>.setting-input{width:auto;flex:1 1 0}
  html.gf-slice[data-page="settings"] .notif-type-row{flex-wrap:wrap;padding:14px 16px}
  html.gf-slice[data-page="settings"] .notif-type-label{flex:1 1 calc(100% - 52px)}
  html.gf-slice[data-page="settings"] .notif-toggles{margin-left:52px}
  html.gf-slice[data-page="settings"] .avatar-row{flex-wrap:wrap;gap:16px}
  html.gf-slice[data-page="tickets"] .stat-card{padding:16px}
  html.gf-slice[data-page="tickets"] .detail-drawer{width:100%}
  html.gf-slice[data-page="faqs"] .features-grid{grid-template-columns:minmax(0,1fr)}
  html.gf-slice[data-page="faqs"] .how-hero{flex-direction:column;align-items:flex-start;gap:20px;padding:24px}
  html.gf-slice[data-page="faqs"] .how-step{padding:16px;gap:14px}
  html.gf-slice[data-page="faqs"] .tab-nav{overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){
  html.gf-slice *,
  html.gf-slice *::before,
  html.gf-slice *::after{animation:none!important;transition-duration:.001ms!important}
}