/* Atlas PWA: Atlas Apps builder (js/apps-ui.js). Same claymorphism as app.css; colours come from
   the CSS variables there, which theme.css redefines for the dark theme, so nothing here is
   hard-coded white or black. Phone first: works from 320px wide, taps are 44px or more. */

.apps-root{display:grid;gap:14px;align-content:start}
.apps-root>.card,.apps-root>.card+.card{margin:0}
.apps-title{margin:0;overflow-wrap:anywhere}
.apps-tight{gap:6px}
.apps-wrap{overflow-wrap:anywhere}
.apps-bad{color:var(--red)}
.apps-bullets{margin:0 0 .8em;padding-left:20px}
.apps-bullets li{margin:.2em 0}
.apps-hint{display:block;font-weight:500;margin-top:2px}

/* progress while the server works */
.apps-busy{position:sticky;top:calc(64px + var(--safe-top));z-index:8;display:grid;gap:8px}

/* chips that wrap (the app-bar style .chips scroll sideways) */
.apps-chips{display:flex;flex-wrap:wrap;gap:8px}
.apps-chips .chip{min-height:40px}
.apps-swatch{width:40px;height:40px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--outline);cursor:pointer;padding:0}
.apps-swatch.on{box-shadow:0 0 0 3px var(--ink)}

/* editor rows */
.apps-field{display:flex;align-items:center;gap:4px;border-radius:18px;background:var(--surface);box-shadow:var(--clay);overflow:hidden}
.apps-field.sens{background:var(--warn);color:var(--on-warn)}
.apps-field-main{flex:1;min-width:0;display:grid;gap:2px;min-height:56px;padding:8px 6px 8px 14px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.apps-field-main b{font:600 16px var(--d);overflow-wrap:anywhere}
.apps-field-main .meta{font-size:13px;opacity:.8}
.apps-move{display:flex;gap:4px;padding-right:6px}
.apps-move .icon-btn{width:44px;height:44px}
.icon-btn:disabled{opacity:.4;cursor:default}
.apps-perm{width:100%;border:0;font:inherit;text-align:left;cursor:pointer;background:var(--surface)}
.apps-two>*{flex:1 1 120px}
.apps-adder{padding-top:10px;border-top:2px solid var(--outline-soft)}
.apps-block{display:flex;gap:8px;align-items:flex-start}
.apps-block>label{flex:1;min-width:0}
.apps-block>b{flex:1;align-self:center;overflow-wrap:anywhere}
.apps-switch{min-height:44px}
.block.warnblock{background:var(--warn);color:var(--on-warn)}

/* buttons */
.btn.danger{background:var(--surface);color:var(--red)}
.btn.danger:active{box-shadow:0 2px 0 #e2d8f7}

/* Create app / Ask Atlas, stuck above the tab bar */
.apps-actionbar{position:sticky;bottom:calc(84px + var(--safe-bottom));z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:26px;background:var(--surface);box-shadow:var(--clay)}
.apps-actionbar .btn{padding:8px 10px;flex-wrap:wrap;text-align:center;line-height:1.2}
.apps-applybar{display:grid;gap:10px}

/* the preview */
.apps-frame{display:grid;gap:10px;padding:14px;border-radius:24px;border-top:6px solid var(--primary);background:var(--surface);box-shadow:var(--clay)}
.apps-frame h3{margin:0}
.apps-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.apps-wide{grid-column:1/-1}
.apps-stat{align-content:center;text-align:center}
.apps-number{font:600 26px var(--d);overflow-wrap:anywhere}
.apps-bar-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:8px;align-items:center;font-size:14px}
.apps-bar-row span:first-child{overflow-wrap:anywhere}
.apps-barfill{display:block;height:10px;border-radius:5px;background:var(--outline-soft);overflow:hidden}
.apps-barfill i{display:block;height:100%;border-radius:5px;background:var(--primary)}
.apps-rec{display:grid;gap:2px;padding:10px 12px;border-radius:16px;background:var(--primary-soft);color:var(--on-primary-soft);overflow-wrap:anywhere}
.apps-scroll{overflow-x:auto;border-radius:14px}
.apps-sample{border-collapse:collapse;font-size:13px;min-width:100%}
.apps-sample th,.apps-sample td{padding:6px 10px;text-align:left;white-space:nowrap;border-bottom:2px solid var(--outline-soft)}
.apps-sample th{background:var(--primary-soft);color:var(--on-primary-soft);font-weight:700}
details summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}

/* users, audit log, temporary password */
.apps-log{display:grid;gap:2px;padding:8px 0;border-bottom:2px solid var(--outline-soft)}
.apps-temp{margin:0 0 .8em;padding:14px;border-radius:18px;background:var(--warn);color:var(--on-warn);text-align:center;font:700 24px ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;user-select:all;overflow-wrap:anywhere}