/* Games In Class: phone layer (1.47.0)
   Loaded LAST on every site page (from includes/footer.php, after each page's own stylesheet), so on phones one set of sizes wins everywhere.
   Desktop and tablets wider than 640px are not touched by anything in this file except the header Back button.

   The idea: one scale instead of many per-page fixes.
   - Text: the root size drops to 15px on phones and 14px on small phones (iPhone with Display Zoom / larger text is 320-375px wide),
     so everything sized in rem shrinks together. Text boxes stay 16px so iOS does not zoom in when one is tapped.
   - One gutter: 12px page edge on phones, 10px on small phones; panels 14px / 12px inside. No negative margins, so the left and right
     edges of panels, tables, notes and cards line up down the page.
   - One outline: the page's --ds-bw (2px on phones), 10-12px corners, a thin flat shadow (see tokens.css).
   - Controls: 36-38px tall, headings sized down, long words wrap between words (never mid-word). */

@media (max-width:640px){
  html{font-size:15px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  :root{--radius:12px;--shadow:0 2px 0 var(--hard);--shadow-sm:0 1px 0 var(--hard)}
  body{line-height:1.5}

  /* header: Back | logo .......... menu, language, theme, account */
  .header-container{padding:8px 12px;gap:8px}
  .nav-burger,.theme-toggle,.auth-area .nav-btn,.hdr-back{--hb:38px}
  .theme-toggle,.hdr-back{width:38px;height:38px}
  .hdr-back{margin-right:-2px}
  .logo-svg{height:34px}
  .auth-area{gap:6px;margin-left:6px}

  /* page edge and type scale */
  .page-content{padding:14px 12px 40px}
  h1,.page-content h1{font-size:1.5rem;line-height:1.2;margin-bottom:.35em}
  h2{font-size:1.25rem}
  h3{font-size:1.08rem}
    .page-head p,.lib-head p,.hub-head p{font-size:.92rem}
  p{overflow-wrap:break-word}
  .muted.small,.small{font-size:.82rem}

  /* blocks: same edge, same outline */
  .panel .panel{padding:12px}
  .page-content .panel[style*="padding"]{padding:14px!important}
    .table-wrap{margin-left:0;margin-right:0;border-radius:12px}
  .alert{padding:10px 12px;margin-bottom:12px;font-size:.92rem}
  .hif{padding:10px 12px;margin-bottom:14px;border-width:var(--ds-bw)}
  .hif summary{font-size:.95rem}
  .set-note{padding:10px 12px;gap:8px 10px;font-size:.92rem}
  .set-note>i{font-size:1.05rem;align-self:flex-start;margin-top:3px}
  .set-note>div{min-width:0;flex:1 1 calc(100% - 36px)}
    .modal-box{max-height:88vh}
  .stack{gap:12px}

  /* buttons, chips: sizes now come from components.css (1.139.3) */
  .row{gap:8px}

  /* section headings */
  .section{margin-bottom:28px}
  .section-head{margin-bottom:12px;gap:8px;align-items:center}
  .section-head h2{font-size:1.22rem;gap:8px}
  .section-head p{font-size:.9rem}

  /* page title block used by sets, lists, collections, classes: a small icon beside the title, buttons in one row underneath */
  .grp-hero{gap:10px 12px;margin-bottom:14px;align-items:center}
  .grp-hero .ic{width:44px;height:44px;border-radius:12px;font-size:1.15rem;border-width:var(--ds-bw)}
  .grp-hero>div[style*="flex:1"],.grp-hero>div:nth-child(2){flex:1 1 calc(100% - 60px)!important;min-width:0!important}
  .grp-hero h1{font-size:1.4rem!important;overflow-wrap:break-word}
  .grp-hero p{font-size:.88rem}
  .grp-hero>.btn,.grp-hero>a.btn,.grp-hero>button.btn,.grp-hero>form{flex:1 1 auto;justify-content:center}
  .crumbs{font-size:.82rem;gap:6px;margin-bottom:10px}

  /* tables: compact, the page never scrolls sideways */
    .data-table th{padding:8px 10px;font-size:.7rem}
  .data-table td{padding:8px 10px}

  /* home / catalogue cards: two short lines of description */
  .cards{gap:12px}
  .card-body{padding:12px 14px}
  .card-title{font-size:1.05rem;margin-bottom:4px}
  .card-desc{font-size:.85rem;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .tag{height:30px;width:30px}.tag i{width:30px}.tag-t{height:30px;max-width:30px;padding-left:30px}
    .hero p{font-size:.98rem;margin-bottom:14px}
  .hero-me{padding:14px 4px 6px}
  .filterbar{--fbh:40px;gap:8px;margin-top:10px}

  /* stats (Sets 1/∞, Lists 2/∞ ...): small tiles in one row of up to three */
  .stats{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-bottom:14px}
  .stat{padding:10px 6px}
  .stat b{font-size:1.35rem}
  .stat span{font-size:.74rem;line-height:1.25;display:block}

  /* My Library: the four tabs as an even 2 x 2 grid that never wraps a label */
  .lib-head{gap:10px;align-items:center}
    .lib-head-actions{gap:8px;width:100%}
  .lib-head-actions>.btn,.lib-head-actions>details{flex:1 1 auto}
  .lib-head-actions>.btn{justify-content:center}
  .lib-tabs{gap:6px;margin-bottom:14px}
  .lib-tab{gap:6px;padding:8px 6px;font-size:.84rem;white-space:nowrap;min-width:0;border-width:var(--ds-bw);border-radius:10px}
  .lib-tab i{font-size:.9em}
  .lib-tab .n{font-size:.7rem;padding:0 6px}
  .lib-tile .cap{font-size:.74rem}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}

  /* activity picker ("Use in a game…", class hub): two columns, names wrap between words only */
  .aa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aa-tile{padding:8px;gap:8px;border-radius:12px;border-width:var(--ds-bw);align-items:center}
  .aa-tile .aa-ic,.aa-ic{width:34px;height:34px;border-radius:10px;font-size:1rem}
  .aa-ic.has-th{width:48px}
  .aa-t b{font-size:.84rem;line-height:1.2;overflow-wrap:break-word;word-break:normal;hyphens:auto;-webkit-hyphens:auto}
  .aa-t small{font-size:.72rem;overflow-wrap:break-word}
  .aa-sec{margin:12px 0 6px;font-size:.72rem}


  /* a set's lists: one card row per list - name and item count, then the buttons across the full width */
    .ls-table,.ls-table tbody{display:block;width:100%}
  .ls-table thead{display:none}
  .ls-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
  .ls-table tr:first-child{border-top:0}
  .ls-table td{display:block;padding:0!important;border:0!important;background:none!important}
    .ls-table td:nth-child(1){font-size:.95rem;overflow-wrap:break-word}
  .ls-table td.ls-n{color:var(--muted);font-size:.8rem;white-space:nowrap}
  .ls-table .ls-n-l{display:inline}
  .ls-table td:nth-child(5){grid-column:1 / -1}
  .ls-actions{justify-content:stretch;flex-wrap:nowrap}
  .ls-actions>.btn{flex:1 1 0;min-width:0;white-space:nowrap;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis}   /* shrink the words, never push the bin off the screen */
  .ls-actions .inline-form{flex:0 0 auto}
  .ls-actions .inline-form .btn{width:38px;padding:0}


  /* dashboard */
          .qs-tile{padding:10px 12px;gap:0 12px;border-width:var(--ds-bw)}
  .qs-ic{width:40px;height:40px;border-radius:11px;font-size:1.1rem;border-width:var(--ds-bw)}
    .qs-tile small{font-size:.8rem;line-height:1.3}
  .qs-flow li{padding:8px}
  .qs-num{width:26px;height:26px;font-size:.85rem}


  /* class page tabs: an even 3-column grid, never wider than the screen */
  .page-content .hub-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;flex-wrap:wrap;margin-bottom:14px}
  .hub-tabs .tab{min-width:0;justify-content:center;text-align:center;padding:6px 4px;font-size:.8rem;gap:5px;line-height:1.15;min-height:38px;border-width:var(--ds-bw);border-radius:10px}
  .hub-tabs .tab i{font-size:.85em;flex:none}
  .hub-quick{gap:6px}


  /* class students: the name takes the room, B/G a small box, the remove button at the end */
  .stu-item{padding:6px 8px;border-width:var(--ds-bw);gap:6px}
    .page-content .stu-fields select{flex:0 0 64px!important;width:64px!important;padding-left:8px;padding-right:4px}
  .stu-fields{gap:6px}
  .stu-btns{min-width:0}

  /* forms */
  .field{font-size:.85rem;gap:4px}
  .field small{font-size:.76rem}
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=date],select,textarea{font-size:16px;border-width:var(--ds-line-ctl)}
  .check-row{gap:8px;font-size:.92rem}

  /* admin plan form: the short number boxes two to a row */
  .page-content .grid.tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-content .grid.tier-grid>.tg-wide,.page-content .grid.tier-grid>.tg-wide2,.page-content .grid.tier-grid>label[style*="flex-direction:row"]{grid-column:1 / -1!important}

  /* footer */
  .footer-container{padding-left:12px;padding-right:12px}
  .footer-nav{gap:6px 14px}
  .footer-nav a{font-size:.85rem}
}

