/* views.css — "Nur Text" (html[data-view="text"]) and the print layout (@media print, and html[data-view="print"] on screen before the
   dialog) for every page (views.js; owner 2026-11-01). Identical copy in friendly-apps-home and site.
   1.9.0: Lleu's close on the same side as every card; the left side for menu, expanded object and feedback close.
   version: 1.9.0 · created 2026-11-01 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
/* text only */
[data-view="text"] body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg,#fff)}
[data-view="text"] main{max-width:70ch;margin-inline:auto}
[data-view="text"] main img,[data-view="text"] main picture,[data-view="text"] main svg:not(.icon),[data-view="text"] main video,[data-view="text"] main canvas,
[data-view="text"] .hero .seed,[data-view="text"] .hero-vis,[data-view="text"] .blob,[data-view="text"] .w-mosaic,[data-view="text"] .carousel-bar{display:none!important}
[data-view="text"] .hero,[data-view="text"] .grid,[data-view="text"] .fa-cards,[data-view="text"] .w-grid,[data-view="text"] .w-project-grid{display:block!important}
[data-view="text"] .card,[data-view="text"] .fa-card,[data-view="text"] .w-project,[data-view="text"] .w-widget{border:0!important;box-shadow:none!important;background:none!important;padding-inline:0!important;border-radius:0!important}
[data-view="text"] *,[data-view="text"] *::before,[data-view="text"] *::after{animation:none!important;transition:none!important}
[data-view="text"] main{line-height:1.65}
/* print — on paper, and on screen while the dialog is prepared */
@media print{
  header.top .wrap>:not(.brand-box),.lm-row,.lm-mega,.lm-hint,[data-gwydion-pi],.gw-onair,.lleu-panel,[data-gwydion-seed],.dock-lleu,.dock-pi,.fold-dock,.fold-toggle,
  .carousel-bar,.stage-bar,.stage-curtain,.gx-float,dialog,.pen-pad,.tabs,.w-toolbar,.w-controls,.w-options,.w-card-actions,button,.legal-back{display:none!important}
  body{background:#fff!important;color:#000!important;font-size:11pt}
  header.top{position:static!important;box-shadow:none!important;border-bottom:1px solid #999}
  main{max-width:none}
  [data-carousel].is-carousel[class],[data-carousel][data-carousel],.hero,.grid,.fa-cards,.w-grid,.w-project-grid{display:block!important;height:auto!important;overflow:visible!important;margin:0!important}
  .is-carousel>*,[data-carousel]>*{width:auto!important}
  .card,.fa-card,.w-project,.w-widget,li{break-inside:avoid}   /* 1.1.0: sections may break, their cards not */
  footer,footer *{position:static!important;box-shadow:none!important;transform:none!important}
  footer{margin-top:2em;border-top:1px solid #bbb}
  .cta,a.button,.btn{color:#000!important;background:none!important;border:1px solid #888!important}
  h1,h2,h3{break-after:avoid}
  .card,.fa-card,.w-project,.w-widget{box-shadow:none!important;border:1px solid #bbb!important;background:#fff!important}
  a{color:#000;text-decoration:underline}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .hero-vis,.blob,.w-mosaic,.hero .seed,.seed{display:none!important}   /* 1.1.0: the large logo would fill a page of its own — the small one in the header stays */
  header.top .brand-mark img,header.top .brand-mark picture{width:28px!important;height:auto!important}
  .hero{grid-template-columns:1fr!important}
  *{animation:none!important;transition:none!important}
}
[data-view="print"] .carousel-bar,[data-view="print"] [data-gwydion-pi],[data-view="print"] .lleu-panel,[data-view="print"] [data-gwydion-seed]{display:none!important}
[data-view="print"] [data-carousel].is-carousel[class],[data-view="print"] [data-carousel][data-carousel]{display:block!important;height:auto!important;overflow:visible!important}
/* views.js 1.4.0: window functions on the side the device (or the person) expects — panels on larger screens; the phone keeps its thumb zone */
@media (min-width:601px) and (min-height:561px){
  [data-ctl-side="left"] .lm-mega>.lm-close,[data-ctl-side="left"] .lm-drop>.lm-close{right:auto!important;left:max(12px,calc((100% - 68rem) / 2))}
  [data-ctl-side="left"] .g-lleu .lleu-head .g-lleu-close{order:-1}
}
/* views.js 1.16.0: Lleu's close follows the same side as every other card, also the phone's top × */
.g-lleu .lleu-head>.g-lleu-menubox,.g-lleu .lleu-head>.g-lleu-page{order:1}
.g-lleu .lleu-head>.g-lleu-close-top,.g-lleu .lleu-head>.g-lleu-close{order:99}
[data-ctl-side="left"] .g-lleu .lleu-head>.g-lleu-close-top,[data-ctl-side="left"] .g-lleu .lleu-head>.g-lleu-close{order:-1}
[data-ctl-side="left"] .gw-refmenu-x{right:auto;left:6px}
[data-ctl-side="left"] .gw-expand-close{right:auto;left:8px}
[data-ctl-side="left"] .fb-x{float:left}
@media (min-width:601px) and (min-height:561px){[data-ctl-side="left"].lm-on header.top .lm-mega .lm-mega-grid,[data-ctl-side="left"] .lm-on header.top .lm-mega .lm-mega-grid{padding-left:56px;padding-right:var(--s4)}}
/* 1.2.0: the colour button at the top right (views.js 1.6.0) — the size of the language button's icon place */
.fa-theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 4px 0 auto;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;flex:0 0 auto}
.fa-theme-btn:hover,.fa-theme-btn:focus-visible{border-color:var(--accent,#fb683e);color:var(--accent,#fb683e)}
.fa-theme-btn+.lang-menu,.fa-theme-btn+.lang{margin-left:0!important}
[data-view="print"] .fa-theme-btn{display:none!important}
/* 1.3.0 (views.js 1.10.0, 1018c-Q869 a): the App view — the page navigates like Lleu */
html[data-view="app"] main{max-width:720px;margin-inline:auto}
html[data-view="app"] main .app-off{display:none!important}
html[data-view="app"] .fa-board,html[data-view="app"] .carousel-bar{display:none!important}
#app-home{padding:8px 0 16px;border:0!important;background:none!important;box-shadow:none!important}
#app-home[hidden]{display:none!important}
.app-title{display:flex;align-items:center;gap:10px;margin:8px 4px 14px;font:800 2rem/1.1 var(--sans,system-ui);letter-spacing:-.015em;color:var(--text)}
.app-title img{width:34px;height:auto}
.app-list{display:grid;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:16px;overflow:hidden;background:var(--surface,#fff);box-shadow:0 1px 2px rgb(16 42 67 / .05)}
.app-row{display:grid;grid-template-columns:36px 1fr 12px;align-items:center;gap:12px;min-height:60px;padding:8px 14px;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);color:var(--text);text-decoration:none}
.app-row:first-child{border-top:0}
.app-row::after{content:"›";color:var(--muted);font-size:1.3rem}
.app-row:hover{background:var(--sunken)}
.app-row:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.app-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent,#fb683e) 14%,transparent);color:var(--accent-text,var(--accent,#fb683e));font-weight:800}
.app-ic svg{width:20px;height:20px}
.app-tx{display:grid;min-width:0}
.app-tx b{font-size:1rem}
.app-tx small{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app-back{position:sticky;top:calc(var(--head-h,64px) + 4px);z-index:5;margin:6px 0 8px}
#app-back[hidden]{display:none}
.app-back-btn{min-height:40px;padding:0 14px 0 8px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface,#fff) 80%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--accent-text,#0a66d9);font:600 .95rem/1 var(--sans,system-ui);cursor:pointer}
html[data-view="app"] main>section:not(#app-home),html[data-view="app"] main>.fa-sheet>section{border-radius:20px}
#app-home > .gw-lp-mark{display:none!important}
#app-back{position:static!important;margin:0 0 6px!important}
@media (min-width:601px){html[data-view="app"] .fold-rail-left{display:none!important}}
/* 1.4.0 (views.js 1.11.0, 1018c-Q870): the path — from its start to its end point, the current step marked, forward steps lighter */
.gw-path ol{display:flex;align-items:center;gap:0;margin:0;padding:0 4px;list-style:none;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.gw-path ol::-webkit-scrollbar{display:none}
.gw-path li{flex:none;display:flex;align-items:center}
.gw-path li+li::before{content:"›";margin:0 4px;color:var(--muted);opacity:.7}
.gw-path button{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:30px;padding:0 8px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 .8rem/1 var(--sans,system-ui);cursor:pointer;text-decoration:underline dotted color-mix(in srgb,var(--muted) 45%,transparent);text-underline-offset:3px}
.gw-path button:hover{background:var(--sunken);color:var(--text)}
.gw-path button[aria-current]{background:color-mix(in srgb,var(--accent,#fb683e) 14%,transparent);color:var(--text);font-weight:700;text-decoration:none}
.gw-path .gw-path-fwd button{opacity:.55;font-style:italic}
.gw-path .gw-path-start button::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent,#fb683e);vertical-align:1px}
.gw-path .gw-path-end:not(:first-child) button::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;border:1.5px solid var(--accent,#fb683e);vertical-align:0}
.gw-path button:focus-visible{outline:3px solid var(--focus);outline-offset:-2px}
.gw-path-page{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);padding:2px max(12px,env(safe-area-inset-left));}
@media (min-width:900px){.gw-path-page ol{max-width:var(--wrap,1040px);margin-inline:auto}.gw-path-page button{max-width:32ch;font-size:.85rem}}
.gw-path-lleu{flex:none;padding:2px 6px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
@media print{.gw-path{display:none!important}}
/* 1.5.0 (views.js 1.12.0): the path upright in the side bar — start at the top, end at the bottom, a line through the dots */
.gw-path-side{position:fixed;z-index:30;padding:10px 8px 10px 6px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface,#fff) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 20px rgb(16 42 67 / .10);box-sizing:border-box}
.gw-path-side ol{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow-x:hidden;overflow-y:auto;max-height:inherit}
.gw-path-side li{position:relative;padding-left:16px}
.gw-path-side li+li::before{content:"";position:absolute;left:5px;top:-6px;height:12px;width:2px;margin:0;border-radius:2px;background:color-mix(in srgb,var(--accent,#fb683e) 40%,var(--border))}
.gw-path-side li::after{content:"";position:absolute;left:2px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--surface,#fff);border:1.5px solid color-mix(in srgb,var(--accent,#fb683e) 60%,var(--border));box-sizing:border-box}
.gw-path-side li.gw-path-start::after{background:var(--accent,#fb683e);border-color:var(--accent,#fb683e)}
.gw-path-side li:has(>[aria-current])::after{background:var(--accent,#fb683e);border-color:var(--accent,#fb683e);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#fb683e) 25%,transparent)}
.gw-path-side button{width:100%;max-width:none;text-align:left;justify-content:flex-start;min-height:30px;padding:0 6px;border-radius:8px;font-size:.78rem}
.gw-path-side .gw-path-start button::before,.gw-path-side .gw-path-end button::after{display:none}
.gw-path-side li.gw-path-fwd::after{border-style:dashed}
@media print{.gw-path-side{display:none!important}}
.gw-path-side:is(:hover,:focus-within){width:auto!important;min-width:230px;max-width:320px}   /* the names in full while the path is looked at */
/* 1.6.0 (views.js 1.13.0): the history button in the header and its list */
.gw-path-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text);cursor:pointer}
.gw-path-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--accent,#fb683e) 14%,transparent);color:var(--accent-text,var(--accent,#fb683e))}
.gw-path-btn+.lang-menu,.gw-path-btn+.lang,.gw-path-btn+.dock-explain,.gw-path-btn+.dock-account{margin-left:6px!important}
#gw-path-pop{position:fixed;z-index:60;width:min(320px,calc(100vw - 16px));padding:6px;border:1px solid var(--border);border-radius:16px;background:var(--surface,#fff);box-shadow:0 12px 32px rgb(16 42 67 / .22)}
#gw-path-pop ol{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,420px);overflow:auto;margin:0;padding:0;list-style:none}
#gw-path-pop li{display:block}#gw-path-pop li::before,#gw-path-pop li::after{display:none!important}
#gw-path-pop button{display:block;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gw-path-pop button[aria-current]{background:color-mix(in srgb,var(--accent,#fb683e) 14%,transparent);color:var(--accent-text,var(--accent,#fb683e));font-weight:700}
#gw-path-pop .gw-path-fwd button{color:var(--muted)}
#gw-path-pop ol{align-items:stretch;padding:0;overflow-x:hidden}
#gw-path-pop li{width:100%}
#gw-path-pop button{max-width:none;font:500 .92rem/1.3 inherit;text-decoration:none!important;border-bottom:0!important}
#gw-path-pop button::before,#gw-path-pop button::after{display:none!important}
/* 1.7.0 (views.js 1.14.0): a step to something temporary, and the element a step leads to */
#gw-path-pop .gw-path-gone button{color:var(--muted);cursor:default}#gw-path-pop .gw-path-gone small{display:block;font-size:.72rem;font-weight:400}
#gw-path-pop button small{white-space:normal}
#gw-path-pop button:has(small){min-height:52px;line-height:1.25}
.gw-path-hit{outline:3px solid var(--accent,#fb683e)!important;outline-offset:4px;border-radius:12px;transition:outline-color .6s}
.app-off-btn{display:block;margin:18px auto 8px;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);font:inherit;cursor:pointer}