/* Kingdom Kids: shared interface parts.
One spacing scale, one set of buttons, one segmented control, one menu, one status pill. Every screen (the workspace, the classroom,
the teacher window and later the children's pages) uses these, so a button is the same height, shape and state wherever it appears.
Load this after app.css. Page-specific files only decide WHERE things go, never how a button looks. */
:root {
/* spacing scale (4px steps): use these, not one-off values */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
--tap: 44px; /* smallest touch target */
--tap-lg: 56px; /* the main button on a screen */
--focus: #1a1a1a; /* focus ring: ink on light pages, yellow on the dark ones */
--edge: max(1rem, env(safe-area-inset-left, 0px)); /* shared left and right edge for bars */
--edge-r: max(1rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) { :root { --edge: max(1.5rem, env(safe-area-inset-left, 0px)); --edge-r: max(1.5rem, env(safe-area-inset-right, 0px)); } }
/* ---------- Focus: one ring everywhere, visible on yellow, sky, white and ink ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .menu-btn:focus-visible { border-radius: 999px; }
/* ---------- Buttons ----------
.btn primary: yellow, ink edge, offset shadow
.btn.alt secondary: white
.btn.small compact: lighter, same 44px touch height
.btn.big the main action on a screen (56px)
.btn.icon square icon-only button (needs aria-label)
.btn.flat no shadow: for toolbars and dense rows
.btn.danger destructive
States: hover, pressed, keyboard focus, disabled, selected (aria-pressed or aria-current), loading (aria-busy). */
.btn, .btnlike {
--btn-bg: var(--yellow); --btn-fg: var(--ink); --btn-bd: var(--ink); --btn-sh: 3px 3px 0 var(--ink);
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: nowrap;
box-sizing: border-box; min-height: var(--tap); min-width: var(--tap); max-width: 100%;
padding: .55rem 1.25rem; margin: 0;
font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: break-word;
color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--btn-bd); border-radius: 999px; box-shadow: var(--btn-sh);
cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
.btn.alt { --btn-bg: var(--white); }
.btn.small { font-size: .92rem; padding: .4rem .95rem; --btn-sh: 2px 2px 0 var(--ink); }
.btn.big { min-height: var(--tap-lg); font-size: 1.2rem; padding: .7rem 1.9rem; }
.btn.flat, .btn.small.flat { --btn-sh: none; }
.btn.icon { padding: 0; width: var(--tap); height: var(--tap); border-radius: 50%; }
.btn.icon svg, .btn svg { width: 1.2em; height: 1.2em; flex: none; display: block; }
.btn.danger { --btn-bd: #8a2207; --btn-fg: #7d1d05; --btn-bg: var(--white); }
.btn.tiny { font-size: .88rem; padding: .35rem .8rem; --btn-sh: none; } /* kept for old markup: now the same 44px target as .small */
.btn[hidden] { display: none; }
@media (hover: hover) {
.btn:hover:not(:disabled):not([aria-disabled='true']):not([aria-pressed='true']):not([aria-current='true']):not([aria-current='step']):not([aria-current='page']):not(.is-selected) { --btn-bg: var(--btn-hover, #ffe97c); }
.btn.alt:hover:not(:disabled):not([aria-disabled='true']):not([aria-pressed='true']):not([aria-current='true']):not([aria-current='step']):not([aria-current='page']):not(.is-selected) { --btn-bg: var(--btn-alt-hover, var(--yellow-t)); }
}
.btn:active:not(:disabled):not([aria-disabled='true']) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--btn-bd); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
/* selected: ink with yellow text, the same signal as the current page in the menu */
.btn[aria-pressed='true'], .btn[aria-current='true'], .btn[aria-current='step'], .btn[aria-current='page'], .btn.is-selected { --btn-bg: var(--ink); --btn-fg: var(--yellow); }
.btn[aria-pressed='true']::before { content: '\2713'; font-weight: 800; }
/* loading: a spinner before the label; the button ignores taps until the page answers */
.btn[aria-busy='true'], .btn.is-loading { pointer-events: none; opacity: .85; }
.btn[aria-busy='true']::before, .btn.is-loading::before { content: ''; width: 1em; height: 1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; flex: none; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy='true']::before, .btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: .6; } .btn { transition: none; } }
/* ---------- A row of actions: equal gaps, wraps cleanly, never clips ---------- */
.actions, .btnrow { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btnrow.end { justify-content: flex-end; } .btnrow.stretch > * { flex: 1 1 9rem; }
.btnrow form, .actions form { margin: 0; display: contents; }
/* ---------- Segmented control: three or four equal choices (difficulty, setup, view) ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); width: 100%; }
.seg > .btn, .seg > button { width: 100%; min-width: 0; padding-inline: var(--s-2); gap: var(--s-1); }
@media (max-width: 339px) { .seg { grid-auto-flow: row; } } /* very narrow screens: one choice per line */
/* ---------- Status pill: draft, approved, preview. Sits on its own line or at the end of a header, never over a title ---------- */
.status { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: .15rem .75rem; border: 2px solid var(--ink); border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; background: var(--white); color: var(--ink); white-space: normal; }
.status::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink); flex: none; }
.status.draft { background: #f7c9b8; border-style: dashed; } .status.ok { background: #bfe3b4; } .status.ok::before { background: #1b6b3a; } .status.note { background: var(--yellow); }
/* ---------- Menu: a button that opens a panel (More, Settings, Stages, Menu). Opened by script; closes on Escape or a tap outside. ---------- */
.menu { position: relative; display: inline-flex; }
.menu-panel { position: absolute; z-index: 70; top: calc(100% + var(--s-2)); right: 0; display: grid; gap: var(--s-2); width: max-content; min-width: min(15rem, calc(100vw - 1.5rem)); max-width: min(24rem, calc(100vw - 1.5rem)); max-height: min(32rem, calc(100dvh - 9rem)); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3); background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 rgba(26, 26, 26, .25); }
.menu-panel[hidden] { display: none; }
.menu-panel.left { right: auto; left: 0; }
.menu-panel .btn { width: 100%; justify-content: flex-start; text-align: left; }
.menu-panel hr { border: 0; border-top: 2px solid var(--line); margin: var(--s-1) 0; width: 100%; }
.menu-panel .menu-label { margin: var(--s-1) 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-panel .field { display: grid; gap: var(--s-1); font-weight: 700; font-size: .9rem; } .menu-panel select { font: inherit; min-height: var(--tap); border: 2px solid var(--ink); border-radius: 10px; padding: .2rem .6rem; background: var(--white); color: var(--ink); width: 100%; }
/* ---------- Form fields share one height and edge ---------- */
input[type=number] { min-width: var(--tap); }
input[type=text], input[type=email], input[type=search], input[type=date], input[type=number], input[type=url], input[type=tel], select, textarea, input:not([type]) { min-height: var(--tap); max-width: 100%; }
.check { min-height: var(--tap); align-items: center; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; }
/* ---------- Tables scroll inside their own box, never the page ---------- */
.tablewrap, .pt-tablewrap { position: relative; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.tablewrap > table { min-width: 34rem; }
.tablewrap.hint-scroll { background: linear-gradient(to right, var(--bg, #fffaf0), rgba(255, 250, 240, 0)) left / 1.5rem 100% no-repeat local, linear-gradient(to left, var(--bg, #fffaf0), rgba(255, 250, 240, 0)) right / 1.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, .25), rgba(26, 26, 26, 0)) left / .6rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, .25), rgba(26, 26, 26, 0)) right / .6rem 100% no-repeat scroll; }
/* ---------- Media stay in proportion ---------- */
img, svg, video, canvas { max-width: 100%; }
img, video, canvas { height: auto; }
/* ---------- A row in a stage or lesson list ---------- */
.stage-item { display: grid !important; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); }
.stage-item .si-n { font-weight: 800; opacity: .75; } .stage-item .si-t { min-width: 0; overflow-wrap: anywhere; } .stage-item .si-s { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.stage-item.seen .si-n::after { content: '\2713'; margin-left: .1rem; }
/* ---------- Disclosure rows are touch targets too ---------- */
details > summary { min-height: var(--tap); }
.howto summary, .quiet summary { display: flex; align-items: center; }
/* ---------- Narrow screens: wrapped actions share the row evenly, so every edge lines up ---------- */
@media (max-width: 520px) {
.actions > .btn, .btnrow > .btn, .plan-top > .btn, .plan-actions > .btn, .gal-actions > .btn, .tools > .btn, .reviewbar > .btn, .plan-confirm > .btn { flex: 1 1 auto; }
.plan-actions form, .gal-actions form { display: contents; }
}
/* ---------- Site header: logo on the left; links in a row on wide screens; ONE Menu button on narrow ones ----------
Every programme header (Lamp and Path, Rooted in Him, the front door, Play Together) uses the same markup:
app.js adds the Menu button (.navtoggle) and folds .sitemenu under 1000px. Each programme only sets the --hd-* colours (its own personality). */
.top { --hd-fg: var(--ink); --hd-hover: var(--yellow); --hd-hover-fg: var(--ink); --hd-cur-bg: var(--ink); --hd-cur-fg: var(--yellow); --hd-go-bg: var(--yellow); --hd-go-fg: var(--ink); --hd-line: var(--ink); --hd-soft: rgba(26, 26, 26, .25); }
.sitemenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-1) var(--s-3); margin-left: auto; min-width: 0; }
.sitemenu nav, .sitemenu .sm-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.sitemenu a, .sitemenu .linklike { box-sizing: border-box; font: inherit; font-weight: 700; color: var(--hd-fg); text-decoration: none; background: none; border: 2px solid transparent; border-radius: 999px; padding: .4rem .9rem; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; touch-action: manipulation; transition: background-color .12s ease; }
@media (hover: hover) { .sitemenu a:hover, .sitemenu .linklike:hover { background: var(--hd-hover); color: var(--hd-hover-fg); } }
.sitemenu a[aria-current='page'] { background: var(--hd-cur-bg); color: var(--hd-cur-fg); }
.sitemenu a.sm-go { background: var(--hd-go-bg); color: var(--hd-go-fg); border-color: var(--hd-line); box-shadow: 2px 2px 0 var(--hd-line); font-weight: 800; }
@media (hover: hover) { .sitemenu a.sm-go:hover { background: var(--hd-go-bg); filter: brightness(1.06); color: var(--hd-go-fg); } }
.sitemenu form.inline, .sitemenu .sm-out { display: inline-flex; margin: 0; }
.sitemenu .sm-label { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-fg); opacity: .8; }
.sm-display { position: relative; display: inline-flex; }
.sm-display .menu-panel { display: none; }
.sm-display.open .menu-panel { display: grid; }
.sm-display .sm-label { display: none; }
.sm-displaybtn .chev { width: 1em; height: 1em; transition: transform .12s ease; } .sm-display.open .sm-displaybtn .chev { transform: rotate(180deg); }
.navtoggle { gap: var(--s-2); } .navtoggle .chev { width: 1em; height: 1em; } .navtoggle[aria-expanded='true'] .chev { transform: rotate(180deg); }
/* a labelled on/off row (Calm motion, Look): label on the left, the state on the right, always 48px tall */
.toggle { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 48px; padding: .3rem .5rem .3rem .9rem; font: inherit; font-weight: 700; line-height: 1.2; text-align: left; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 14px; cursor: pointer; touch-action: manipulation; }
.toggle .tr-state { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-width: 3.6rem; min-height: 32px; padding: .1rem .75rem; border: 2px solid var(--ink); border-radius: 999px; background: #e8e8e8; font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.toggle[aria-pressed='true'] .tr-state { background: var(--toggle-on, var(--ink)); color: var(--toggle-on-fg, var(--yellow)); }
.toggle[aria-pressed='true'] .tr-state::before { content: '\2713'; }
.toggle .tr-label { min-width: 0; overflow-wrap: anywhere; }
.toggle[hidden] { display: none; }
@media (hover: hover) { .toggle:hover { background: var(--yellow-t); } }
@media (max-width: 999px) {
.bar.js-nav > .sitemenu { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; flex-wrap: nowrap; justify-content: flex-start; gap: var(--s-3); margin: 0; padding: var(--s-3) 0 var(--s-3); border-top: 2px solid var(--hd-line); }
.bar.js-nav.open > .sitemenu { display: flex; }
.bar.js-nav > .sitemenu nav, .bar.js-nav > .sitemenu .sm-links { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-1); }
.bar.js-nav > .sitemenu a, .bar.js-nav > .sitemenu .linklike { width: 100%; min-height: 48px; justify-content: flex-start; text-align: left; border-radius: 12px; }
.bar.js-nav > .sitemenu a[aria-current='page']::before { content: '\2713'; margin-right: var(--s-2); font-weight: 800; }
.bar.js-nav > .sitemenu .sm-links a:not(.sm-go):not([aria-current='page']) { background: var(--hd-row, rgba(255, 255, 255, .6)); border-color: var(--hd-soft); }
.bar.js-nav > .sitemenu a.sm-go { justify-content: center; margin-top: var(--s-1); }
.bar.js-nav > .sitemenu form.inline, .bar.js-nav > .sitemenu .sm-out { display: block; width: 100%; padding-top: var(--s-3); border-top: 2px solid var(--hd-soft); }
.bar.js-nav > .sitemenu .sm-out .linklike { justify-content: center; border-color: var(--hd-line); }
.bar.js-nav .sm-display { display: grid; gap: var(--s-2); width: 100%; }
.bar.js-nav .sm-display .sm-label { display: block; }
.bar.js-nav .sm-displaybtn { display: none; }
.bar.js-nav .sm-display .menu-panel { display: grid; position: static; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; background: none; }
.bar.js-nav .sm-display .menu-panel .menu-label { display: none; }
}
@media (min-width: 1000px) {
.navtoggle { display: none !important; }
/* many links: the logo and Sign out share the top row, the links get a row of their own, the main action at its end */
.sitemenu.tiers { display: contents; }
.sitemenu.tiers .sm-display { order: 2; } .sitemenu.tiers .sm-out { order: 3; }
.sitemenu.tiers .sm-links { order: 4; flex: 1 0 100%; justify-content: flex-start; padding-top: var(--s-2); border-top: 2px solid var(--hd-soft); }
.sitemenu.tiers .sm-links { gap: var(--s-1) .15rem; } .sitemenu.tiers .sm-links a { padding-inline: .75rem; }
.sitemenu.tiers .sm-links .sm-go { margin-left: auto; }
}
.sm-display:not(:has(.toggle:not([hidden]))) { display: none !important; }
/* ---------- Page head: title on the left, status badges above it, actions on the right ---------- */
.pagehead.split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.ph-main { flex: 1 1 20rem; min-width: 0; } .ph-main > :last-child { margin-bottom: 0; }
.ph-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); }
.ph-actions, .btngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--s-2); align-items: stretch; }
.ph-actions { flex: 0 1 36rem; }
.ph-actions > .btn, .btngrid > .btn { width: 100%; }
@media (max-width: 479px) { .btngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .btngrid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .ph-actions { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 339px) { .btngrid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Filter bar: labelled groups of equal chips, a count, one way to clear ----------
Game type
Level
On a phone app.js folds every .fb-fold behind the .fb-toggle button, which names what is chosen, so the results stay above the fold. */
.filterbar { --fb-on-bg: var(--ink); --fb-on-fg: var(--yellow); --fb-level-bg: var(--fb-on-bg); --fb-level-fg: var(--fb-on-fg); display: grid; gap: var(--s-3); min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-4); background: var(--white); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--fb-shadow, var(--line)); }
.fb-group { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; align-content: start; }
.fb-group ~ .fb-group { padding-top: var(--s-3); border-top: 2px solid var(--line); }
.fb-stack { display: grid; gap: var(--s-3); min-width: 0; }
.fb-stack > .fb-group + .fb-group { padding-top: var(--s-3); border-top: 2px solid var(--line); }
.fb-label { margin: 0; font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.fb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .fb-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fb-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); } }
.fchip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 48px; min-width: 0; margin: 0; padding: .3rem var(--s-3); font: inherit; font-weight: 800; font-size: .98rem; line-height: 1.15; text-align: center; text-decoration: none; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; overflow-wrap: normal; word-break: normal; hyphens: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; }
.fchip.tall { flex-direction: column; gap: 0; } .fchip .ysub { font-size: .8rem; font-weight: 600; opacity: .85; }
@media (hover: hover) { .fchip:hover { background: var(--yellow-t); } }
.fchip[aria-current='true'], .fchip[aria-pressed='true'], .fchip.on, a.fchip[aria-current='true']:hover { background: var(--fb-on-bg); color: var(--fb-on-fg); }
.fchip[aria-current='true']:not(.tall)::before, .fchip[aria-pressed='true']:not(.tall)::before, .fchip.on:not(.tall)::before { content: '\2713'; font-weight: 800; }
.fchip.tall[aria-current='true'] .ynum::before { content: '\2713\00a0'; }
.fb-level { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filterbar .seg > .btn[aria-current='true'] { --btn-bg: var(--fb-level-bg); --btn-fg: var(--fb-level-fg); }
.fb-chips.fb-years { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fb-years .fchip { padding-inline: var(--s-2); } .fb-years .ysub { font-size: .75rem; line-height: 1.2; }
@media (max-width: 339px) { .fb-chips.fb-years { grid-template-columns: minmax(0, 1fr); } }
.seg > .btn[aria-current='true']::before { content: '\2713'; font-weight: 800; }
@media (max-width: 479px) { .fb-level { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-3) var(--s-4); align-items: end; }
.fb-fields .wide { grid-column: 1 / -1; } .fb-fields .field label { margin: 0 0 var(--s-1); font-size: .85rem; } .fb-fields .field select, .fb-fields .field input { width: 100%; }
.fb-fields .act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); } .fb-fields .act .btn { margin: 0; }
.fb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-height: var(--tap); padding-top: var(--s-3); border-top: 2px solid var(--line); }
.fb-count { margin: 0; font-weight: 800; } .fb-foot .linkbtn { margin: 0; } .fb-foot .seg { width: auto; min-width: min(100%, 16rem); }
.btn.fb-toggle { display: none; }
.fb-toggle .fb-active { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 600; }
.fb-toggle .chev { width: 1em; height: 1em; flex: none; } .fb-toggle[aria-expanded='true'] .chev { transform: rotate(180deg); }
@media (max-width: 699px) {
.filterbar.fb-js .btn.fb-toggle { display: flex; width: 100%; justify-content: space-between; text-align: left; }
.filterbar.fb-js:not(.open) .fb-fold { display: none; }
.filterbar.fb-js:not(.open) .fb-foot { border-top-width: 0; padding-top: 0; }
}
/* ---------- Cards in an even grid: the action sits at the bottom of every card ---------- */
.cardgrid > *, .rcards > li, .atiles > li, .gtiles > li, .pt-grid > * { min-width: 0; }