/* small phones (iPhone SE, Display Zoom, larger text): a notch smaller and a 10px edge */
@media (max-width:400px){
  html{font-size:14px}
  .header-container{padding:6px 10px;gap:6px}
  .nav-burger,.theme-toggle,.auth-area .nav-btn,.hdr-back{--hb:36px}
  .theme-toggle,.hdr-back{width:36px;height:36px}
  .logo-svg{height:30px}
  .auth-area{gap:5px;margin-left:4px}
  .page-content{padding:12px 10px 36px}
  .panel{padding:12px}
  .panel .panel{padding:10px}
  .page-content .panel[style*="padding"]{padding:12px!important}
  h1,.page-content h1{font-size:1.42rem}
  .grp-hero .ic{width:40px;height:40px;font-size:1.05rem}
  .grp-hero>div[style*="flex:1"],.grp-hero>div:nth-child(2){flex-basis:calc(100% - 54px)!important}
  .lib-tab{font-size:.8rem;padding:7px 4px;gap:5px}
  .lib-tab .n{padding:0 5px}
  .aa-tile{padding:7px;gap:7px}
  .aa-tile .aa-ic,.aa-ic{width:30px;height:30px;font-size:.9rem}
  .data-table th,.data-table td{padding:7px 8px}
  .hub-tabs .tab i{display:none}
}

