/* =========================================================================== Declarant playground --------------------------------------------------------------------------- Two themes driven by [data-theme] on . Every colour is a token so the light theme is a variable swap rather than a second stylesheet. Layout is a three-column shell that collapses to a single column with an overlay nav below 960px. ======================================================================== */ :root { --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --sidebar-w: 300px; --topbar-h: 60px; --ease: cubic-bezier(.4, 0, .2, 1); } /* --- dark (default) ------------------------------------------------------ */ [data-theme='dark'] { --bg: #070E16; --bg-raised: #0B1621; --bg-panel: #0E1B28; --bg-input: #0A141E; --bg-hover: #142434; --bg-active: #17293C; --bg-code: #060C13; --line: #1B2C3D; --line-strong: #263B50; --text: #E8EEF4; --text-muted: #9AAEC0; --text-faint: #64798D; --accent: #E09A3E; --accent-hover: #EEA950; --accent-ink: #1A1004; --accent-soft: rgba(224,154,62,.13); --accent-line: rgba(224,154,62,.32); --teal: #35B39F; --teal-soft: rgba(53,179,159,.13); --red: #E5686B; --red-soft: rgba(229,104,107,.13); --amber: #E0A33E; --blue: #5AA0F2; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); } /* --- light ---------------------------------------------------------------- */ [data-theme='light'] { --bg: #F4F6F8; --bg-raised: #FFFFFF; --bg-panel: #FFFFFF; --bg-input: #FFFFFF; --bg-hover: #EDF1F5; --bg-active: #E3EAF1; --bg-code: #F7F9FB; --line: #DDE4EB; --line-strong: #C3CEDA; --text: #0B1621; --text-muted: #566878; --text-faint: #8393A2; --accent: #A9631A; --accent-hover: #8E5214; --accent-ink: #FFFFFF; --accent-soft: rgba(169,99,26,.09); --accent-line: rgba(169,99,26,.28); --teal: #16776A; --teal-soft: rgba(22,119,106,.09); --red: #B3272B; --red-soft: rgba(179,39,43,.09); --amber: #9A6510; --blue: #1F5FBF; --shadow: 0 1px 2px rgba(11,22,33,.06), 0 8px 24px rgba(11,22,33,.07); --shadow-sm: 0 1px 2px rgba(11,22,33,.07); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } svg { display: block; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); border-radius: 0 0 var(--radius) 0; font-weight: 600; } .skip-link:focus { left: 0; } :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* =========================================================== topbar ====== */ .topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; /* Respect the notch/rounded corners in landscape; the viewport meta opts into the full screen, so the safe area has to be added back by hand. */ padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); background: var(--bg-raised); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } /* min-width:0 lets the brand truncate instead of forcing the bar wider; the actions never shrink, so the controls keep their full hit area. */ .topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; } .topbar__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; } .brand img { flex: 0 0 auto; } .brand__name { font-size: 17px; font-weight: 640; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compound selector on purpose. The button also carries .icon-btn, which sets display:inline-flex later in this file — at equal specificity that wins, and the menu button ends up visible on desktop beside a sidebar that is already permanently on screen. Raising the specificity here keeps it hidden until the overlay breakpoint actually turns it on. */ .icon-btn.topbar__menu { display: none; } .badge { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--text-faint); } .link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-weight: 550; font-size: 13.5px; transition: background .14s var(--ease), color .14s var(--ease); /* Without this the label wraps at narrow widths and the button grows taller than the bar it sits in. */ white-space: nowrap; flex: 0 0 auto; } .link-btn:hover { background: var(--bg-hover); color: var(--text); } .link-btn__ext { width: 12px; height: 12px; opacity: .65; flex: 0 0 auto; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; /* A square control must never be compressed into a sliver by a crowded flex row — that is a hit-target failure, not a cosmetic one. */ flex: 0 0 auto; min-width: 34px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .icon-btn svg { width: 18px; height: 18px; } #theme-toggle .icon-sun { display: none; } [data-theme='light'] #theme-toggle .icon-sun { display: block; } [data-theme='light'] #theme-toggle .icon-moon { display: none; } /* ============================================================ shell ====== */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); height: calc(100dvh - var(--topbar-h)); } /* ========================================================== sidebar ====== */ .sidebar { background: var(--bg-raised); border-right: 1px solid var(--line); overflow: hidden; display: flex; } .sidebar__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px 8px; display: flex; flex-direction: column; gap: 22px; } /* Shown only where the topbar has handed these off — see the 960px block. */ .sidebar-actions { display: none; flex-direction: column; gap: 8px; } .sidebar-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 640; font-size: 14px; text-decoration: none; transition: background .14s var(--ease); } .sidebar-cta:hover { background: var(--accent-hover); } .sidebar-cta__ext { width: 13px; height: 13px; opacity: .8; flex: 0 0 auto; } .sidebar-link { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--text-muted); font-weight: 560; font-size: 13.5px; text-decoration: none; transition: background .14s var(--ease), color .14s var(--ease); } .sidebar-link:hover { background: var(--bg-hover); color: var(--text); } .conn { display: flex; flex-direction: column; gap: 12px; } /* The gap above would otherwise apply to the collapsed too, leaving a phantom space under a shut section. */ .conn:not([open]) { gap: 0; } .conn__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px; margin: -8px -6px; border-radius: var(--radius-sm); cursor: pointer; list-style: none; user-select: none; min-height: 36px; } .conn__summary::-webkit-details-marker { display: none; } .conn__summary:hover { background: var(--bg-hover); } .conn__summary-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .conn__summary-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .conn__chevron { width: 14px; height: 14px; color: var(--text-faint); transition: transform .18s var(--ease); } .conn[open] .conn__chevron { transform: rotate(180deg); } /* Status colour on the summary dot, so a collapsed section still reports it. */ #conn-dot { flex: 0 0 auto; } .conn[data-state='ok'] #conn-dot { background: var(--teal); } .conn[data-state='error'] #conn-dot { background: var(--red); } .plan__tier--mini { font-size: 10.5px; padding: 2px 7px; } .conn__title, .nav-group__title { margin: 0; font-size: 11px; font-weight: 660; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field__label { font-size: 12.5px; font-weight: 560; color: var(--text-muted); } .field__hint { font-size: 11.5px; line-height: 1.45; color: var(--text-faint); } .input { width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .14s var(--ease), box-shadow .14s var(--ease); } .input:hover { border-color: var(--line-strong); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input--mono { font-family: var(--font-mono); font-size: 12px; } .input::placeholder { color: var(--text-faint); } select.input { appearance: none; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237E8F9F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; } .input-group { position: relative; display: flex; } .input-group .input { padding-right: 38px; } .icon-btn--inset { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; } .icon-btn--inset svg { width: 15px; height: 15px; } .conn__status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); padding: 7px 10px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--line); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; } .conn__status[data-state='ok'] { color: var(--teal); border-color: var(--teal); background: var(--teal-soft); } .conn__status[data-state='ok'] .dot { background: var(--teal); } .conn__status[data-state='error'] { color: var(--red); border-color: var(--red); background: var(--red-soft); } .conn__status[data-state='error'] .dot { background: var(--red); } .nav-group { display: flex; flex-direction: column; gap: 18px; } .nav-group__block { display: flex; flex-direction: column; gap: 4px; } .nav-group__title { padding: 0 8px 4px; } .nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); } .nav-item:hover { background: var(--bg-hover); color: var(--text); } .nav-item.is-active { background: var(--accent-soft); color: var(--text); font-weight: 560; box-shadow: inset 2px 0 0 var(--accent); } .verb { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; flex: none; min-width: 34px; text-align: center; } .verb--get { color: var(--teal); background: var(--teal-soft); } .verb--post { color: var(--accent); background: var(--accent-soft); } /* ------------------------------------------------------------ plan/quota -- */ .plan { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--line); } .plan__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .plan__tier { font-size: 12px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; color: var(--teal); background: var(--teal-soft); border: 1px solid var(--teal); } .plan__channel { font-size: 11.5px; color: var(--text-faint); } .plan__meter { height: 6px; border-radius: 100px; overflow: hidden; background: var(--bg-code); border: 1px solid var(--line); } .plan__bar { display: block; height: 100%; width: 0; border-radius: 100px; background: var(--teal); transition: width .3s var(--ease), background .3s var(--ease); } /* Colour follows how close the allowance is to being spent. */ .plan[data-level='warn'] .plan__bar { background: var(--amber); } .plan[data-level='warn'] .plan__tier { color: var(--amber); background: transparent; border-color: var(--amber); } .plan[data-level='spent'] .plan__bar { background: var(--red); } .plan[data-level='spent'] .plan__tier { color: var(--red); background: var(--red-soft); border-color: var(--red); } .plan__usage { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); } .plan__usage strong { color: var(--text); font-weight: 640; font-variant-numeric: tabular-nums; } .plan__note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); } @media (max-width: 620px) { .plan__note { font-size: 12.5px; } .plan__channel { font-size: 12px; } } .sidebar__foot { margin-top: auto; padding: 14px 8px 10px; border-top: 1px solid var(--line); } .sidebar__foot p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); } .scrim { position: fixed; inset: var(--topbar-h) 0 0; z-index: 29; background: rgba(3, 8, 14, .6); backdrop-filter: blur(2px); } /* ============================================================= main ====== */ .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; overflow: hidden; } .panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .panel--request { border-right: 1px solid var(--line); background: var(--bg); } .panel--response { background: var(--bg-panel); } .panel__head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; } .panel__head--tight { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; min-height: 57px; } .panel__heading { display: flex; flex-direction: column; gap: 7px; } .endpoint-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .method { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 3px 7px; border-radius: 4px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); } .method[data-verb='GET'] { color: var(--teal); background: var(--teal-soft); border-color: var(--teal); } .endpoint-path { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); } .panel__title { margin: 0; font-size: 19px; font-weight: 640; letter-spacing: -.3px; } .panel__title--sm { font-size: 14px; font-weight: 620; } .panel__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 62ch; } .examples { display: flex; flex-direction: column; gap: 7px; } .examples__label { font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } .examples__row { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: all .14s var(--ease); } .chip:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } /* ============================================================= form ====== */ .form { flex: 1; display: flex; flex-direction: column; min-height: 0; } .form__fields { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px; display: flex; flex-direction: column; gap: 15px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form__actions { display: flex; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--bg-raised); } textarea.input { resize: vertical; min-height: 74px; line-height: 1.55; font-size: 13px; } .check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 2px 0; } .check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex: none; } .check__body { display: flex; flex-direction: column; gap: 2px; } .check__label { font-size: 13px; font-weight: 550; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: all .14s var(--ease); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover:not(:disabled) { background: var(--accent-hover); } .btn--primary:disabled { opacity: .55; cursor: not-allowed; } .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text-muted); } .btn--ghost:hover { background: var(--bg-hover); color: var(--text); } .btn--tiny { padding: 4px 10px; font-size: 12px; background: transparent; border-color: var(--line-strong); color: var(--text-muted); } .btn--tiny:hover { background: var(--bg-hover); color: var(--text); } .btn__kbd { font-family: var(--font-mono); font-size: 10.5px; opacity: .7; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,.16); } .btn.is-busy .btn__label { opacity: .6; } /* ========================================================= response ====== */ .resp-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); } .resp-meta__item { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } .pill { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; background: var(--teal-soft); color: var(--teal); border: 1px solid var(--teal); } .pill[data-kind='error'] { background: var(--red-soft); color: var(--red); border-color: var(--red); } .tabs { display: flex; align-items: center; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); } .tab { padding: 10px 12px; border: none; background: transparent; color: var(--text-faint); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s var(--ease), border-color .14s var(--ease); } .tab:hover { color: var(--text); } .tab.is-active { color: var(--text); border-bottom-color: var(--accent); } .tabs__copy { margin-left: auto; } .panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 40px 32px; text-align: center; } .empty__mark { opacity: .3; margin-bottom: 4px; } .empty__title { margin: 0; font-size: 14.5px; font-weight: 600; } .empty__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); max-width: 44ch; } pre.code { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--text); background: var(--bg-code); white-space: pre; overflow-x: auto; min-height: 100%; tab-size: 2; } .tok-key { color: var(--blue); } .tok-str { color: var(--teal); } .tok-num { color: var(--accent); } .tok-bool, .tok-null { color: var(--red); } /* --- summary renderer ----------------------------------------------------- */ .summary { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--bg-input); } .card__title { margin: 0; font-size: 13px; font-weight: 640; } .card__meta { font-size: 11.5px; color: var(--text-faint); font-family: var(--font-mono); } .card__body { padding: 14px 15px; } .hs-code { font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--accent); } .conf { display: flex; align-items: center; gap: 9px; margin-top: 3px; } .conf__bar { flex: 1; height: 5px; border-radius: 100px; background: var(--bg-active); overflow: hidden; max-width: 160px; } .conf__fill { height: 100%; border-radius: 100px; background: var(--teal); transition: width .35s var(--ease); } .conf__fill[data-level='mid'] { background: var(--accent); } .conf__fill[data-level='low'] { background: var(--red); } .conf__val { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); } .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-faint); margin-top: 9px; } .crumb__sep { opacity: .5; } .crumb code { font-family: var(--font-mono); color: var(--text-muted); } .rationale { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); } .tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .tag { font-size: 11px; font-weight: 560; padding: 2px 8px; border-radius: 100px; background: var(--bg-active); color: var(--text-muted); border: 1px solid var(--line); } .tag--gri { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .kv { display: flex; flex-direction: column; } .kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); } .kv__row:last-child { border-bottom: none; } .kv__row--total { border-top: 2px solid var(--line-strong); border-bottom: none; margin-top: 4px; padding-top: 11px; } .kv__k { font-size: 13px; color: var(--text-muted); min-width: 0; } .kv__k small { display: block; font-size: 11.5px; color: var(--text-faint); line-height: 1.45; margin-top: 1px; } .kv__v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; } .kv__row--total .kv__k { font-size: 14px; font-weight: 640; color: var(--text); } .kv__row--total .kv__v { font-size: 16px; color: var(--accent); } .kv__v--zero { color: var(--text-faint); font-weight: 500; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; } .stat { padding: 11px 13px; background: var(--bg-raised); } .stat__k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } .stat__v { font-family: var(--font-mono); font-size: 15px; font-weight: 650; margin-top: 3px; } .note { display: flex; gap: 9px; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 12.5px; line-height: 1.55; color: var(--text-muted); } .note--plain { background: var(--bg-input); border-color: var(--line); } .note__icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--accent); } .notes-list { display: flex; flex-direction: column; gap: 7px; } .err-block { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .err-head { display: flex; align-items: center; gap: 9px; } .err-code { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--red-soft); color: var(--red); } .err-msg { margin: 0; font-size: 14px; line-height: 1.6; } .err-detail { font-family: var(--font-mono); font-size: 12px; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--bg-code); border: 1px solid var(--line); color: var(--text-muted); white-space: pre-wrap; word-break: break-word; } .disclaimer { font-size: 11.5px; line-height: 1.55; color: var(--text-faint); padding: 11px 13px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--line); } /* ========================================================== responsive === */ @media (max-width: 1180px) { .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .panel--request { border-right: none; border-bottom: 1px solid var(--line); } } @media (max-width: 960px) { .shell { grid-template-columns: minmax(0, 1fr); } .icon-btn.topbar__menu { display: inline-flex; } .sidebar { position: fixed; inset: var(--topbar-h) auto 0 0; z-index: 30; width: min(320px, 86vw); transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: var(--shadow); } .sidebar.is-open { transform: translateX(0); } .badge { display: none; } /* Hand the topbar's links to the menu. This is the same breakpoint that turns the sidebar into an overlay, so the rule is simply: if the hamburger is showing, these live behind it. */ .topbar__actions .link-btn { display: none; } .sidebar-actions { display: flex; } } @media (max-width: 620px) { .panel__head { padding: 16px 16px 14px; } .panel__head--tight { padding: 12px 16px; } .form__fields { padding: 15px 16px; } .form__actions { padding: 12px 16px; } .form__row { grid-template-columns: 1fr; } .summary, .err-block { padding: 14px 16px; } .tabs { padding: 0 12px; } .tab { padding: 10px 9px; font-size: 12.5px; } .panel__title { font-size: 17px; } .link-btn { padding: 7px 9px; font-size: 13px; } pre.code { padding: 14px 16px; font-size: 12px; } .main { grid-template-rows: auto auto; overflow-y: auto; } .panel { overflow: visible; } .form__fields, .panel__body { overflow: visible; } .shell { height: auto; } /* Small type is readable on a desktop monitor at arm's length and not on a phone. Everything that sits below ~12px is lifted to a legible floor; 11px on a 320px screen is the single most common complaint about this page. */ .field__hint, .sidebar__foot p, .disclaimer { font-size: 12.5px; } .conn__title, .nav-group__title, .examples__label { font-size: 12px; } .method, .pill { font-size: 12px; } .verb { font-size: 11px; } .resp-meta__item, .err-detail { font-size: 12.5px; } /* Keep content clear of rounded corners and the home indicator. */ .form__actions { padding-bottom: max(12px, env(safe-area-inset-bottom)); } .sidebar__scroll { padding-bottom: max(16px, env(safe-area-inset-bottom)); } } @media (max-width: 400px) { .topbar { gap: 8px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); } .link-btn__ext { display: none; } .btn__kbd { display: none; } } /* Short viewports in landscape: the sticky bar and a fixed-height shell leave almost nothing for content, so let the page scroll as one document. */ @media (max-height: 520px) and (orientation: landscape) { .shell { height: auto; } .main { grid-template-rows: auto auto; overflow-y: auto; } .panel, .form__fields, .panel__body { overflow: visible; } .sidebar { inset: var(--topbar-h) auto 0 0; } } /* Coarse pointers get larger hit areas. Applied by input capability rather than viewport width, so a touch laptop benefits and a narrow desktop window does not lose its compact density. */ @media (pointer: coarse) { .chip { padding: 9px 14px; } .icon-btn { width: 44px; height: 44px; min-width: 44px; } .icon-btn--inset { width: 38px; height: 38px; min-width: 38px; } .nav-item { padding: 11px 9px; } .tab { padding: 13px 12px; } .input { padding: 11px 10px; } select.input { padding-right: 30px; } .btn { padding: 12px 18px; } .btn--tiny { padding: 8px 12px; } .link-btn { padding: 11px 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }