/* Lorica shared components: buttons, badges, fields, segments, empty states and switches, one definition for the app
   page and the server pages. Shapes and sizes follow ChatGPT (reports/ChatGPT UI reference.md); colors come from tokens.css.
   Corners, like ChatGPT: every control is a pill; rows, boxes and multi-line fields are --r2; sheets and big panels --r3. */
body{overflow-wrap:break-word}table,button,select,summary,.btn,.badge,.pill,.chip,.ini,.mono{overflow-wrap:normal}.ini,.mono{white-space:nowrap}   /* a long word, URL or name never pushes past its box; table cells, buttons and initials never split a word */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:var(--rp);background:var(--surface);border:1px solid var(--line2);color:var(--text);font:500 15px/20px var(--sans);letter-spacing:-.2px;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--d1),border-color var(--d1),color var(--d1),box-shadow var(--d1),transform var(--d2) var(--e-spring)}
.btn:hover{background:var(--bg2)}
.btn:active{transform:scale(.96);transition-duration:var(--d1)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn .ico{width:18px;height:18px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.btn.pri:hover{background:var(--accentHi);border-color:var(--accentHi)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--bg2);color:var(--text)}
.btn.danger{color:var(--rose)}
.btn.on{background:var(--bg2);color:var(--muted)}
.btn.sm{min-height:36px;padding:0 var(--s3);font-size:14px}
.btn.sm .ico{width:16px;height:16px}
.btn.big{min-height:52px;padding:0 var(--s6);font-size:16px}
.badge{display:inline-flex;align-items:center;gap:var(--s1);padding:2px var(--s2);border-radius:var(--rp);background:var(--bg2);color:var(--muted);font:500 12px/16px var(--sans);white-space:nowrap}
.badge .ico{width:12px;height:12px}
.badge.s{color:var(--text)}
.badge.w{background:var(--roseSoft);color:var(--rose)}
.badge.ok{background:var(--tealSoft);color:var(--teal)}
.empty{margin:var(--s4) 0;padding:var(--s6) var(--s4);border-radius:var(--r2);background:var(--bg2);color:var(--muted);font-size:15px;line-height:20px;text-align:center}
.empty a{color:var(--text);font-weight:500}
/* the switch: .sw (settings rows) */
.sw i{position:relative;flex:none;width:40px;height:24px;border-radius:var(--rp);background:var(--track);transition:background-color .2s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--rp);background:var(--knob);box-shadow:var(--knobSh);transition:transform .25s var(--e-spring)}
.sw[aria-checked="true"] i{background:var(--teal)}
.sw[aria-checked="true"] i::after{transform:translateX(16px)}
/* one text field: every input, text area and select (the composer's own #inp opts out by its id) */
input:not([type]),input[type=text],input[type=email],input[type=search],input[type=url],input[type=number],input[type=date],input[type=password],textarea,select{width:100%;min-height:44px;padding:var(--s3) var(--s4);border-radius:var(--rp);border:1px solid var(--line2);background:var(--field);color:var(--text);font:16px/1.4 var(--sans);-webkit-user-select:text;user-select:text}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
input,textarea,select{transition:border-color var(--d1),box-shadow var(--d2) var(--e-out)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{border-radius:var(--r2);padding:var(--s3) var(--s4)}
/* one segmented control (ChatGPT's Chat / Work): a soft pill track, the chosen option a white pill with a hairline */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:var(--s1);border-radius:var(--rp);background:var(--bg2)}
.seg>button{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:40px;padding:0 var(--s4);border-radius:var(--rp);border:1px solid transparent;background:transparent;color:var(--muted);font:500 15px/20px var(--sans);letter-spacing:-.2px;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.seg>button:active{transform:scale(.97)}
.seg>button[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--sh1);color:var(--text)}
.seg[data-thumb]{position:relative;isolation:isolate;--dir:1}[dir="rtl"] .seg[data-thumb]{--dir:-1}   /* one raised thumb slides to the chosen tab (the page sets --n tabs and --i chosen), like iOS */
.seg[data-thumb]::before{content:"";position:absolute;z-index:-1;top:var(--s1);bottom:var(--s1);inset-inline-start:var(--s1);width:calc((100% - 2 * var(--s1)) / var(--n, 2));box-sizing:border-box;border-radius:var(--rp);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);transform:translateX(calc(var(--i, 0) * 100% * var(--dir)));transition:transform var(--d3) var(--e-spring)}
.seg[data-thumb]>button[aria-selected="true"]{background:transparent;border-color:transparent;box-shadow:none}.seg[data-thumb]>button{transition:color var(--d2)}
/* ---------- motion: one system for every page (durations --d1 to --d4, curves --e-out, --e-in, --e-spring) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes settle{from{opacity:0;transform:scale(1.03)}}
.sw:active i::after{transform:scale(.88)}.sw[aria-checked="true"]:active i::after{transform:translateX(16px) scale(.88)}
.empty{animation:rise var(--d3) var(--e-out) both}
.badge{transition:background-color var(--d1),color var(--d1)}
/* ---------- accordions (every <details>): height glides open and shut, the text fades with it; never a jump ---------- */
:root{interpolate-size:allow-keywords}   /* lets height animate to and from auto; browsers without it simply open at once */
details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size var(--d3) var(--e-out),opacity var(--d2) var(--e-out),content-visibility var(--d3) allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
details > summary + *{margin-top:0}   /* spacing inside an accordion is padding, so it folds away with the text (a margin would jump at the end) */
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}}
/* ---------- the language button: a globe that opens the 19 languages (server pages and the app page) ---------- */
.langPick{position:relative;flex:none}.langPick summary{list-style:none;display:flex;align-items:center;gap:4px;height:var(--hdrCtl);padding:0 10px;border-radius:var(--rp);border:1px solid var(--line2);font:500 13px/1 var(--sans);color:var(--text);cursor:pointer;transition:background-color var(--d1)}.langPick summary::-webkit-details-marker{display:none}.langPick summary svg{width:16px;height:16px}
@media (hover:hover){.langPick summary:hover{background:var(--bg2)}}.langPick[open] summary{background:var(--bg2)}
.langMenu{position:absolute;top:44px;inset-inline-start:0;z-index:20;width:210px;max-height:min(60vh,420px);overflow:auto;padding:var(--s2);border-radius:var(--r2);background:var(--raised);border:1px solid var(--line);box-shadow:var(--sh2);animation:rise var(--d2) var(--e-out) both}
.langMenu a{display:block;padding:8px 12px;border-radius:var(--ri);color:var(--text);text-decoration:none;font-size:15px;line-height:20px}.langMenu a[aria-current]{background:var(--bg2);font-weight:500}@media (hover:hover){.langMenu a:hover{background:var(--bg2)}}
@media (max-width:459px){.langMenu{position:fixed;top:auto;inset-inline:var(--s4);width:auto;margin-top:var(--s2)}}   /* phones: the menu drops below the globe and spans the screen, so it never runs off the edge */
/* ---------- buying: tick lists, credit packs, the turns meter (pricing page and Me page share these) ---------- */
.ticks{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:var(--s2)}
.ticks li{position:relative;padding-left:28px;font:400 15px/22px var(--sans);color:var(--muted)}.ticks li b{color:var(--text);font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:var(--rp);background:var(--tealSoft)}
.ticks li::after{content:"";position:absolute;left:5px;top:6px;width:6px;height:8px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s2);margin-top:var(--s4)}
.pack{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:64px;padding:var(--s3) var(--s4);border-radius:var(--r2);border:1px solid var(--line2);background:var(--surface);color:var(--text);text-decoration:none;font:inherit;text-align:left;cursor:pointer;transition:transform var(--d1) var(--e-out),border-color var(--d1)}
.pack:active{transform:scale(.98)}.pack:disabled{cursor:default;opacity:.55}.pack:disabled:active{transform:none}
@media (hover:hover){.pack:not(:disabled):hover{border-color:var(--text)}}
.pack .pL,.pack .pR{display:flex;flex-direction:column;gap:2px;min-width:0}.pack .pR{flex-direction:row;align-items:center;gap:var(--s2);flex:none}
.pack .n{font:500 17px/22px var(--sans);letter-spacing:-.2px}.pack .n small{font-size:15px;font-weight:400;color:var(--muted)}.pack .what{font-size:13px;line-height:18px;color:var(--faint)}
.pack .usd{font:500 15px/20px var(--sans);font-variant-numeric:tabular-nums}
.pack .tag{padding:1px var(--s2);border-radius:var(--rp);background:var(--tealSoft);color:var(--teal);font:500 12px/18px var(--sans);white-space:nowrap}
.pack.busy .pL,.pack.busy .pR{opacity:.35}
.uMeter{height:6px;border-radius:var(--rp);background:var(--bg2);overflow:hidden;margin:var(--s3) 0 var(--s2)}.uMeter i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--teal);transform-origin:left;transform:scaleX(var(--f,1));transition:transform var(--d4) var(--e-out)}
.ticks li{animation:rise var(--d3) var(--e-out) both}.ticks li:nth-child(2){animation-delay:40ms}.ticks li:nth-child(3){animation-delay:80ms}.ticks li:nth-child(4){animation-delay:120ms}.ticks li:nth-child(5){animation-delay:160ms}
.pack{animation:rise var(--d3) var(--e-out) both}.pack:nth-child(2){animation-delay:50ms}.pack:nth-child(3){animation-delay:100ms}
@keyframes landed{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}.landed{display:inline-block;animation:landed var(--d4) var(--e-spring)}   /* a number that just grew, like credits after a payment */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.hWide{display:contents}.burger{display:none}   /* the header menu (site and app pages): wide screens show every control in the bar */
@media (max-width:639px){.hWide,.hMe{display:none}.burger{display:block}   /* phones: the name, Create and a menu for the rest */
  .burger>summary{list-style:none;display:grid;place-items:center;width:var(--hdrCtl);height:var(--hdrCtl);border-radius:var(--rp);border:1px solid var(--line2);color:var(--text);cursor:pointer;transition:background-color var(--d1),transform var(--d2) var(--e-spring)}.burger>summary::-webkit-details-marker{display:none}.burger>summary:active{transform:scale(.92)}
  .burger svg{width:20px;height:20px;flex:none}.burger .bx,.burger[open] .b3{display:none}.burger[open] .bx{display:inline}.burger[open]>summary{background:var(--bg2)}
  .bMenu{position:absolute;top:calc(100% + var(--s1));inset-inline:var(--s3);max-height:calc(100dvh - 72px);overflow:auto;padding:var(--s2);border-radius:var(--r2);background:var(--raised);border:1px solid var(--line);box-shadow:var(--sh2);animation:rise var(--d2) var(--e-out) both}
  .bRow{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:0 var(--s3);border-radius:var(--ri);color:var(--text);text-decoration:none;font:400 16px/20px var(--sans);list-style:none;cursor:pointer}.bRow::-webkit-details-marker{display:none}button.bRow{width:100%;border:0;background:none;text-align:start}.bRow svg{width:20px;height:20px;flex:none;color:var(--muted)}.bRow span{margin-inline-start:auto;color:var(--muted);font-size:14px}
  @media (hover:hover){.bRow:hover,.bLangs a:hover{background:var(--bg2)}}.bLang[open]>summary{background:var(--bg2)}
  .thm2.toL,:root[data-theme="dark"] .thm2.toD{display:none}:root[data-theme="dark"] .thm2.toL{display:flex}
  .bLangs{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:var(--s2) 0 var(--s1)}.bLangs a{padding:10px var(--s3);border-radius:var(--ri);color:var(--text);text-decoration:none;font-size:15px;line-height:20px}.bLangs a[aria-current]{background:var(--bg2);font-weight:500}}
@media (max-width:639px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thm2.toD{display:none}:root:not([data-theme="light"]) .thm2.toL{display:flex}}   /* the menu offers the other look */