/* 1.50.0 — account / language menus on phones: the panel never runs off the screen (it scrolls inside itself), a dimmed backdrop
   shows the menu is open, tapping the backdrop closes it, and the page behind cannot scroll while it is open. */
@media (max-width:640px), (orientation:landscape) and (max-height:520px) {
  details.menu>.menu-panel{position:fixed;top:62px;max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:1100}
  details.menu[open]::after{content:"";position:fixed;inset:0;z-index:1090;background:rgba(2,6,23,.5);touch-action:none}
  details.menu[open]>summary{position:relative;z-index:1095}
  /* 1.135.0: the burger list opens as the same kind of card as the account menu, over a dimmed page (the dim is the card's own wide shadow, so it needs no extra element) */
  .nav-toggle:checked~.main-nav{position:fixed;left:12px;right:12px;top:62px;bottom:auto;max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:1100;padding:8px;background:var(--panel);border:3px solid var(--hard);border-radius:var(--radius);box-shadow:0 0 0 100vmax rgba(2,6,23,.5),var(--shadow);gap:0}
  .nav-toggle:checked~.main-nav .nav-link{padding:9px 12px;gap:10px;border-radius:8px;color:var(--text);font-weight:600;font-size:.92rem}
  .nav-toggle:checked~.main-nav .nav-link:hover,.nav-toggle:checked~.main-nav .nav-link.active{background:var(--panel2);color:var(--sky)}
  html[data-theme=light] .nav-toggle:checked~.main-nav .nav-link:hover,html[data-theme=light] .nav-toggle:checked~.main-nav .nav-link.active{color:#0369a1}
  .nav-toggle:checked~.main-nav .nav-link>i:first-child{width:1.4em;flex:none;text-align:center}
  html:has(.nav-toggle:checked),html:has(details.menu[open]){overflow:hidden}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:641px) {
  details.menu>.menu-panel{left:auto;right:12px;width:290px;top:54px;max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px)}
}

/* 1.136.0 - Dashboard on phones: one steady rhythm (10 px between blocks, 1.5 px borders, no heavy shadows), equal-sized tiles and chips in tidy columns,
   and the activity tables turned into cards so nothing runs off the side. Everything is under .dash-page, so no other page changes. To go back, delete this block. */
