/* The end of admin-console.css, in a file of its own: the console and the public pages at a laptop's, a tablet's
   and a phone's width (1240, 1100, 800 and 640 px) and with reduced motion. Every page links it right after
   admin-console.css and before admin-public.css: the cascade is the one of the single file. */
/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .app { --side-w: 248px; }
  .page { padding: 20px 24px 64px; }
  .top { padding: 10px 24px; }
  .g-list { grid-template-columns: minmax(0, 1fr); }
  .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-list > .stack-lg:first-child { display: contents; }
  .g-list .later { order: 2; }
  .settings-tiles { grid-template-columns: minmax(0, 1fr); }
  .settings-tiles > div { border-left: 0; border-top: 1px solid var(--u-line); }
  .settings-tiles > div:first-child { border-top: 0; }
}
/* a phone: the navy column becomes a band on top, its places wrap into rows; headers wrap instead of widening */
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .side { position: relative; height: auto; overflow: visible; padding: 10px 12px 12px; background: var(--u-brand-bg); border-bottom: 1px solid var(--u-brand-line); }
  .side .brand { padding: 2px 96px 10px 4px; }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-group { display: none; }
  .nav a { height: 30px; padding: 0 9px; gap: 7px; font-size: 13px; background: color-mix(in srgb, var(--u-brand-on) 45%, transparent); }
  .nav a .ic { width: 15px; height: 15px; }
  .nav .count, .nav .live { margin-left: 2px; }
  .side-foot { position: absolute; top: 10px; right: 10px; margin: 0; padding: 0; border: 0; gap: 6px; }
  .side-foot .who { display: none; }
  .side-foot .avatar { width: 28px; height: 28px; }
  .top { position: static; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .top .title { flex: 1 1 100%; }
  .top .actions { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
  .top .sep { display: none; }
  .top .lang { margin-left: auto; }
  .page { padding: 16px 12px 56px; gap: 14px; }
  .g-2, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .plist { grid-template-columns: minmax(0, 1fr); }
  .panel-h, .section-h { flex-wrap: wrap; }
  .panel-h { padding: 8px 12px; }
  .panel-h h2, .section-h h2 { white-space: normal; min-width: 0; }
  .panel-h .meta, .section-h .meta { order: 3; flex-basis: 100%; }
  .panel-b, .req, .pod { padding: 12px; }
  .panel-f { padding: 10px 12px; flex-wrap: wrap; }
  .rows > li, .attn li { padding: 10px 12px; }
  .attn li { flex-wrap: wrap; gap: 10px 14px; }
  .attn .text { flex: 1 1 200px; }
  .attn .btn { margin-left: 44px; }
  .attn .attn-acts, .al-list .al-acts { margin-left: 44px; }
  .al-list .al-d { white-space: normal; }
  .rows.kv > li { padding: 9px 12px; }
  .t th, .t td { padding-left: 12px; padding-right: 12px; }
  .seg { flex-wrap: wrap; }
  .empty-cell { text-align: left; }  /* a wide table scrolls: the "nothing yet" line starts in view */
  .pod { grid-template-columns: minmax(0, 1fr); }
  .pod-acts { justify-content: flex-start; }
  .req-act { grid-template-columns: minmax(0, 1fr) auto; }
  .req-act > :first-child { grid-column: 1 / -1; }
  .filters { padding: 10px 12px; }
  .filters .input-icon { flex-basis: 100%; max-width: none; }
  .filters .select { flex: 1 1 140px; min-width: 0; }
  .overlay { padding: 12px; }
  .dialog { max-height: calc(100vh - 24px); }
  .dialog-h { padding: 16px 16px 0; }
  .dialog-b { padding: 14px 16px; }
  .dialog-f { padding: 12px 16px; }
  .toast { right: 16px; bottom: 16px; }
}
@media (max-width: 640px) {
  .pub-top { padding: 12px 16px; }
  .pub-main { padding: 16px 16px 40px; }
  .pub-foot { padding: 14px 16px 18px; }
  .auth-card { padding: 20px 18px 22px; }
  .invite-head h1 { font-size: 24px; }
  .invite-head .lead { font-size: 14.5px; }
  .can { grid-template-columns: minmax(0, 1fr); }
  .can > div { border-left: 0; border-top: 1px solid var(--u-line); }
  .can > div:first-child { border-top: 0; }
  .only-mobile { display: block; }
  .only-desktop { display: none !important; }
  .lang .seg span { padding: 4px 8px; }
  .dl .btn { flex: 1 1 140px; }
  .steps-panel { padding: 16px 14px 18px; }
  /* the profile's rules: the rule goes under its action instead of off the screen */
  [data-page=profiles] table.t, #pf-tools { display: block; }
  [data-page=profiles] .t thead { display: none; }
  #pf-tools tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--u-line); }
  #pf-tools tr:last-child { border-bottom: 0; }
  #pf-tools td { border-bottom: 0; }
  #pf-tools tr.group td { grid-column: 1 / -1; }
  #pf-tools td.act { grid-column: 1 / -1; text-align: left; white-space: normal; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pill.wait::before, .spin { animation: none; }
}