/* No I18N */ /* ========================================================================== Vani API documentation — approved visual system (oas-docs-revamp) Ported from the signed-off design mockup. Token system: light on bare :root, dark from the OS via prefers-color-scheme (guarded), and an explicit [data-theme] choice winning over both. Brand: vanihq.com — Zoho Puvi, #6934ff accent, plum code panes, gradient as hairline + text highlight only. ========================================================================== */ /* ============ Zoho Puvi (real brand face, Zoho CDN) ============ */ @font-face{font-family:'Zoho Puvi';src:url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Zoho Puvi';src:url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Zoho Puvi';src:url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Zoho Puvi';src:url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ============ Tokens — light (bare :root) ============ */ :root{ --row-sub:#fafafb; /* Enum chips: deliberately NEUTRAL, not brand-tinted. Forty of them in one cell read as a warning strip in any accent colour, and --panel-2 still carries a violet cast. */ --chip-bg:#f3f3f5; --chip-line:#e3e3e8; --chip-ink:#4a4a55; --ink:#201829; --ink-2:#4a4155; --muted:#6d6478; --faint:#9a8fa6; --ground:#ffffff; --panel:#fff8f2; --panel-2:#faf5ff; --card:#ffffff; --line:#ece4f0; --line-2:#e0d6e8; --accent:#6934ff; --accent-ink:#5828e0; --accent-hover:#3e13b9; --accent-soft:#eee8ff; --accent-soft-2:#f6f2ff; --code-bg:#2a1f31; --code-ink:#f2edf7; --code-muted:#9f92a6; --code-line:#3d3046; --code-key:#c9b8ff; --code-str:#ffb38a; --code-num:#8ad2ff; --code-cmd:#8ce3b0; --get:#0a7ad1; --get-bg:#e8f3fc; --post:#0d8a60; --post-bg:#e6f5ef; --put:#b36b00; --put-bg:#fcf2e2; --del:#d23b4e; --del-bg:#fdecee; --warn-ink:#8a5a00; --warn-bg:#fff3dd; --danger-ink:#a52a3c; --danger-bg:#fdecee; --shadow:0 1px 2px rgba(32,24,41,.05),0 4px 16px rgba(32,24,41,.06); --shadow-lg:0 2px 6px rgba(32,24,41,.06),0 12px 32px rgba(32,24,41,.09); --grad:linear-gradient(90deg,#008aef,#6e55ea,#8244c0,#cf008d,#ff4e00,#ff6d00); --dot:rgba(105,52,255,.10); --r-s:6px; --r-m:8px; --r-l:16px; --r-xl:24px; --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace; --body-weight:400; /* Greyscale antialiasing suits dark-on-light. Overridden in dark: see below. */ --smoothing:antialiased; --smoothing-moz:grayscale; } /* Dark by OS preference. Guarded so an explicit light choice still wins; an explicit dark choice is handled by the [data-theme="dark"] block below. Both dark paths carry the same raised contrast, subpixel smoothing and body weight. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --row-sub:rgba(255,255,255,.028); --chip-bg:rgba(255,255,255,.055); --chip-line:rgba(255,255,255,.12); --chip-ink:#cfc9d6; --ink:#f7f4fa; --ink-2:#d8d0e0; --muted:#a99fb3; --faint:#7d7289; --ground:#171019; --panel:#211826; --panel-2:#241a2e; --card:#1e1524; --line:#332839; --line-2:#3f3247; --accent:#9d80ff; --accent-ink:#a98fff; --accent-hover:#c0adff; --accent-soft:#2c2148; --accent-soft-2:#251c38; --code-bg:#241b2c; --code-ink:#f2edf7; --code-muted:#9f92a6; --code-line:#382c42; --get:#5db4f5; --get-bg:#15293a; --post:#4ecb9b; --post-bg:#12302a; --put:#e8a94e; --put-bg:#332714; --del:#f07d8c; --del-bg:#3a1e26; --warn-ink:#e8b45e; --warn-bg:#302512; --danger-ink:#f07d8c; --danger-bg:#3a1e26; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.4); --dot:rgba(157,128,255,.10); --smoothing:auto; --smoothing-moz:auto; --body-weight:450; } } /* An explicit dark choice, stamped by the pre-paint script. Wins over the OS in both directions: this block for dark, the :not([data-theme="light"]) guard above for light. */ :root[data-theme="dark"]{ --row-sub:rgba(255,255,255,.028); --chip-bg:rgba(255,255,255,.055); --chip-line:rgba(255,255,255,.12); --chip-ink:#cfc9d6; /* Raised from #f2edf7/#cfc6d9: light-on-dark needs more separation to read as crisp. */ --ink:#f7f4fa; --ink-2:#d8d0e0; --muted:#a99fb3; --faint:#7d7289; --ground:#171019; --panel:#211826; --panel-2:#241a2e; --card:#1e1524; --line:#332839; --line-2:#3f3247; --accent:#9d80ff; --accent-ink:#a98fff; --accent-hover:#c0adff; --accent-soft:#2c2148; --accent-soft-2:#251c38; --code-bg:#241b2c; --code-ink:#f2edf7; --code-muted:#9f92a6; --code-line:#382c42; --get:#5db4f5; --get-bg:#15293a; --post:#4ecb9b; --post-bg:#12302a; --put:#e8a94e; --put-bg:#332714; --del:#f07d8c; --del-bg:#3a1e26; --warn-ink:#e8b45e; --warn-bg:#302512; --danger-ink:#f07d8c; --danger-bg:#3a1e26; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.4); --dot:rgba(157,128,255,.10); /* Subpixel rendering on dark grounds: greyscale antialiasing thins light glyphs and reads blurry, so dark opts back into the platform default and adds a little weight. */ --smoothing:auto; --smoothing-moz:auto; --body-weight:450; } /* ============ Base ============ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--ground); color:var(--ink); font:var(--body-weight) 15px/1.6 'Zoho Puvi',-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:var(--smoothing); -moz-osx-font-smoothing:var(--smoothing-moz); text-rendering:optimizeLegibility; } /* Inherit the smoothing decision into controls, which reset it by default. */ button,select,input,textarea{-webkit-font-smoothing:var(--smoothing);-moz-osx-font-smoothing:var(--smoothing-moz)} /* Code panes are always on a dark ground: keep them subpixel in both themes. */ pre,code,.mono,.codeline{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto} a{color:var(--accent-ink);text-decoration:none} a:hover{color:var(--accent-hover)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}} h1,h2,h3{text-wrap:balance;margin:0} .mono{font-family:var(--mono)} kbd{font-family:var(--mono);font-size:11px;background:var(--panel-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted)} .hidden{display:none!important} img{max-width:100%} /* ============ Top bar ============ */ .topbar{ position:sticky;top:0;z-index:50;height:58px;display:flex;align-items:center;gap:20px; padding:0 20px;background:var(--ground);border-bottom:1px solid var(--line); } .topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad);opacity:.35} .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--ink)} .brand:hover{color:var(--ink)} /* The mark is a full-colour brand asset -- no plate behind it. The accent-filled rounded square here was scaffolding from the placeholder glyph it replaced. */ .brand .mark{width:28px;height:28px;display:grid;place-items:center;flex:none} .brand .mark img{width:28px;height:28px;object-fit:contain} .brand .sep{color:var(--line-2);font-weight:400} .brand .prod{color:var(--muted);font-weight:500} .vpill{font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:2px 9px} .top-right{margin-left:auto;display:flex;align-items:center;gap:12px} .dc-wrap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);border:1px solid var(--line-2);border-radius:9px;padding:0 4px 0 10px;background:var(--card)} .dc-wrap select.datacenter-select{ border:0;background:transparent;color:var(--ink);font:600 13px 'Zoho Puvi',sans-serif; padding:6px 4px;cursor:pointer;max-width:220px; } .iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);display:grid;place-items:center;cursor:pointer} .iconbtn:hover{color:var(--accent-ink);border-color:var(--accent)} .cta{ height:36px;padding:0 16px;border-radius:10px;border:0;background:var(--accent-ink);color:#fff; font:600 13.5px 'Zoho Puvi',sans-serif;cursor:pointer;transition:background .15s; display:inline-flex;align-items:center; } .cta:hover{background:var(--accent-hover);color:#fff} /* ============ Shell ============ */ .shell{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:calc(100vh - 58px)} .rail{ border-right:1px solid var(--line);padding:22px 14px 40px;position:sticky;top:58px;height:calc(100vh - 58px); overflow-y:auto;background:var(--ground); } .rail .grp{margin-bottom:22px} .rail .eyebrow{ display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.12em; color:var(--faint);padding:0 10px;margin-bottom:6px;text-transform:uppercase; } .tchip{font-size:9px;letter-spacing:.06em;background:var(--warn-bg);color:var(--warn-ink);border-radius:4px;padding:1px 5px;font-weight:600} .rail a.item{ display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-2); transition:background .12s; } .rail a.item:hover{background:var(--panel-2);color:var(--ink)} .rail a.item.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .rail a.item .n{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums} .rail a.item.active .n{color:var(--accent-ink)} /* ============ Landing ============ */ .hero{ position:relative;background:var(--panel);border-bottom:1px solid var(--line); padding:64px 48px 56px;overflow:hidden; } .hero .dots{position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.3px);background-size:22px 22px;pointer-events:none} .hero-in{position:relative;max-width:760px} .hero .eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--accent-ink);margin-bottom:14px} .hero h1{font-size:40px;line-height:1.15;font-weight:700;letter-spacing:-.01em} .hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{margin:16px 0 26px;font-size:16.5px;color:var(--ink-2);max-width:56ch} .hero .btns{display:flex;gap:12px;flex-wrap:wrap} .btn2{ height:40px;padding:0 18px;border-radius:10px;display:inline-flex;align-items:center;gap:8px; font:600 14px 'Zoho Puvi',sans-serif;cursor:pointer;border:1px solid transparent; } .btn2.primary{background:var(--accent-ink);color:#fff} .btn2.primary:hover{background:var(--accent-hover);color:#fff} .btn2.ghost{border-color:var(--line-2);color:var(--ink);background:var(--card)} .btn2.ghost:hover{border-color:var(--accent);color:var(--accent-ink)} .stats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap} .stat b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums} .stat span{font-size:12.5px;color:var(--muted)} .land{padding:44px 48px 72px;max-width:1120px} .land h2{font-size:20px;font-weight:700;margin:0 0 4px} .land .sub{color:var(--muted);font-size:14px;margin:0 0 22px} .cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:44px} a.gcard{color:inherit} .gcard{ border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 15px;background:var(--card); display:flex;flex-direction:column;gap:6px;transition:border-color .15s, box-shadow .15s, transform .15s; } a.gcard:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px);color:inherit} .gcard .top{display:flex;align-items:center;gap:8px} .gcard .nm{font-weight:700;font-size:15.5px;color:var(--ink)} .gcard .cnt{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums} .gcard .ds{font-size:13px;color:var(--muted);line-height:1.5} .gcard .tg{font-size:11.5px;color:var(--faint);margin-top:auto;padding-top:6px} .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1120px} .codeline{ font-family:var(--mono);font-size:12.5px;background:var(--code-bg);color:var(--code-ink); border-radius:10px;padding:12px 14px;overflow-x:auto;white-space:pre;line-height:1.7; } .codeline .c{color:var(--code-muted)} .scopechips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .scope{font-family:var(--mono);font-size:11.5px;background:var(--accent-soft-2);border:1px solid var(--accent-soft);color:var(--accent-ink);border-radius:6px;padding:2px 8px} /* OAS download affordance (group pages + landing) */ .oasdl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:9px;padding:6px 12px;background:var(--card)} .oasdl b{font-weight:600;color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase} .oasdl a{font-family:var(--mono);font-size:12px;font-weight:600} .oasdl .bar{color:var(--line-2)} /* ============ Reference page ============ */ .doc{padding:36px 44px 90px;min-width:0} .crumb{font-size:12.5px;color:var(--faint);margin-bottom:10px} .crumb b{color:var(--muted);font-weight:500} .pagehead{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap} .pagehead .grow{flex:1;min-width:260px} .pagetitle{font-size:30px;font-weight:700;display:inline-block;position:relative;padding-bottom:6px} .pagetitle::after{content:'';position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:2px;background:var(--grad)} .lede{margin:14px 0 0;color:var(--ink-2);font-size:15.5px;max-width:62ch} .tagsec-h{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin:44px 0 6px} .tagsec-h h2{font-size:19px;font-weight:700} .tagsec-h .td{font-size:13px;color:var(--muted)} .op{padding:30px 0 24px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;scroll-margin-top:76px} .op:last-child{border-bottom:0} .op .prose{min-width:0} .opcode{min-width:0} .opcode-in{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px} .ophead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;scroll-margin-top:76px} .method{font:700 11px/1 var(--mono);letter-spacing:.05em;border-radius:6px;padding:5px 8px;flex:none} .m-GET,.m-get{color:var(--get);background:var(--get-bg)} .m-POST,.m-post{color:var(--post);background:var(--post-bg)} .m-PUT,.m-put{color:var(--put);background:var(--put-bg)} .m-DELETE,.m-del{color:var(--del);background:var(--del-bg)} /* The tail carries the page's normal ink at normal weight; the shared prefix recedes one step. Same distinction the boldface was making, without a second emphasis in a row that already has a coloured method badge -- and the line box is unchanged, so the collapsed row keeps its height. */ .path{font-family:var(--mono);font-size:13px;color:var(--ink);word-break:break-all} .path-pre{color:var(--muted);font-weight:400} .alink{color:var(--faint);flex:none;cursor:pointer;background:none;border:0;padding:2px;display:grid;place-items:center} .alink:hover{color:var(--accent-ink)} .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px} .chip.danger{background:var(--danger-bg);color:var(--danger-ink)} /* A summary is a sentence, not a title. At 16.5px/600 with no measure, a two-sentence summary set itself as an oversized heading across the whole content column. Sized and weighted to sit between .opdesc below it (14px/400/--ink-2/64ch) and a real heading, with a reading measure so a long one wraps at a sensible width instead of running the column. */ .opsum{ font-size:15px;font-weight:500;line-height:1.55;color:var(--ink); /* 66ch measured wider than the prose column itself, so it constrained nothing. 55ch is ~580px here against a 658px column: a real measure at this width, and a firm cap on the very wide viewports where the column grows and a full-bleed sentence looks worst. */ max-width:55ch;margin-top:10px; } .opdesc{color:var(--ink-2);font-size:14px;margin-top:8px;max-width:64ch} .opdesc p{margin:0 0 8px} .banner{ display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--warn-ink); border-radius:10px;padding:10px 14px;font-size:13px;margin-top:14px; } /* facts spec strip — primary API details in one compact row (never chips) */ .facts{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;margin-top:14px;overflow:hidden;max-width:660px;background:var(--card)} .facts .fc{display:flex;flex-direction:column;gap:3px;padding:8px 16px;border-right:1px solid var(--line)} .facts .fc:last-child{border-right:0;flex:1;min-width:200px} .facts .fl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600} .facts .fv{font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.45} .facts .fv code{font-family:var(--mono);font-size:11.5px;background:var(--accent-soft-2);border:1px solid var(--accent-soft);border-radius:6px;padding:1px 7px;color:var(--accent-ink);white-space:nowrap} .ft{font:700 10px var(--mono);letter-spacing:.05em;border-radius:5px;padding:2px 6px} .ft-CREATE{color:var(--post);background:var(--post-bg)} .ft-READ{color:var(--get);background:var(--get-bg)} .ft-UPDATE{color:var(--put);background:var(--put-bg)} .ft-DELETE{color:var(--del);background:var(--del-bg)} /* parameter tables */ table.params{width:100%;border-collapse:collapse;font-size:13.5px} table.params th{ text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint); font-weight:600;padding:0 12px 8px 0;border-bottom:1px solid var(--line); } table.params td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top} table.params tr:last-child td{border-bottom:0} td.pn{font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink)} td.pt{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap} .req{color:var(--del);font-size:10px;font-weight:700;letter-spacing:.05em;margin-left:6px} .opt{color:var(--faint);font-size:10px;font-weight:600;letter-spacing:.05em;margin-left:6px} td.pd{color:var(--ink-2)} .constraint{font-size:11px;color:var(--faint);font-family:var(--mono)} .enumtbl{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden} .enumtbl .er{display:flex;gap:14px;padding:8px 13px;border-bottom:1px solid var(--line);font-size:13px} .enumtbl .er:last-child{border-bottom:0} .enumtbl .er:nth-child(odd){background:var(--panel-2)} .enumtbl .ev{font-family:var(--mono);font-size:12px;color:var(--accent-ink);min-width:150px;flex:none} .enumtbl .ed{color:var(--ink-2)} /* collapsible parameter sections */ .paramsec{margin-top:24px} .paramsec summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:2px 0} .paramsec summary::-webkit-details-marker{display:none} .paramsec .sh2{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .paramsec .psum{font-family:var(--mono);font-size:11.5px;color:var(--muted)} .paramsec .chev{color:var(--faint);transition:transform .15s;flex:none;display:grid;place-items:center} .paramsec[open] .chev{transform:rotate(90deg)} .paramsec[open] .psum{display:none} .paramsec summary:hover .sh2{color:var(--accent-ink)} .paramsec table{margin-top:8px} .paramsec .bsub{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink)} /* stringified panel */ .strpanel{border:1px solid var(--line);border-radius:12px;margin-top:8px;overflow:hidden} .strpanel .sp-h{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)} .strpanel .sp-h .tagx{font-size:10px;font-weight:700;letter-spacing:.06em;background:var(--accent-soft);color:var(--accent-ink);padding:2px 7px;border-radius:4px} .strpanel pre{margin:0;padding:12px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.65;overflow-x:auto;background:var(--code-bg);color:var(--code-ink)} .strpanel .sp-l{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--code-muted);padding:8px 14px 0;background:var(--code-bg)} .strpanel .urlenc{border-top:1px solid var(--code-line);word-break:break-all;white-space:pre-wrap} /* ============ Code cards ============ */ .codecard{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--code-bg)} .codecard .ch{display:flex;align-items:center;gap:2px;background:var(--code-bg);border-bottom:1px solid var(--code-line);padding:6px 10px;flex-wrap:wrap} .codecard .ch .lbl{font-size:11px;letter-spacing:.08em;font-weight:600;color:var(--code-muted);margin-right:auto;padding-left:4px;text-transform:uppercase} .codecard .ch .status{font-family:var(--mono);font-size:11px;color:var(--code-cmd);font-weight:600;margin-right:6px} .langtab{background:none;border:0;color:var(--code-muted);font:600 12px 'Zoho Puvi',sans-serif;padding:5px 10px;border-radius:7px;cursor:pointer} .langtab.on{background:rgba(255,255,255,.09);color:var(--code-ink)} .langtab:hover{color:var(--code-ink)} .copybtn{background:none;border:0;color:var(--code-muted);cursor:pointer;padding:4px 6px;border-radius:6px;display:grid;place-items:center} .copybtn:hover{color:var(--code-ink);background:rgba(255,255,255,.08)} .codecard pre{margin:0;padding:14px 16px;font-family:var(--mono);font-size:12.3px;line-height:1.7;overflow-x:auto;color:var(--code-ink)} .codecard pre .n{color:var(--code-num)} .codecard pre .c{color:var(--code-muted)} .codepane{display:none} .codepane.on{display:block} .cardchev{background:none;border:0;color:var(--code-muted);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center;margin-left:2px} .cardchev:hover{color:var(--code-ink);background:rgba(255,255,255,.08)} .cardchev svg{transition:transform .15s} .codecard.closed .cardchev svg{transform:rotate(-90deg)} /* Every card kind wraps its code in .codebody -- the request card merely nests per-language .codepane children inside it. Hiding .codebody is the one selector that collapses request, response and errors alike; targeting .codepane hid only the request panes and left response/errors bodies on screen while closed. */ .codecard.closed .codebody,.codecard.closed>pre{display:none} /* Legacy published anchors. They need the same scroll-margin as the things they stand in for: the browser resolves a fragment against the SPAN, and a zero-margin span lands the row it belongs to underneath the 58px sticky header. */ .anchor-alias{position:absolute;scroll-margin-top:76px} /* ============ Footer ============ */ .foot{border-top:1px solid var(--line);position:relative;padding:22px 48px;color:var(--faint);font-size:12.5px;display:flex;gap:18px;flex-wrap:wrap} .foot::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--grad);opacity:.3} .foot .rt{margin-left:auto} /* ============ Prose pages (authentication / quick start / schema catalog) ============ These templates are shared with the legacy pipeline; give their classes a clean rendering inside the new shell without recreating the old design. */ .content{min-width:0} .doc-simple{padding:36px 44px 90px;max-width:860px} .doc-simple .section{margin-bottom:36px} .section-title{font-size:24px;font-weight:700;margin:0 0 10px;color:var(--ink)} .section-description{color:var(--ink-2);font-size:15px;margin:0 0 18px;max-width:68ch} .content-block{border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);padding:20px 22px;margin-bottom:18px} .content-block h1,.content-block h2,.content-block h3,.content-block h4{color:var(--ink);margin:0 0 10px} .content-block p,.content-block li{color:var(--ink-2);font-size:14px} .highlight-box{background:var(--accent-soft-2);border:1px solid var(--accent-soft);border-radius:var(--r-m);padding:14px 16px;margin:12px 0;color:var(--ink-2);font-size:14px} .auth-section-heading,.qs-section-heading{font-size:17px;font-weight:700;margin:18px 0 8px;color:var(--ink)} .qs-section-description,.qs-page-description,.auth-method-description{color:var(--ink-2);font-size:14px} .code-block,.qs-code-block{background:var(--code-bg);border-radius:12px;overflow:hidden;margin:12px 0;box-shadow:var(--shadow)} .qs-code-header,.resource-code-header,.resource-request-header,.resource-response-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--code-line);background:var(--code-bg)} .qs-code-label,.resource-code-label,.resource-request-label,.resource-response-label{font-size:11px;letter-spacing:.08em;font-weight:600;color:var(--code-muted);text-transform:uppercase} .qs-code-content,.resource-code-content,.request-body-code,.resource-response-code{display:block;padding:13px 15px;font-family:var(--mono);font-size:12.3px;line-height:1.7;color:var(--code-ink);overflow-x:auto;white-space:pre} .copy-btn{background:none;border:0;color:var(--code-muted);cursor:pointer;font:600 11px 'Zoho Puvi',sans-serif;padding:3px 8px;border-radius:6px} .copy-btn:hover{color:var(--code-ink);background:rgba(255,255,255,.08)} .tab-btn{background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2);font:600 12.5px 'Zoho Puvi',sans-serif;padding:6px 14px;border-radius:8px;cursor:pointer;margin-right:6px} .tab-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)} .scope-table-wrapper{overflow-x:auto} table.scope-table{width:100%;border-collapse:collapse;font-size:13.5px} table.scope-table th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--line)} table.scope-table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)} .auth-scopes-list,.qs-steps-list,.qs-next-steps-list{color:var(--ink-2);font-size:14px;padding-left:20px} .auth-error-item,.qs-next-steps-item{margin-bottom:6px} .api-stats{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0} .stat-card{border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);padding:14px 22px;min-width:120px} .stat-number{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .stat-label{font-size:12px;color:var(--muted)} /* schema catalog: keep the container model legible in the new shell */ .schema-catalog-page .section-title{font-size:22px} .cr-schema,.cr-node{border:1px solid var(--line);border-radius:12px;background:var(--card)} .schema-nav-panel{border:1px solid var(--line);border-radius:10px;background:var(--card);margin-top:6px;padding:8px} .schema-nav-search{width:100%;border:1px solid var(--line-2);border-radius:8px;background:var(--panel-2);color:var(--ink);padding:6px 10px;font:13px 'Zoho Puvi',sans-serif;margin-bottom:8px} .schema-nav-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto} .schema-nav-link{font-size:12.5px;color:var(--ink-2);padding:4px 8px;border-radius:6px} .schema-nav-link:hover{background:var(--panel-2)} /* ============ Responsive ============ */ @media (max-width:1280px){ .op{grid-template-columns:1fr} .opcode-in{position:static;max-width:720px} } @media (max-width:980px){ .shell{grid-template-columns:1fr}.rail{display:none} .hero{padding:44px 24px}.land{padding:32px 24px 56px} .doc,.doc-simple{padding:28px 22px 60px} .duo{grid-template-columns:1fr} .dc-wrap{display:none} .foot{padding:22px 24px} } /* ============ Fix round 2 ============ */ /* code card headers: whole row toggles; chevron pinned right, never wraps */ .codecard .ch-main{cursor:pointer;flex-wrap:nowrap} .codecard .ch-main:hover{background:rgba(255,255,255,.05)} .codecard .ch-main .lbl{flex:none;margin-right:0} .codecard .ch-main .mth{font-size:10.5px;color:var(--code-muted);margin-left:2px} .codecard .ch-main .status{margin-left:auto} .codecard .ch-main .chev-e{margin-left:auto;color:var(--code-muted);flex:none;display:grid;place-items:center;padding:2px} .codecard .ch-main .status + .chev-e{margin-left:10px} .codecard .ch-main:hover .chev-e{color:var(--code-ink)} .codecard .ch-main .chev-e svg{transition:transform .15s} .codecard.closed .ch-main .chev-e svg{transform:rotate(-90deg)} .codecard .ch-tabs{justify-content:flex-end} .codecard.closed .ch-tabs{display:none} .codecard.static .ch .lbl{margin-right:auto} .codecard.static .ch .copy-btn{margin-left:8px} /* download affordances */ .dlic{flex:none} .rail a.item.dl{color:var(--accent-ink);font-size:12.5px} .rail a.item.dl:hover{background:var(--accent-soft-2)} .oasdl a{display:inline-flex;align-items:center;gap:5px} .oasdl .sz{font-size:10.5px;color:var(--faint);font-weight:500} /* prose pages (authentication / quick start) */ .doc-simple .pagetitle{margin-top:4px} .doc-simple .lede{margin-bottom:26px} .prose-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px} .sec-h{font-size:19px;font-weight:700;margin:38px 0 6px;color:var(--ink)} .sec-h3{font-size:15.5px;font-weight:650;margin:30px 0 6px;color:var(--ink)} .learnmore{color:var(--accent-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft)} /* Three URL columns overflow a narrow viewport; the table scrolls in its own box so the page never does. */ .tablescroll{overflow-x:auto;max-width:100%} .tablescroll>table{min-width:640px} /* Marks the default data centre without spending a whole column on it. */ .dcdefault{font-family:'Zoho Puvi',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:middle} .learnmore:hover{border-bottom-color:var(--accent-ink)} /* A sub-heading that opens straight after a bordered list needs the gap the border swallows. */ ol.steps+.sec-h3{margin-top:26px} .sec-p{color:var(--ink-2);font-size:14.5px;margin:0 0 14px;max-width:64ch} .inlinecode{font-family:var(--mono);font-size:12px;background:var(--accent-soft-2);border:1px solid var(--accent-soft);border-radius:6px;padding:1px 7px;color:var(--accent-ink)} ol.steps{list-style:none;counter-reset:step;margin:8px 0 0;padding:0;max-width:640px} ol.steps li{counter-increment:step;display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px} ol.steps li:last-child{border-bottom:0} ol.steps li::before{content:counter(step);flex:none;width:24px;height:24px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);font:600 12px/24px 'Zoho Puvi',sans-serif;text-align:center;position:relative;top:5px} ol.steps li b{color:var(--ink);font-weight:600} ol.steps li span{color:var(--muted);display:block;font-size:13px} .scopecard{border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);padding:16px 18px;margin-bottom:14px} .scopecard .sc-h .nm{font-weight:700;font-size:15px;text-transform:capitalize} .scopecard .ds{color:var(--muted);font-size:13.5px;margin:4px 0 10px} .doc-simple .codecard{margin:10px 0 18px;max-width:760px} .cond{color:var(--put);font-size:10px;font-weight:700;letter-spacing:.05em;margin-left:6px} /* schema catalog */ .catalog .schcard{border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);padding:18px 20px;margin-bottom:16px;scroll-margin-top:76px} .schcard-h{display:flex;align-items:center;gap:8px} .schcard-t{font-size:17px;font-weight:700;color:var(--ink)} .schcard-a{font-family:var(--mono);font-size:14px;opacity:0;transition:opacity .12s} .schcard:hover .schcard-a{opacity:1} .schcard .ds{color:var(--muted);font-size:13.5px;margin:4px 0 10px} .schcard table.params td.pt a{font-family:var(--mono)} .choice{border:1px solid var(--accent-soft);border-radius:12px;margin-top:12px;overflow:hidden;background:var(--accent-soft-2)} .choice-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);padding:8px 14px;border-bottom:1px solid var(--accent-soft)} .choice-h .choice-note{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)} .choice-row{display:grid;grid-template-columns:170px 170px 1fr;gap:12px;padding:8px 14px;border-bottom:1px solid var(--accent-soft);font-size:13px;background:var(--card)} .choice-row:last-child{border-bottom:0} .choice-row .pn{font-size:12.5px;font-weight:600;color:var(--ink)} .choice-row .pt{font-size:11.5px;color:var(--muted)} .choice-row .ds{color:var(--ink-2)} @media (max-width:900px){.prose-grid{grid-template-columns:1fr}.choice-row{grid-template-columns:1fr;gap:2px}} /* ============ Fix round 3: capped code bodies ============ */ /* Long request/response bodies otherwise run the right rail far past the prose column. The cap is applied by JS only when content actually overflows (.is-capped), so short samples keep no control at all. */ .codebody{position:relative} .is-capped .codebody{max-height:320px;overflow:hidden} .is-capped.expanded .codebody{max-height:none;overflow:visible} .is-capped .codebody::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none; background:linear-gradient(to bottom,rgba(42,31,49,0),var(--code-bg)); } .is-capped.expanded .codebody::after{display:none} .viewmore{ display:none;width:100%;background:var(--code-bg);border:0;border-top:1px solid var(--code-line); color:var(--code-muted);font:600 11.5px 'Zoho Puvi',sans-serif;letter-spacing:.04em; padding:8px 10px;cursor:pointer;align-items:center;justify-content:center;gap:6px; } .is-capped > .viewmore{display:flex} .viewmore:hover{color:var(--code-ink);background:rgba(255,255,255,.05)} .viewmore:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .viewmore .vm-chev{display:grid;place-items:center;transition:transform .15s} .viewmore .vm-less{display:none} .expanded > .viewmore .vm-more{display:none} .expanded > .viewmore .vm-less{display:inline} .expanded > .viewmore .vm-chev{transform:rotate(180deg)} /* collapsing the whole card hides the control with the body */ .codecard.closed > .viewmore{display:none} /* stringified panels sit on the light ground: fade to the panel colour, not the code ground */ .strpanel .codebody::after{background:linear-gradient(to bottom,rgba(42,31,49,0),var(--code-bg))} /* ============ Fix round 4 ============ */ /* FIX 2: language tabs left-aligned; copy pushed right. */ .codecard .ch-tabs{justify-content:flex-start} .codecard .ch-tabs .copybtn{margin-left:auto} /* FIX 3: the spec-download affordance was too pale to read. Label to a real muted tone, links to accent with an underline on hover so they read as actionable. */ .oasdl{border-color:var(--line-2);background:var(--card)} .oasdl b{color:var(--muted);font-weight:600} .oasdl a{color:var(--accent-ink);font-weight:600} .oasdl a:hover{color:var(--accent-hover);text-decoration:underline} .oasdl .sz{color:var(--muted);font-weight:500} .oasdl .bar{color:var(--line-2)} /* FIX 1: enum values get a row each — mono chip, prose beside it, real padding. */ .enumtbl{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:10px;background:var(--card)} .enumtbl .er{display:flex;gap:14px;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px} .enumtbl .er:last-child{border-bottom:0} .enumtbl .er:nth-child(odd){background:transparent} .enumtbl .ev{ font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent-ink); background:var(--accent-soft-2);border:1px solid var(--accent-soft);border-radius:6px; padding:2px 8px;min-width:0;flex:none;white-space:nowrap; } .enumtbl .ed{color:var(--ink-2);line-height:1.55} /* enum with no written meanings: a chip list, not a run-on sentence */ .enumchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} /* Promoted out of its disclosure because the values fit on one line: hiding three chips behind a toggle costs the reader a click to learn nothing they could not already see. Whether they fit is MEASURED at the width the row actually has -- see settleEnums in vani-docs.js -- so this rule only ever styles a list that has been shown to fit. */ .enumchips-inline{margin-top:6px} /* Not scoped to a container: the same chip is the unit of an .enumchips list in the Schema Catalog and of an .enumvals list on a reference page, and a chip that loses its pill in one of them is a chip that stopped being a chip. */ .ec{ /* Neutral, not accent-tinted: forty of these in one cell read as a warning strip when they carry the brand colour. They are data, so they sit on the page's own surface. */ font-family:var(--mono);font-size:11.5px;color:var(--chip-ink); background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:6px;padding:2px 8px; } /* FEATURE: AI Tools menu */ .pagetools{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* A resource page carries a second row of controls under the dropdowns, so its tools column stacks. The other pages that use .pagetools have one row and are untouched. margin-left:auto matters only once the column WRAPS onto a line of its own: a wrapped flex line is as wide as the container, so without it the column parks wherever its content happens to end -- mid-page, aligned to nothing. With it the controls keep the content's right edge at every width, which is the edge the operation list uses too. */ .pagetools-stack{flex-direction:column;align-items:flex-end;gap:10px;margin-left:auto} .pagetools-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} .aitools{position:relative} .aitools-t{ display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px; border:1px solid var(--line-2);background:var(--card);color:var(--ink-2); font:600 12.5px 'Zoho Puvi',sans-serif;cursor:pointer; } .aitools-t:hover{border-color:var(--accent);color:var(--accent-ink)} .aitools-t[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft-2)} .aitools-c{display:grid;place-items:center;transition:transform .15s} .aitools-t[aria-expanded="true"] .aitools-c{transform:rotate(180deg)} .aitools-m{ position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:272px;padding:6px; background:var(--card);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg); } .aitools-i{ display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 10px;border-radius:8px; border:0;background:none;text-align:left;cursor:pointer;color:var(--ink); font:400 13px 'Zoho Puvi',sans-serif; } .aitools-i:hover{background:var(--panel-2);color:var(--ink)} .aitools-ic{color:var(--accent-ink);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--accent-soft-2);margin-top:1px} .aitools-l{display:flex;flex-direction:column;gap:1px;min-width:0} .aitools-l b{font-weight:600;font-size:13px} .aitools-l span{font-size:11.5px;color:var(--muted)} .aitools-sep{height:1px;background:var(--line);margin:5px 8px} /* FIX 5: page bar + per-operation collapse .pagebar is now the SCHEMA CATALOG's strip only -- a page of cards has no other header tools, so the count and the two buttons still need a band of their own there. Resource pages moved the same two buttons into the second .pagetools-row above, and dropped the count entirely: the rail already states it beside the group's name. */ .pagebar{ display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:9px 14px; border:1px solid var(--line);border-radius:10px;background:var(--panel-2); } .pagebar-n{font-size:12.5px;color:var(--muted)} .pagebar-n b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .pagebar-actions{margin-left:auto;display:flex;gap:8px} .pbtn{ display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px; border:1px solid var(--line-2);background:var(--card);color:var(--ink-2); font:600 12px 'Zoho Puvi',sans-serif;cursor:pointer; } .pbtn:hover{border-color:var(--accent);color:var(--accent-ink)} .pbtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)} /* Expand all / Collapse all on a reference page: ONE segmented control. The frame lives on the group, not on the buttons -- so the pair is a single object sharing a hairline seam, at the same 32px / 9px / --line-2 / --card spec as the dropdown row above it. The buttons keep .pbtn's type and hit area and give up only their own border and radius, which is what made them read as two floaters. overflow:hidden lets a pressed half fill its corner cleanly against the frame. */ .opctl{ display:inline-flex;align-items:stretch;height:32px;overflow:hidden; border:1px solid var(--line-2);border-radius:9px;background:var(--card); } .opctl .pbtn{height:100%;padding:0 12px;border:0;border-radius:0;background:none} .opctl .pbtn + .pbtn{border-left:1px solid var(--line-2)} .opctl .pbtn:hover{background:var(--panel-2);color:var(--accent-ink)} .opctl .pbtn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)} .opctl:focus-within{border-color:var(--accent)} .ophead{cursor:pointer;border-radius:8px;margin:-4px -8px;padding:4px 8px} .ophead:hover{background:var(--panel-2)} .op-chev{color:var(--faint);flex:none;display:grid;place-items:center;transition:transform .15s} .ophead[aria-expanded="true"] .op-chev{transform:rotate(90deg)} /* The collapsed row's summary. `order:1` puts it after the permalink and any chips, so a summary that does not fit takes the next line ON ITS OWN -- before, it wrapped before the link icon and pushed that icon down alone, which is what made the row read as broken. `nowrap` is what makes flexbox move the whole item instead of breaking it mid-row; the ellipsis is the no-JS floor, so an over-long summary can never widen the page. Script upgrades the wrapped case to a full-width line that wraps properly -- see .op-sum-own-line. */ .op-inline-sum{ display:none;color:var(--muted);font-size:13px;margin-left:4px;order:1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } /* Measured, not guessed: the class is applied only where flexbox has already put the summary on a second line. Then it gets that line to itself and the whole sentence. */ .ophead.op-sum-own-line .op-inline-sum{ flex:0 0 100%;white-space:normal;overflow:visible;margin-left:0; /* Lined up under the path, not under the method badge -- it is the path it describes. The badge is a different width per method, so the offset is measured per row and handed in as --sum-indent; the fallback keeps the rule meaningful on its own. */ padding-left:var(--sum-indent,0px); } /* collapsed: the operation becomes a one-line index row */ .op.op-collapsed{padding:10px 0;grid-template-columns:1fr} .op.op-collapsed .opbody,.op.op-collapsed .opcode{display:none} .op.op-collapsed .op-inline-sum{display:inline} .op.op-collapsed .ophead{margin:0 -8px} /* Provider marks are third-party brand assets shown for attribution -- they keep their own colours rather than inheriting the menu's currentColor tint. */ /* Do NOT force `fill` on these paths. The wrapping carries fill="none", so any `fill:inherit` here resolves to none and the mark disappears entirely. Brand marks keep the colour they were authored with; only the monochrome one is themed. */ .aitools-brand svg path[fill="currentColor"]{fill:var(--ink)} /* ============ Fix round 7 ============ */ /* --- Response status selector --- The response card can show any status the operation declares. Panes are pre-rendered and swapped by display, exactly like the request card's language panes. */ /* Only ONE auto margin may sit in this row. .chev-e carries margin-left:auto, which the old `.status + .chev-e` rule cancelled; .statuswrap needs the same cancellation, or the free space splits between the two and the select drifts into the middle of the header. */ .statuswrap{display:inline-flex;align-items:center;margin-left:auto;cursor:pointer} .codecard .ch-main .statuswrap + .chev-e{margin-left:10px} .statussel{ border:1px solid var(--code-line);background:var(--code-bg);color:var(--code-ink); font:600 11.5px var(--mono);border-radius:7px;padding:3px 6px;cursor:pointer; max-width:200px; } .statussel:hover{border-color:var(--code-muted)} .statussel:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .respane{display:none} .respane.on{display:block} .respane-d{ padding:9px 16px 0;color:var(--code-muted);font-size:11.5px;line-height:1.5; } /* ---------- editable request body ------------------------------------------- The checkbox tree chooses WHICH fields are sent; this chooses what they carry. One source of truth at a time: as soon as the reader edits, the tree stops rewriting the box and says so, and Reset hands control back. */ /* Paired, always: `display:flex` below is an author rule and would otherwise beat the UA sheet's [hidden]{display:none}, leaving the bar on screen for readers with no script to drive it. */ .reqbar[hidden]{display:none} .reqbar{ display:flex;align-items:center;gap:4px;padding:5px 10px; background:var(--code-bg);border-bottom:1px solid var(--code-line); } .codecard.closed .reqbar{display:none} .reqbar-s{ margin-left:auto;font-size:11px;line-height:1.4;color:var(--code-muted); text-align:right;min-width:0; } /* Three verdicts, and they must not look alike -- a reader glancing at the card has to know which one they got without reading it. */ .reqbar-s[data-state="ok"]{color:var(--code-cmd)} .reqbar-s[data-state="warn"]{color:var(--danger-ink)} .reqbar-s[data-state="bad"]{color:var(--del)} /* An author `display` declaration beats the UA sheet's [hidden]{display:none}, so this pairing is not optional: without it the editor renders UNDER the sample it replaces, the card measures both, and a "View more" appears over a body that was never capped. That has now happened three times in this project; code-card-layout.spec.js asserts the invariant directly rather than trusting each rule. */ .reqedit[hidden]{display:none} .reqedit{ display:block;width:100%;box-sizing:border-box;height:320px;resize:vertical; margin:0;padding:14px 16px;border:0;border-top:1px solid var(--code-line); background:var(--code-bg);color:var(--code-ink); font-family:var(--mono);font-size:12.3px;line-height:1.7; } .reqedit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* While editing, the height cap has to come off: a textarea reports its own scrollHeight whatever it holds, so a measured cap would clip the editor and leave a "View more" that does nothing. Same mechanism the language tabs use to re-measure after a swap. */ .codecard.req-editing .codebody{max-height:none;overflow:visible} .codecard.req-editing .codebody::after{display:none} .codecard.req-editing > .viewmore{display:none} /* The edited body is the one in charge: mark the card so it reads that way at a glance. */ .codecard.body-edited .reqbar{box-shadow:inset 0 -2px 0 var(--accent)} /* The tree is frozen while an edited body is in charge. Not merely ignored -- a checkbox that silently does nothing is worse than one that says it cannot. */ .pbuild-frozen{ display:flex;align-items:center;gap:8px;flex:1 1 100%; font-size:11.5px;line-height:1.5;color:var(--danger-ink); } .pbuild-frozen b{font-weight:600} .paramsec-frozen table.params{opacity:.55} /* `:disabled` in the payload-builder block sets cursor:default and sits LATER in this file, so an equally specific selector here would lose. One more class earns the override. */ .paramsec-frozen .pb-ck:disabled{cursor:not-allowed} /* The value controls freeze with the ticks: a box that still takes keystrokes while an edited body is in charge is the same silent no-op a frozen checkbox exists to rule out. */ .paramsec-frozen .pb-v:disabled{cursor:not-allowed;border-style:dashed} /* --- Mobile --- The rail used to be display:none below 980px, which left small screens with no navigation at all. It is now an off-canvas drawer behind the top-bar menu button. */ .navbtn{ display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2); background:var(--card);color:var(--muted);place-items:center;cursor:pointer;flex:none; } .navbtn:hover{color:var(--accent-ink);border-color:var(--accent)} .rail-scrim{display:none} .rail-dc{display:none} /* Long content must scroll inside its own box, never widen the page. */ .codecard pre,.strpanel pre{max-width:100%} table.params{display:block;overflow-x:auto;max-width:100%} @media (max-width:980px){ .navbtn{display:grid} .rail-dc{display:block} /* Drawer: off-canvas, above the content, restored to view by .nav-open. */ .shell{grid-template-columns:1fr} .rail{ display:block;position:fixed;top:58px;left:0;bottom:0;width:290px;max-width:86vw; z-index:60;transform:translateX(-100%);transition:transform .18s ease; border-right:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.18); height:auto; } .nav-open .rail{transform:translateX(0)} .rail-scrim{ display:block;position:fixed;inset:58px 0 0;z-index:55;background:rgba(0,0,0,.42); } .rail-scrim[hidden]{display:none} /* Landing cards: grid items default to min-width:auto, so the wide "OpenAPI files" download row forces its track past the viewport instead of wrapping inside the card. */ .duo>*,.cardgrid>*{min-width:0} .gcard,.gcard .top,.gcard .cnt{min-width:0} .gcard .top{flex-wrap:wrap;row-gap:4px} .gcard .cnt{margin-left:auto;max-width:100%} .gcard .oasdl{flex-wrap:wrap;max-width:100%} /* The top bar keeps the menu, theme and CTA; the host picker moves into the drawer. */ .dc-wrap{display:none} .dc-wrap-rail{display:flex;margin:0 10px;max-width:100%} .dc-wrap-rail select.datacenter-select{max-width:100%} } @media (prefers-reduced-motion:reduce){.rail{transition:none}} @media (max-width:768px){ .topbar{gap:12px;padding:0 14px} .hero{padding:38px 18px} .land{padding:26px 18px 48px} .doc,.doc-simple{padding:24px 16px 52px} .foot{padding:20px 16px} /* Page header controls stack rather than squeeze. */ .pagehead{flex-wrap:wrap;gap:14px} .pagetools{width:100%} .oasdl{flex-wrap:wrap} .pagebar{flex-wrap:wrap;gap:10px} .op{gap:20px} .opcode-in{max-width:100%} /* Grid items default to min-width:auto, so a wide child pushes the track past the viewport instead of shrinking. One column plus min-width:0 keeps the cards inside. */ .cardgrid{grid-template-columns:1fr} .cardgrid > *{min-width:0} .gcard .top{flex-wrap:wrap;row-gap:4px} .gcard .cnt{margin-left:auto} .stats{gap:20px} } @media (max-width:560px){ /* At phone widths the brand collapses to the mark plus the app name. */ .brand .sep,.brand .prod,.vpill{display:none} .topbar{gap:10px;padding:0 12px} .top-right{gap:8px} .cta{padding:0 11px;font-size:12.5px;height:32px} .iconbtn{width:32px;height:32px} .doc,.doc-simple{padding:20px 13px 44px} .pagetitle{font-size:26px} /* The operation header wraps instead of forcing the path to overflow. */ .ophead{flex-wrap:wrap;row-gap:6px} .ophead .path{word-break:break-all} .op-inline-sum{margin-left:0} .ch.ch-tabs{flex-wrap:wrap;row-gap:4px} .statussel{max-width:150px} .enumtbl .er{flex-direction:column;gap:4px} .enumtbl .ev{min-width:0} } /* ---------- hero AI Tools trigger ---------------------------------------- .aitools-t is sized for the page header, where it sits beside a breadcrumb. In the hero it stands next to 40px buttons, so it matches them there. */ .btns .aitools-t{height:40px;padding:0 18px;border-radius:10px;font:600 14px 'Zoho Puvi',sans-serif;gap:8px} /* ---------- schema catalog ---------------------------------------------- Prose pages stay at a readable 860px; the catalog is field tables, which that width squeezes into needless wrapping. */ .doc-simple.catalog{max-width:1180px} .doc-simple.catalog .schcard table.params{width:100%} .doc-simple.catalog .choice-row{grid-template-columns:220px 240px 1fr} .schcard-tog{ flex:none;display:grid;place-items:center;width:20px;height:20px;padding:0; border:0;background:none;color:var(--muted);cursor:pointer;border-radius:5px; transition:transform .15s,color .12s; } .schcard-tog:hover{color:var(--accent-ink);background:var(--accent-soft-2)} .schcard-tog[aria-expanded="false"]{transform:rotate(-90deg)} .schcard.closed .schcard-b{display:none} .schcard.closed{padding-bottom:14px} /* ---------- back to top ------------------------------------------------- Fixed, so it is reachable from anywhere on the long pages (the catalog and the larger resource pages) without scrolling back up to find navigation. */ .totop{ position:fixed;right:22px;bottom:22px;z-index:40; width:38px;height:38px;display:grid;place-items:center; border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink-2); cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s,border-color .12s,color .12s; } .totop.show{opacity:1;transform:none} /* An author `display` beats the UA rule for [hidden], so state it explicitly -- otherwise the button stays in the layout and the tab order while invisible. */ .totop[hidden]{display:none} .totop:hover{border-color:var(--accent);color:var(--accent-ink)} @media (max-width:820px){.totop{right:14px;bottom:14px}} @media (prefers-reduced-motion:reduce){.totop{transition:none}} /* ---------- hero dropdown clipping -------------------------------------- .hero used overflow:hidden for the dot field, but .dots is inset:0 and cannot overflow -- while the AI Tools menu, absolutely positioned inside, was being cut off at the hero's bottom edge. */ .hero{overflow:visible} /* ---------- rail section heading ---------------------------------------- "ZONE OPERATIONS" plus the chip wrapped onto two lines in a 262px rail. Tightened just enough to sit on one line. */ .rail .eyebrow{white-space:nowrap;letter-spacing:.08em;gap:6px} .rail .eyebrow .tchip{flex:none;font-size:8.5px;padding:1px 4px;letter-spacing:.04em} /* ---------- search ------------------------------------------------------- */ .searchbtn{ display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 9px 0 10px;margin-left:auto; border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--muted); font:500 12.5px 'Zoho Puvi',sans-serif;cursor:pointer;transition:border-color .12s,color .12s; } .searchbtn:hover{border-color:var(--accent);color:var(--accent-ink)} .searchbtn-k{ font:600 10.5px 'Zoho Puvi',sans-serif;color:var(--faint); border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;background:var(--panel); } @media (max-width:900px){.searchbtn-l,.searchbtn-k{display:none}.searchbtn{padding:0 8px}} .pal{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding-top:11vh} .pal[hidden]{display:none} .pal-scrim{position:absolute;inset:0;background:rgba(8,6,16,.55);backdrop-filter:blur(2px)} .pal-box{ position:relative;width:min(680px,calc(100vw - 32px));max-height:72vh;display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden; } .pal-in{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);color:var(--muted)} .pal-q{ flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink); font:500 15px 'Zoho Puvi',sans-serif; } .pal-q::placeholder{color:var(--faint)} .pal-esc,.pal-foot kbd{ font:600 10.5px 'Zoho Puvi',sans-serif;color:var(--faint); border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;background:var(--panel); } .pal-res{overflow-y:auto;padding:6px;flex:1} .pal-g{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:10px 10px 5px} .pal-r{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px; color:var(--ink-2);cursor:pointer;text-decoration:none; } .pal-r:hover,.pal-r.on{background:var(--accent-soft-2);color:var(--ink)} .pal-r-k{ flex:none;width:52px;text-align:center;font:700 9.5px 'Zoho Puvi',sans-serif;letter-spacing:.06em; border-radius:4px;padding:2px 0;background:var(--panel-2);color:var(--muted);text-transform:uppercase; } .pal-r.on .pal-r-k{background:var(--accent-soft);color:var(--accent-ink)} .pal-r-m{min-width:0;display:flex;flex-direction:column;gap:1px} .pal-r-t{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pal-r-s{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pal-r mark{background:var(--accent-soft);color:var(--accent-ink);border-radius:2px;padding:0 1px} .pal-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13.5px} .pal-foot{ display:flex;align-items:center;gap:14px;padding:8px 14px;border-top:1px solid var(--line); font-size:11.5px;color:var(--faint); } .pal-foot .pal-count{margin-left:auto} @media (max-width:520px){.pal{padding-top:6vh}.pal-r-k{width:44px}} @media (prefers-reduced-motion:reduce){.pal-scrim{backdrop-filter:none}} /* ---------- top bar composition ------------------------------------------ The search button briefly carried its own margin-left:auto while .top-right had one too -- two competing auto margins park the button mid-bar. It belongs in the right-hand cluster, so the bar reads: brand ......... controls. The data-centre picker moved out of the top bar entirely. It rewrites the host in every code sample, which is page content, not global chrome -- and beside a sign-in CTA a bare globe reads like account settings. The rail already gives it a "DATA CENTRE" heading, which says what it is; it is now shown there always, not only on mobile. */ .searchbtn{margin-left:0} .rail-dc{display:block} .dc-wrap-rail{display:flex;margin:0 10px;max-width:100%} .dc-wrap-rail select.datacenter-select{max-width:100%} /* ---------- spec downloads ------------------------------------------------ Shares the AI Tools menu machinery (same inner class names), so it needs no extra JS -- only its own icon treatment, since these are format marks. */ .dlmenu .aitools-ic{font-family:var(--mono);font-size:11px;font-weight:700} .dlmenu .aitools-m{min-width:250px} /* ---------- spec downloads ------------------------------------------------ Reuses the AI Tools menu machinery (same inner class names) so it needs no extra JS -- only its own mark treatment, these being format labels. */ .dlmenu .aitools-ic{font-family:var(--mono);font-size:11px;font-weight:700} .dlmenu .aitools-m{min-width:252px} /* ---------- rail bundle downloads ---------------------------------------- */ .raildl{margin-top:2px} .raildl>summary{ display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer; font-size:13.5px;color:var(--ink-2);list-style:none; } .raildl>summary::-webkit-details-marker{display:none} .raildl>summary:hover{background:var(--panel-2);color:var(--ink)} .raildl-c{margin-left:auto;display:grid;place-items:center;transition:transform .15s;color:var(--faint)} .raildl[open]>summary .raildl-c{transform:rotate(180deg)} .raildl .item.dl{padding-left:30px} @media (prefers-reduced-motion:reduce){.raildl-c{transition:none}} /* [hidden] loses to any author `display`; state it for the menu panels so a stray display rule can never leave a closed menu on screen (see .totop for the same trap). */ .aitools-m[hidden]{display:none} /* The panel is position:absolute, so its wrapper must be the positioning context -- without this it resolves against a distant ancestor and opens off-screen. */ .dlmenu{position:relative} /* The data-centre picker now sits in the page header beside the other controls. */ .dc-page{height:32px;padding:0 4px 0 10px} .dc-page select.datacenter-select{padding:0 4px;max-width:210px} /* ---------- nested request-body fields ----------------------------------- One flat table, indented by depth. The previous version nested a inside the parent's description cell; each level inherited a narrower
, so descriptions truncated and a 40-value enum stacked one chip per line. */ .bf-r>td{vertical-align:top} /* Nested rows need to read as nested, not as highlighted: --panel-2 carries a violet cast that stacks up over four or five consecutive rows. A near-neutral wash instead. */ .bf-sub{background:var(--row-sub)} .bf-sub .bf-nm{color:var(--ink-2)} /* ---------- depth rails --------------------------------------------------- Indentation alone stopped working at depth three: the step is 20px and a mono field name is wider than the step, so five consecutive rows at three different depths read as one ragged list and the eye could not tell which object a row sat in. One hairline per ancestor, drawn in the name cell's own background at the mid-point between levels (20px, 40px, ... for --d = 1, 2, ...), full cell height. Consecutive rows of the same subtree therefore draw one continuous line, and the line stops at the last row of the subtree -- which is the fact the reader could not previously see. Background rather than markup: the rails must not become elements the checkbox, the toggle or the screen reader has to step over. --d defaults to 0, so the path and query tables -- which share td.pn and never set it -- paint nothing. */ td.pn{ padding-left:var(--i,0); background-image:repeating-linear-gradient(to right,var(--line-2) 0 1px,transparent 1px 20px); background-repeat:no-repeat; background-position:20px 0; background-size:calc(var(--d,0) * 20px) 100%; } .bf-t{ display:inline-grid;place-items:center;width:14px;height:14px;margin-right:6px;padding:0; border:0;background:none;color:var(--muted);cursor:pointer;border-radius:3px; vertical-align:baseline;transition:transform .14s,color .12s; } .bf-t:hover{color:var(--accent-ink)} .bf-t[aria-expanded="true"]{transform:rotate(90deg);color:var(--accent-ink)} .bf-t-none{cursor:default;pointer-events:none} .bf-nm{font-family:var(--mono)} .bf-count{ display:inline-block;margin-left:8px;font:inherit;font-size:11px;color:var(--muted); background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:5px; padding:1px 7px;cursor:pointer;transition:border-color .12s,color .12s; } .bf-count:hover{border-color:var(--accent);color:var(--accent-ink)} .bf-more{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);font-style:italic} /* Mutually exclusive siblings -- a proto oneof, or the untyped choice-style node. Quieter than an enum chip: it is a constraint on the row, not data belonging to it. */ .bf-one{ display:block;margin-top:5px;font-size:11.5px;color:var(--muted); } .bf-one b{font-family:var(--mono);font-weight:600;color:var(--ink-2)} /* ---------- payload builder ---------------------------------------------- The field table doubles as a payload composer: tick a field and every code sample in the rail is rewritten from the selection. The checkbox lives in the name cell (see body-field.hbs for why), so it has to hold the mono baseline the cell sets. */ .pb-ck{ width:13px;height:13px;margin:0 8px 0 0;padding:0;flex:none; vertical-align:baseline;accent-color:var(--accent);cursor:pointer; } .pb-ck:disabled{cursor:default;opacity:.55} .pb-ck:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* ---------- the Value column --------------------------------------------- The tick says the field is sent; this column says what it carries. It used to be a trailing item in the description cell, which is where the whole area started reading as a table with inputs appended: the caption and the box began wherever that row's prose happened to end, so the description cell was doing prose, declared values and data entry at once. A column of its own gives every control the same left edge and the same width, which is the difference between a form and a list of leftovers -- and it retires the per-row VALUE caption, because a column has a heading. Fixed width, on the header and the cell both. `table.params` is auto-layout and width:100%, so a stated width is honoured and the description column absorbs the slack -- which means the left edge is the same in every request-body table on the page, not merely within one. The rule on the left is what makes the column read as the working surface it is. */ /* A real table in a scrolling wrapper, not `display:block` on the table itself. `display:block` on a hands the actual table layout to an anonymous shrink-to-fit box inside it, so `width:100%` becomes a cap rather than a width: at 1920px two body tables in the same column came out 1138px and 973px wide, and the value controls that are the whole point of the column stood 165px apart. The wrapper keeps the overflow inside the page -- the reason `table.params` went display:block in the first place -- and lets the table below it fill its column at every width. */ .bf-scroll{overflow-x:auto;max-width:100%} table.bf-table{display:table;width:100%} /* Scoped to .bf-table -- the class the request-body table alone carries -- so the path and query tables above it cannot pick the column up by accident. The width is not one number. Above 1280px the operation splits into prose + a 400px code column, so the table has 584-660px to spend rather than 930 and every pixel the value column takes comes out of the description beside it. Two steps, both fixed: within a step every control on the page still starts at the same x, which is the property that matters. */ table.bf-table{--pv:192px;--pv-pad:14px} table.bf-table th.pvh,table.bf-table td.pv{ width:var(--pv);padding-left:var(--pv-pad);border-left:1px solid var(--line); } /* A stated width is only a preference in auto table layout: where the rest of the table cannot fit, the browser takes the shortfall out of whichever column will give, and this was the one that gave -- by a different amount per table, which put four different left edges on one page at 1440px. Giving the holder the column's own width as a MINIMUM makes the column's min-content equal its stated width, so it is no longer the column that yields; the table scrolls in its wrapper instead, which is what the wrapper is for. */ table.bf-table .bf-v,table.bf-table .pv-none{min-width:calc(var(--pv) - var(--pv-pad))} /* Above 1280 the operation splits into prose + a 400px code column and the table has 584px to spend, not 930. A value column that keeps 192 there is 192 taken out of a description that is down to 155 -- and the auto layout resolves the shortfall by shrinking the value column anyway, by a different amount in each table, which is precisely the ragged edge this column exists to remove. Naming a width the table can actually afford is what keeps every control on one edge. Two steps, because 584px and 818px cannot afford the same one. */ @media (min-width:1281px) and (max-width:1400px){table.bf-table{--pv:160px}} @media (min-width:1401px) and (max-width:1600px){table.bf-table{--pv:176px}} /* The heading is the caption for all of them; the cells below carry no label of their own. */ table.bf-table th.pvh{text-align:left} /* Two columns that were paying for their nowrap out of the description's width. TYPE: "array of object" is three words and 116px of a 660px table, on rows where the other entries are "string". Wrapping costs a second line on the few rows that say it and gives the description back half the column. FIELD: the REQUIRED badge is 60px of nowrap hanging off the longest name in the table, so one deep required row set the column width for all fifty. The NAME still never breaks -- a field name split across two lines is not a field name -- but the badge may take the line under it, which is the line the row already had. */ table.bf-table td.pt{white-space:normal} /* A cell's min-content is its longest unbreakable run, and this column has two 40-character ones: `operation=CURSOR_TEXT_OPERATION_INSERT_TEXT)` inside a description, and `CURSOR_TEXT_OPERATION_INSERT_TEXT` as an enum value. Between them they put a 337px floor under a column that has 200px at 1440px, and the table went sideways rather than the words. `anywhere` is the value that actually lowers min-content -- `break-word` does not -- and it only ever breaks a word that has no other way to fit, so at 1280px nothing breaks at all. A chip that wraps keeps its pill around both lines, which still reads as one value. */ table.bf-table td.pd{overflow-wrap:anywhere} /* The hanging indent is what makes the wrap look deliberate rather than broken. The tick and the chevron are 41px of unbreakable run before the name, so a badge on the second line would otherwise start 41px to the LEFT of the name it belongs to, under the checkbox. Padding pushes every line in by that much and a negative text-indent pulls the first line back out, so line one starts at the tick and line two starts at the name. --}} */ table.bf-table td.pn{ --pn-hang:41px; white-space:normal; padding-left:calc(var(--i,0px) + var(--pn-hang)); text-indent:calc(-1 * var(--pn-hang)); } table.bf-table .bf-nm{white-space:nowrap} /* A tickable row with no scalar to set. Quiet enough not to count as ink, present enough that the column does not look ragged where an object row sits in it. */ .pv-none{display:inline-block;color:var(--faint);font-size:12px} /* Ships hidden and is revealed by script, so this pairing is not optional: `.bf-v` sets `display`, and an author display declaration beats the UA sheet's [hidden]{display:none}. Without the rule below, every reader with no JS gets a full column of dead controls. */ .bf-v[hidden]{display:none} /* One column now that the label is gone: the control, and the note beneath it. */ .bf-v{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;max-width:100%} /* One spec for both tags: a select and an input in the same column must line up, and a select left at browser defaults is visibly a different height and family from the input above it. Mono because the value is data -- it ends up quoted in the payload verbatim. Full width of the column, so the controls share a RIGHT edge as well as a left one. Two aligned edges is what makes a column of mixed inputs and selects read as one form. */ .pb-v{ width:100%;height:26px;max-width:100%;min-width:0;box-sizing:border-box;padding:0 8px; border:1px solid var(--line-2);border-radius:6px;background:var(--card);color:var(--ink); font-family:var(--mono);font-size:11.5px;line-height:normal; } /* Room for the UA's own disclosure arrow, which sits inside the padding box. */ select.pb-v{padding-right:4px;cursor:pointer} .pb-v:hover{border-color:var(--accent)} .pb-v:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} /* The placeholder is the documented default, so it is a statement rather than a hint: clearing the box sends THIS. Same weight as a real value, one step quieter in colour. */ .pb-v::placeholder{color:var(--faint);opacity:1} .pb-v:disabled{cursor:not-allowed;opacity:.55} /* Reported, not refused -- the value still reaches the samples, because a reader composing a request the API will reject is entitled to see exactly what they typed. */ .pb-v[data-invalid="1"]{border-color:var(--del)} .bf-vm[hidden]{display:none} .bf-vm{ /* The line below the control, flush with it: the column is 196px and a sentence squeezed in beside the box would wrap to about one word a line. */ font-size:11.5px;line-height:1.45;color:var(--del); } /* The builder's own toolbar, above the table it acts on. */ .pbuild{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px;padding:8px 12px; border:1px solid var(--line);border-radius:9px;background:var(--panel-2); } .pbuild-h{font-size:12px;color:var(--muted);line-height:1.5;flex:1 1 260px;min-width:0} .pbuild-h b{font-weight:700;font-size:10px;letter-spacing:.05em;color:var(--del)} /* Names the column by wearing its heading's treatment, so the sentence points at something the reader can see rather than describing it. Not a : the danger-coloured REQUIRED is the only bold in this line, and the specs read it off `.pbuild-h b`. */ .pbuild-col{ font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-2); } /* Live count of what is in the payload. Tabular so it does not jitter as it changes. */ .pbuild-c{ font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums; font-weight:600;white-space:nowrap; } /* Which of the two editors owns the document. Only ever shown for the tree's turn; the box's turn is stated by .pbuild-frozen, in the danger colour, because that one also says a control the reader can see has stopped working. This one is an accent-tinted pill: the page is doing what was asked, it is only no longer the documented sample. */ .pbuild-s[hidden]{display:none} .pbuild-s{ font-size:11px;font-weight:600;white-space:nowrap; color:var(--accent-ink);background:var(--accent-soft); border:1px solid var(--accent);border-radius:20px;padding:2px 9px; font-variant-numeric:tabular-nums; } .pbuild-a{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .pbuild-a .pbtn{height:26px;padding:0 9px;font-size:11.5px} /* ---------- allowed values: one treatment --------------------------------- Every enum row on a reference page publishes its values the same way: chips, in place, always visible. No disclosure on some rows and a bare chip row on others, and no decision that depends on the width the row happens to have -- that was the state the reader could not learn, because the same enum read one way here and another way two rows down, and changed again when the window did. Long lists are CLAMPED, not hidden. `.evc` (added by clampEnums once, on load) hides the chips the generator did not put in the first six and reveals the "+N" that brings them back. Every value is in the markup either way, so a reader with no script gets the whole declared list rather than six of it and a dead button. */ /* An author `display` beats the UA sheet's [hidden]{display:none}; this project has shipped that bug four times, so every new class that sets `display` carries its pairing. */ .enumvals[hidden]{display:none} .enumvals{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px} .enumvals .ec-x[hidden]{display:none} .enumvals.evc .ec-x{display:none} /* The control is a chip too: it is the last item of the list it belongs to, not a separate affordance parked beside it. It differs by being the only one that reacts to a pointer. */ .ec-more[hidden]{display:none} .ec-more{ display:inline-flex;align-items:center;gap:4px; /* A