/* THE COMMUNITY ZONE'S MENU (zone-menu.js, BL-54) */
.col-zone{display:none}
.zmenu{display:flex;flex-direction:column;min-height:100%;padding:18px 14px 20px;background:var(--zone-wash,#F3EEFC);color:var(--ink)}
/* THE HEAD IS THE COMMUNITY WORDMARK (Mathieu, 6 November, "go pour B": the word drawn on 5 October with the
   horns of Kontimo's K, the pill under the logo that the strip hides), with the line that says the zone holds
   the guides too. The name stays as text for a reader without pictures. */
.zm-head{display:block;padding:4px 6px 12px;color:var(--ink);text-decoration:none}
.zm-head:hover{text-decoration:none}
.zm-word{display:block;width:172px;height:46px;background:var(--kpill,url(/assets/img/community-word-light.png)) no-repeat left center/contain}
.zm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zm-head small{margin-top:4px}
.zm-search{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:var(--canvas,#fff);border:1px solid var(--zone-line,#E7DEFC);color:var(--ink-muted,var(--gray))}
.zm-search input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.zm-search input::placeholder{color:var(--ink-muted,var(--gray))}
.zm-search:focus-within{border-color:var(--accent-ink,#6D28D9)}
.zm-head small{display:block;font-size:11.5px;color:var(--ink-muted,var(--gray))}
.zm-cap{display:block;margin:12px 8px 4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent-ink,#6D28D9);text-decoration:none}
.zm-cap:hover{text-decoration:underline}
.zm-list{list-style:none;margin:0;padding:0}
.zm-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.3}
.zm-row .i{flex:none;width:18px;height:18px;opacity:.85}
.zm-row:hover{background:var(--canvas,#fff);text-decoration:none}
.zm-row.is-on{background:var(--canvas,#fff);color:var(--accent-ink,#6D28D9);font-weight:700;box-shadow:0 1px 2px rgba(76,29,149,.10)}
.zm-l{flex:1 1 auto;min-width:0}
.zm-n{flex:none;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--deep,#F1EAFE);color:var(--accent-ink,#6D28D9);font-weight:700}
.zm-row.is-on .zm-n{background:var(--zone-wash,#F3EEFC)}
.zm-write{display:block;margin:14px 0 6px;padding:11px;border-radius:10px;background:var(--action,#6322F0);color:#fff;text-align:center;font-weight:700;text-decoration:none}
/* A VISITOR'S WAY IN (Mathieu, 6 November: "en bas du rail de community il manque un create your account"): where a member has New post and My page, the press that opens the sign-up window, and what it gives. */
.zm-join-p{margin:0 0 10px;font-size:12.5px;line-height:1.4;color:var(--ink-muted,#5B6470);text-align:center}
.zm-write:hover{text-decoration:none;filter:brightness(1.06)}
.zm-me{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px;border-radius:12px;background:var(--canvas,#fff);border:1px solid var(--zone-line,#E7DEFC);color:var(--ink);text-decoration:none}
.zm-me.is-on{border-color:var(--accent-ink,#6D28D9)}
.zm-me .zm-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--deep,#F1EAFE);overflow:hidden}
.zm-me .zm-av img{display:block;width:100%;height:100%;object-fit:cover}
/* Today, a touch more visible than the rows under it (Mathieu, 5 November, note 1cf779b21bf3). */
.zm-list.is-front .zm-row{font-weight:700;font-size:15px;color:var(--accent-ink,#6D28D9);background:rgba(255,255,255,.5);border:1px solid var(--zone-line,#E7DEFC)}
.zm-list.is-front .zm-row .i{opacity:1}
.zm-list.is-front .zm-row.is-on{background:var(--canvas,#fff)}
/* No Grab sticker in the zone's header (Mathieu, 5 November, note aecb572cadb7): the zone is not about his account. */
html[data-zone="learn"] .col-main > .chrome .gc{display:none}
.zm-me b{display:block;font-size:13.5px}.zm-me small{display:block;font-size:11.5px;color:var(--ink-muted,var(--gray))}
.zm-back{display:block;margin-top:10px;padding:8px 10px;font-size:13px;color:var(--ink-muted,var(--gray));text-decoration:none}
.zm-back:hover{color:var(--ink);text-decoration:none}
/* A DESK: the strip, the menu, the page. The rail's own fold button is not offered in the zone,
   where the strip is the rule. */
@media (min-width:901px){
  html[data-look="v3"][data-zone="learn"][data-rail="mini"] .app,html[data-zone="learn"][data-rail="mini"] .app{grid-template-columns:76px 252px minmax(0,1fr)}
  /* Each column named: a row-locked item is placed before the others by the grid, which put the menu
     in the strip's column. */
  html[data-zone="learn"][data-rail="mini"] .col-side{grid-column:1;grid-row:1}
  html[data-zone="learn"][data-rail="mini"] .col-zone{display:block;grid-column:2;grid-row:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--zone-line,#E7DEFC);scrollbar-width:thin;scrollbar-color:var(--zone-line,#E7DEFC) transparent}
  html[data-zone="learn"][data-rail="mini"] .col-zone::-webkit-scrollbar{width:8px}
  html[data-zone="learn"][data-rail="mini"] .col-zone::-webkit-scrollbar-thumb{background:var(--zone-line,#E7DEFC);border-radius:4px}
  html[data-zone="learn"][data-rail="mini"] .col-zone::-webkit-scrollbar-track{background:transparent}
  html[data-zone="learn"][data-rail="mini"] .col-main{grid-column:3;grid-row:1}
  html[data-look="v3"][data-zone="learn"][data-rail="mini"] .rail-tog{display:none}
}
/* A PHONE: the chips under the header (zoneChips), the row scrolled sideways with its end fading. */
.zchips{display:none}
@media (max-width:900px){
  .zchips{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;background:var(--zone-head,#EEE5FE);border-bottom:1px solid var(--zone-line,#E7DEFC);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .zchips::-webkit-scrollbar{display:none}
  .zchip{flex:none;padding:8px 14px;border-radius:999px;background:var(--canvas,#fff);border:1px solid var(--zone-line,#E7DEFC);color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none;line-height:1.2}
  .zchip.is-on{background:var(--action,#6322F0);border-color:var(--action,#6322F0);color:#fff}
  .zchips .zchip:last-child{margin-right:24px}
}
/* A PHONE: the sheet the Community tab opens while he is in the zone. */
.zsheet{position:fixed;inset:0;z-index:80}
.zsheet[hidden]{display:none}
.zsheet-bg{position:absolute;inset:0;background:rgba(20,10,40,.45);animation:zs-fade .2s ease-out}
.zsheet-p{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0;background:var(--zone-wash,#F3EEFC);box-shadow:0 -10px 30px rgba(0,0,0,.2);animation:zs-up .24s ease-out;padding-bottom:calc(8px + var(--sab,0px))}
.zsheet-p .zmenu{min-height:0;padding-top:26px}
.zsheet-bar{position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(76,29,149,.25)}
.zsheet-x{position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;border-radius:999px;background:var(--canvas,#fff);color:var(--accent-ink,#6D28D9);font-size:24px;line-height:1;cursor:pointer}
.zsheet-p .zm-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zsheet-p .zm-list.is-front{grid-template-columns:1fr}
.zsheet-p .zm-row{background:var(--canvas,#fff);border:1px solid var(--zone-line,#E7DEFC);padding:12px}
.zsheet-p .zm-me{margin-top:12px}
@media (max-width:900px){.zm-cap,.zm-n,.zm-head small,.zm-me small{font-size:12px}}
html.zs-locked,html.zs-locked body{overflow:hidden}
@keyframes zs-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes zs-fade{from{opacity:0}to{opacity:1}}
@media (min-width:901px){.zsheet{display:none}}
@media (prefers-reduced-motion:reduce){.zsheet-bg,.zsheet-p{animation:none}}