/* ============================================================ APPS.sy shell Layout only. Every colour, font and radius comes from themes.css. Tools may reuse the tool kit at the bottom. ============================================================ */ /* ============================================================ 2. BASE ============================================================ */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation} html,body{min-height:100%;} body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px; line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none} button,input{font:inherit;color:inherit} input,textarea,[contenteditable],.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} .app{ width:100%; max-width:1000px; margin:0 auto; display:flex; flex-direction:column; padding:max(14px,env(safe-area-inset-top)) clamp(16px,4vw,32px) 120px; } .view[hidden]{display:none} /* ============================================================ 3. HEADER ============================================================ */ .head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding-top:6px} .brand{--bh:48px;display:flex;align-items:flex-start;gap:12px} .brand .mark{width:var(--bh);height:var(--bh);flex:none;color:var(--tile-bg);display:block} .brand .mark svg{display:block;width:100%;height:100%;fill:currentColor} .brand .txt{height:var(--bh);display:flex;flex-direction:column;justify-content:space-between; align-items:stretch} .wordmark{font-family:var(--font-display);font-size:31px;font-weight:var(--head-weight); letter-spacing:var(--head-spacing);line-height:1;white-space:nowrap} .wordmark sup{font-size:.36em;vertical-align:super;letter-spacing:.02em;margin-left:.05em} .head-sub{font-size:12px;color:var(--muted);line-height:1;text-align:right} .icon-btn{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center; background:none;border:none;border-radius:var(--r-field);color:var(--muted);cursor:pointer} .icon-btn:active{background:var(--surface)} .icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* ============================================================ 4. SEARCH + CHIPS ============================================================ */ .search{display:flex;align-items:center;gap:8px;margin:14px 0 6px;height:44px;padding:0 12px; background:var(--surface);border-radius:var(--r-field);color:var(--muted); border:1.5px solid transparent;transition:border-color .25s,background .25s} .search:focus-within{border-color:var(--accent);background:var(--bg)} .search>svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; transition:transform .35s cubic-bezier(.34,1.56,.64,1),stroke .25s} .search:focus-within>svg{transform:scale(1.14) rotate(-12deg);stroke:var(--accent)} .search input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none; color:var(--fg);font-size:16px} .search input::placeholder{color:var(--muted);opacity:1} .search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button{-webkit-appearance:none} .clear{width:30px;height:30px;flex:none;border:none;background:none;display:flex; align-items:center;justify-content:center;color:var(--muted);cursor:pointer} .clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .hint{font-size:11.5px;color:var(--muted);padding:4px 4px 0;display:flex; align-items:center;justify-content:space-between;gap:10px} .hint button{border:none;background:none;color:var(--accent);font-size:11.5px;cursor:pointer;padding:4px} .hint[hidden]{display:none} .chipwrap{position:relative;margin:14px calc(clamp(16px,4vw,32px) * -1) 18px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .chipwrap::-webkit-scrollbar{display:none} .chips{position:relative;display:inline-flex;gap:6px; padding:4px clamp(16px,4vw,32px) 8px;min-width:100%} .pill{position:absolute;top:4px;left:0;height:34px;background:var(--tile-bg); border-radius:var(--r-field);z-index:0; transition:transform .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1)} .chip{position:relative;z-index:1;flex:none;height:34px;padding:0 14px;display:inline-flex; align-items:center;background:var(--surface);color:var(--muted);border:1px solid transparent; border-radius:var(--r-field);font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer; transition:color .25s,background .25s} .chip[aria-pressed="true"]{color:var(--tile-fg);background:transparent} /* ============================================================ 5. GRID ============================================================ */ .sect{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);margin:0 0 12px 2px} .sect[hidden]{display:none} .strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none; margin:0 calc(clamp(16px,4vw,32px) * -1) 24px;padding:0 clamp(16px,4vw,32px) 4px; -webkit-overflow-scrolling:touch} .strip::-webkit-scrollbar{display:none} .strip:empty{display:none} .strip .app-btn{width:76px;flex:none} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:22px 10px} .app-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px; background:none;border:none;padding:0;cursor:pointer;text-decoration:none;color:inherit; -webkit-touch-callout:none} .tile{position:relative;width:100%;aspect-ratio:1/1;max-width:76px; display:flex;align-items:center;justify-content:center;background:var(--tile-bg);color:var(--tile-fg); border:var(--tile-border);border-radius:var(--r-tile);box-shadow:var(--tile-shadow); transition:transform .4s cubic-bezier(.34,1.56,.64,1)} .app-btn:active .tile{transform:scale(.88);transition-duration:.09s} .app-btn.pressing .tile{transform:scale(.93)} .tile svg{width:var(--glyph-size);height:var(--glyph-size);fill:none;stroke:currentColor; stroke-width:var(--glyph-w);stroke-linecap:round;stroke-linejoin:round} .tile .lt{font-family:var(--font-mono);font-size:15px;font-weight:600; font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1} .app-label{font-size:var(--label-size);font-weight:var(--label-weight); text-transform:var(--label-transform);letter-spacing:var(--label-spacing);line-height:1.25; text-align:center;color:var(--fg);max-width:92px} /* .pin{position:absolute;top:-4px;right:4px;width:16px;height:16px;border-radius:50%; background:var(--accent);color:var(--accent-fg);display:flex;align-items:center; justify-content:center;font-size:9px;line-height:1;box-shadow:0 0 0 2px var(--bg)} */ .empty{text-align:center;color:var(--muted);font-size:14px;padding:44px 0} .empty[hidden]{display:none} .empty svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;margin:0 auto 8px;display:block} @keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)} 40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}} .empty.shake{animation:nudge .5s ease-in-out} /* ============================================================ 6. TOOL VIEW ============================================================ */ .tool-head{display:flex;align-items:center;gap:4px;padding:14px 0 16px} .back{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 10px 0 4px;margin-left:-4px; background:none;border:none;border-radius:var(--r-field);color:var(--accent);font-size:16px;cursor:pointer} .back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .back:active{opacity:.5} .tool-title{font-family:var(--font-display);font-size:17px;font-weight:600; letter-spacing:var(--head-spacing);margin-left:6px} .tool{display:flex;flex-direction:column;gap:16px;padding-bottom:34px;max-width:560px} .tool-hero{display:flex;align-items:center;gap:14px;padding:18px;background:var(--surface); border-radius:var(--r-card)} .tool-hero .tile{width:58px;height:58px;max-width:58px;flex:none} .tool-hero h3{font-family:var(--font-display);font-size:19px;font-weight:var(--head-weight); letter-spacing:var(--head-spacing);line-height:1.15} .tool-hero p{font-size:13px;color:var(--muted);margin-top:2px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em} .field input{height:48px;padding:0 14px;background:var(--surface);color:var(--fg); border:1px solid var(--line);border-radius:var(--r-field);font-size:17px;outline:none} .row{display:flex;gap:10px} .btn{flex:1;height:50px;border:none;border-radius:var(--r-field);font-size:16px;font-weight:600; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px} .btn-primary{background:var(--accent);color:var(--accent-fg)} .btn-ghost{background:var(--surface);color:var(--fg)} .btn:active{opacity:.7} .btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30} .btn.done svg{animation:tick .45s cubic-bezier(.65,0,.35,1) forwards} @keyframes tick{to{stroke-dashoffset:0}} .result{padding:22px;background:var(--surface);border-radius:var(--r-card);text-align:center} .result b{display:block;font-family:var(--font-mono);font-size:36px;font-weight:600; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .result span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .note{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6;padding:2px 10px} .sk{height:15px;border-radius:8px;background:var(--surface);margin-bottom:10px; position:relative;overflow:hidden;max-width:560px} .sk.a{height:94px;border-radius:var(--r-card)} .sk.b{width:76%}.sk.c{width:52%} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(128,128,128,.2),transparent); animation:shim 1.3s ease-in-out infinite} @keyframes shim{to{transform:translateX(100%)}} /* ============================================================ 7. SHEET + TOAST ============================================================ */ .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .22s ease; z-index:40;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .scrim.open{opacity:1} .scrim[hidden]{display:none} .sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:calc(100dvh - 32px - env(safe-area-inset-top));display:flex; flex-direction:column;background:var(--bg);border-top:1px solid var(--line); border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom); transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1)} .sheet.open{transform:translateY(0)} .sheet[hidden]{display:none} @media(min-width:600px){.sheet{left:50%;transform:translate(-50%,100%);width:480px} .sheet.open{transform:translate(-50%,0)}} .sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--muted);opacity:.35;margin:8px auto 2px} .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 4px 20px} .sheet-head h3{font-family:var(--font-display);font-size:19px;font-weight:var(--head-weight); letter-spacing:var(--head-spacing)} .sheet-body{overflow-y:auto;padding:0 12px 12px;-webkit-overflow-scrolling:touch} .sheet-foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line); font-size:11.5px;color:var(--muted);font-family:var(--font-mono)} .seg-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em; padding:10px 8px 8px;font-weight:600} .seg{display:flex;gap:4px;background:var(--surface);border-radius:var(--r-field);padding:4px;margin:0 8px} .seg button{flex:1;height:40px;border:none;background:none;border-radius:calc(var(--r-field) - 2px); font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .2s} .seg button[aria-pressed="true"]{background:var(--bg);color:var(--fg);font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.14)} .divider{height:1px;background:var(--line);margin:18px 8px 4px} .theme-row{width:100%;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px; margin-bottom:2px;background:none;border:none;border-radius:var(--r-card);text-align:left;cursor:pointer} .theme-row[aria-checked="true"]{background:var(--surface)} .theme-chip{width:46px;height:46px;flex:none;border-radius:11px;display:flex;align-items:center; justify-content:center;gap:5px;border:1px solid var(--line);background:var(--bg)} .theme-chip i{display:block;border-radius:4px} .theme-chip i.a{width:16px;height:16px;background:var(--tile-bg)} .theme-chip i.b{width:9px;height:9px;background:var(--accent)} .theme-meta{flex:1;min-width:0} .theme-name{display:block;font-size:15.5px;font-weight:600;line-height:1.25} .theme-desc{display:block;font-size:12px;color:var(--muted);line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .theme-check{width:20px;height:20px;flex:none;color:var(--accent);opacity:0} .theme-row[aria-checked="true"] .theme-check{opacity:1} .theme-check svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} .toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:60; transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--fg);color:var(--bg); padding:10px 16px;border-radius:999px;font-size:13px;font-weight:500; transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .22s} .toast.show{transform:translate(-50%,0);opacity:1} .err{position:fixed;left:8px;right:8px;bottom:8px;z-index:99;background:#B3141C;color:#fff; padding:10px 12px;border-radius:10px;font:12px/1.4 ui-monospace,Menlo,monospace;display:none} ::view-transition-old(root),::view-transition-new(root){animation-duration:.26s} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ============================================================ TOOL KIT Shared pieces every tool file may use. Anything beyond this goes in the tool's own