@media (max-width:640px) {
    .dash-page>*{margin-top:0}
  .dash-page .page-head{margin:0 0 var(--dg);gap:var(--dg)}
  .dash-page .dash-me{gap:12px;flex-wrap:nowrap}
  .dash-page .dash-me .uface{--s:44px!important}
        .dash-page .alert{margin:0 0 var(--dg)}
  .dash-page :is(.panel,.stat,.qs-tile,.bp-strip,.table-wrap){box-shadow:none}
  .dash-page .qs-big{gap:var(--dg);margin:0 0 var(--dg)}
  .dash-page .qs-big .qs-tile{padding:10px 4px;gap:6px;min-height:92px;justify-content:center}
  .dash-page .qs-big .qs-tile .qs-ic{width:36px;height:36px;border-width:var(--ds-bw);font-size:1rem}
  .dash-page .qs-big .qs-tile b{font-size:.78rem}
  /* my classes: a tidy three-column grid instead of ragged wrapping */
  .dash-page .qs-classes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 var(--dg)}
  .dash-page .qs-classes .chip{grid-column:span 2}
  .dash-page .qs-classes>span{grid-column:1/-1;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:-2px}
  .dash-page .qs-classes .chip{display:block;text-align:center;min-width:0;padding:7px 8px;font-size:.8rem;border-width:var(--ds-bw)}.dash-page .qs-classes .chip i{margin-right:5px}
  .dash-page .qs-classes .chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* New class and My Library are actions, not classes: half-width rounded rectangles */
  .dash-page .qs-classes .chip:is([href$="classes.php#new"],[href$="mylibrary.php"]){grid-column:span 3;border-radius:10px;padding:10px 8px;font-weight:800;color:var(--sky);border-color:var(--sky)}
  .dash-page .qs-classes .chip:is([href$="classes.php#new"],[href$="mylibrary.php"]):hover{background:var(--panel2)}
  .dash-page .qs-steps{margin:0 0 var(--dg);padding:12px}
  .dash-page .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dg);margin:0 0 var(--dg)}
  .dash-page .stat{padding:8px 4px;min-height:64px;display:flex;flex-direction:column;justify-content:center}
  .dash-page .stat b{font-size:1.25rem;line-height:1.1}
  .dash-page .stat span{font-size:.7rem}
  .dash-page .dash-more{margin:0 0 calc(var(--dg) * 1.6)}
  .dash-page .dash-more>summary{padding:10px 12px;min-height:0;gap:2px 10px}
  .dash-page .dash-more>summary>span{font-size:.95rem}
  .dash-page .dash-more>.grid{padding:0 12px 12px}
  .dash-page .section-head{margin:0 0 var(--dg);gap:8px}
  .dash-page #creations .section-head{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dash-page #creations .section-head h2{grid-column:1/-1}
  .dash-page #creations .section-head .btn{justify-content:center;min-height:40px;margin:0}
  .dash-page #creations>.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:var(--dg)!important;max-height:none;overflow:visible}
  .dash-page #creations>.chips .chip{display:block;text-align:center;min-width:0;padding:7px 8px;font-size:.8rem;border-width:var(--ds-bw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

}

/* The activity tables become cards on phones and portrait tablets (up to 899 px); tiles sit three across from 561 px */
@media (min-width:561px) and (max-width:899px) {
  .dash-page .qs-big{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .dash-page .qs-big .qs-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:12px 6px;min-height:100px;justify-content:center}
  .dash-page .qs-big .qs-tile .qs-ic{grid-row:auto;width:40px;height:40px;font-size:1.1rem}
  .dash-page .qs-big .qs-tile b{font-size:.9rem;line-height:1.2}
  .dash-page .qs-big .qs-tile small{display:none}
}
@media (max-width:899px) {
  .dash-page{--dg:10px}
  /* activity tables -> cards (My activities and Shared with me) */
  .dash-page :is(#creations,#shared) .table-wrap{border:0;background:none;overflow:visible;border-radius:0}
  .dash-page :is(#creations,#shared) .data-table,.dash-page :is(#creations,#shared) .data-table tbody{display:block}
  .dash-page :is(#creations,#shared) .data-table thead{display:none}
  .dash-page :is(#creations,#shared) .data-table tr{display:grid;gap:0;margin:0 0 var(--dg);padding:10px;background:var(--panel);border:1.5px solid var(--line);border-radius:14px}
  .dash-page :is(#creations,#shared) .data-table td{display:block;border:0;padding:0;background:none!important;min-width:0}
  .dash-page #creations .data-table tr{grid-template-columns:84px repeat(4,minmax(0,1fr));grid-template-areas:"pic title title title title" "pic game game vis vis" "pic plays likes upd upd" "grp grp grp grp grp" "lock lock lock lock lock" "act act act act act";column-gap:10px;row-gap:6px;align-items:center}
  .dash-page #creations .c-pic{grid-area:pic;align-self:start;text-align:center}
  .dash-page #creations .c-pic .cam-btn{display:inline-block;margin-top:4px;font-size:.72rem;white-space:nowrap}
  .dash-page #creations .c-title{grid-area:title;font-size:.98rem;line-height:1.25;align-self:end}
  .dash-page #creations .c-game{grid-area:game;font-size:.8rem;color:var(--soft)}
  .dash-page #creations .c-vis{grid-area:vis;text-align:right}
  .dash-page #creations .c-plays{grid-area:plays}.dash-page #creations .c-likes{grid-area:likes}.dash-page #creations .c-upd{grid-area:upd;text-align:right}
  .dash-page #creations :is(.c-plays,.c-likes){font-size:.8rem;text-align:left;color:var(--soft)}
  .dash-page #creations :is(.c-plays,.c-likes)::before{content:attr(data-label) " ";color:var(--muted)}
  .dash-page #creations .c-grp{grid-area:grp;margin-top:4px}
    .dash-page #creations .c-lock{grid-area:lock;margin-top:4px}
  .dash-page #creations .c-lock::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:3px}
  .dash-page #creations .c-lock select{max-width:100%!important;width:100%;font-size:.85rem;padding:7px 8px;min-height:38px}
  .dash-page #creations .c-act{grid-area:act;margin-top:8px;display:flex!important;gap:6px;flex-wrap:nowrap;justify-content:stretch}
  .dash-page #creations .c-act .btn-primary{flex:1;justify-content:center}
  .dash-page #creations .c-act form{display:contents}
  .dash-page #creations .c-act .btn{min-height:38px}
  /* Shared with me */
  .dash-page #shared .data-table tr{grid-template-columns:1fr auto;grid-template-areas:"title title" "space role" "by act";gap:6px 10px;align-items:center}
  .dash-page #shared .sw-title{grid-area:title}.dash-page #shared .sw-space{grid-area:space;font-size:.85rem}.dash-page #shared .sw-role{grid-area:role}.dash-page #shared .sw-by{grid-area:by}.dash-page #shared .sw-act{grid-area:act;text-align:right}
}
@media (min-width:641px) and (max-width:899px) {
  .dash-page :is(#creations,#shared) .data-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dg)}
  .dash-page :is(#creations,#shared) .data-table tr{margin:0}
}

/* ===== 1.137.0 dashboard: desktop redesign (phone/card layouts above are untouched) ===== */
.dash-page .qs-list,.dash-page .qs-acts{display:contents}
.dash-page .plan-strip{display:none}
.dash-page .c-stats,.dash-page .h-stats{display:none!important}
.dash-page .t-game{display:none}
.dash-page .act-ic{display:none}
.dash-page .dash-scores{margin:8px 0 0}
.dash-page .dash-scores>.grid{display:block}
@media (min-width:641px) {
  .dash-page .qs-acts .chip{border-radius:10px;padding:8px 16px;font-weight:800;color:var(--sky);border-color:var(--sky);border-width:var(--ds-bw)}
  .dash-page .qs-acts .chip:hover{background:var(--panel2)}
}
@media (min-width:900px) {
  /* counts: one slim row, plan usage: one line */
    .dash-page .stats-3 .stat{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:8px 12px}
  .dash-page .stats-3 .stat b{font-size:1.3rem}.dash-page .stats-3 .stat span{font-size:.85rem}
  .dash-page .dash-more#dashMore{display:none}
  .dash-page .plan-strip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px;padding:8px 14px;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:.85rem}
  .dash-page .ps-t{font-weight:800}.dash-page .ps-t i{color:var(--muted);margin-right:4px}
  .dash-page .ps-i{display:inline-flex;align-items:center;gap:8px;color:var(--soft)}
  .dash-page .ps-i b{color:var(--text)}
  .dash-page .ps-bar{display:inline-block;width:70px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
  .dash-page .ps-bar u{display:block;height:100%;background:var(--green);border-radius:99px;text-decoration:none}
  .dash-page .ps-bar.hot u{background:var(--rose)}
  .dash-page .ps-up{margin-left:auto}
  /* My activities header: title, help, and the two links sit together */
  .dash-page #creations .section-head{justify-content:flex-start;align-items:center;gap:8px 10px;margin-bottom:10px}
  .dash-page #creations .section-head h2{margin-right:6px}
  .dash-page #creations>.chips{margin-bottom:12px!important}
  /* table: fewer columns, fits without side scrolling */
    .dash-page #creations .data-table :is(.h-game,.c-game,.h-plays,.c-plays,.h-likes,.c-likes,.h-upd,.c-upd){display:none}
  .dash-page #creations .data-table :is(.h-stats,.c-stats){display:table-cell!important}
  .dash-page #creations .data-table th,.dash-page #creations .data-table td{padding:10px 8px;vertical-align:middle}
  .dash-page #creations .c-title{min-width:170px}
  .dash-page #creations .c-title strong{overflow-wrap:anywhere}
  .dash-page #creations .t-game{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
  .dash-page #creations .c-stats{white-space:nowrap;font-size:.85rem}
  .dash-page #creations .c-stats small{display:block;font-size:.76rem;margin-top:2px}
  .dash-page #creations .c-lock select,.dash-page #creations .c-grp select{max-width:140px!important;font-size:.82rem;padding:6px 6px}
  .dash-page #creations .c-grp{max-width:130px;font-size:.8rem}
      .dash-page #creations .c-act .btn{padding-left:9px;padding-right:9px}
  .dash-page #creations .act-ic{display:inline-block}
  .dash-page #creations .act-open .lbl{display:none}
}
@media (min-width:900px) and (max-width:1139px) {
  .dash-page #creations .c-act{white-space:normal;width:108px;min-width:108px}
  .dash-page #creations .c-title{min-width:130px}.dash-page #creations .c-lock select{max-width:112px!important}.dash-page #creations .data-table th,.dash-page #creations .data-table td{padding-left:6px;padding-right:6px}
  .dash-page #creations .c-act .btn,.dash-page #creations .c-act form{margin:0 2px 4px 0}
  .dash-page #creations .c-act form{display:inline-block}
}

/* ===== 1.137.2 ===== */
.dash-page .glance{display:contents}
.dash-page .t-short{display:none}
@media (min-width:641px) {
  /* My classes: its own box. Header = label + the two actions; the pills wrap underneath */
  .dash-page .qs-classes{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab acts" "list list";gap:10px 12px;align-items:center;padding:14px 16px;margin-bottom:16px;background:var(--panel);border:3px solid var(--hard);border-radius:var(--radius);box-shadow:var(--shadow)}
  .dash-page .qs-classes>span{grid-area:lab;padding:0;font-weight:800;font-size:1rem;color:var(--text)}
  .dash-page .qs-list{grid-area:list;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
  .dash-page .qs-acts{grid-area:acts;display:flex;gap:8px}
}
@media (min-width:900px) {
  /* one box for the three counts and the plan line */
  .dash-page .glance{display:block;background:var(--panel);border:3px solid var(--hard);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 20px;overflow:hidden}
  .dash-page .glance .stats.stats-3{gap:0;margin:0}
  .dash-page .glance .stat{background:none;border:0;border-radius:0;box-shadow:none;padding:10px 12px}
  .dash-page .glance .stat+.stat{border-left:1px solid var(--line)}
  .dash-page .glance .plan-strip{border:0;border-top:1px solid var(--line);border-radius:0;background:none;margin:0;padding:9px 16px}
  /* shared-space cell: short labels */
  .dash-page #creations .t-long{display:none}.dash-page #creations .t-short{display:inline}
    .dash-page #creations .c-grp{max-width:110px}
  .dash-page #creations .data-table th{text-align:left;padding:10px 8px}
  .dash-page #creations .data-table th.right{text-align:right}
  .dash-page #creations .data-table td{padding-top:8px;padding-bottom:8px}
  }

@media (max-width:380px){.ls-actions>.btn>i{display:none}}   /* tiny phones: drop the little icons so the words fit beside the bin (1.139.15) */