/* =========================================================================== Conformant 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); --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); --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; padding: 0 18px; background: var(--bg-raised); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .topbar__actions { display: flex; align-items: center; gap: 6px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand__name { font-size: 17px; font-weight: 640; letter-spacing: -.3px; } .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); } .link-btn:hover { background: var(--bg-hover); color: var(--text); } .link-btn__ext { width: 12px; height: 12px; opacity: .65; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; 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; } .conn { display: flex; flex-direction: column; gap: 12px; } .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); } .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); } .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; } } @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; } } @media (max-width: 400px) { .topbar { padding: 0 12px; gap: 8px; } .link-btn__ext { display: none; } .btn__kbd { display: none; } } /* 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: 42px; height: 42px; } .icon-btn--inset { width: 34px; height: 34px; } .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; } } /* =========================================================================== Conformant — verdict and radio-status tokens --------------------------------------------------------------------------- The verdict is the whole product, so it gets colour that survives a glance across a board of thirty markets. `insufficient_data` is deliberately grey rather than green: it must never read as a pass. ======================================================================== */ .tag--blocked, .tag--prohibited { color: var(--red); background: var(--red-soft); border-color: var(--red); } .tag--conditional, .tag--restricted { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .tag--clear, .tag--permitted { color: var(--teal); background: var(--teal-soft); border-color: var(--teal); } .tag--insufficient_data, .tag--unknown { color: var(--text-faint); background: var(--bg-active); border-color: var(--line-strong); } .conn__status[data-state='busy'] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .conn__status[data-state='busy'] .dot { background: var(--accent); } .panel__heading { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 640; } .panel__desc { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; } .panel__title--sm { font-size: 12px; font-weight: 640; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); margin: 18px 0 6px; } .notes-list { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.55; color: var(--text-muted); } .btn.is-busy { opacity: .6; pointer-events: none; } .nav-group__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* =========================================================================== Conformant layout overrides --------------------------------------------------------------------------- The base shell is Declarant's: a two-column main split into a request panel and a response panel. Conformant's request lives entirely in the sidebar — you pick radios and markets there — so the second column had nothing in it and left roughly 40% of the viewport empty. One column, full width. ======================================================================== */ .main { grid-template-columns: minmax(0, 1fr); } /* Market rows read as "name … CODE", so label and code sit on one line with the code pushed to the right edge where the eye can scan the column. */ .check__body--row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; } .check { width: 100%; } /* A country code is an identifier, not a status. The teal pill read as a success badge next to eighteen markets that had not been assessed yet. */ .pill--code { background: var(--bg-active); color: var(--text-faint); border-color: var(--line-strong); font-weight: 600; } /* Results breathe: the board is the deliverable, not a sidebar accessory. The base .panel__body carries no padding at all — Declarant's panels supplied their own — so without this the cards sat flush against the panel edges. */ .panel--response .panel__body { padding: 18px 20px 40px; } #boardOut { display: flex; flex-direction: column; gap: 18px; } #verdictGroups { display: flex; flex-direction: column; gap: 16px; } #verdictGroups .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); overflow: visible; } #verdictGroups .panel__body { display: flex; flex-direction: column; gap: 12px; } /* The verdict label and its explanation are one thought, so they stack as a unit. The base --tight modifier pushes them to opposite edges, which at full width left the sentence stranded 900px from the label it describes. */ #verdictGroups .panel__head--tight { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-raised); } .card__title { font-size: 14px; font-weight: 640; display: flex; align-items: center; gap: 8px; } .card__meta { font-size: 11.5px; color: var(--text-faint); font-family: var(--font-mono); } .card__body { padding: 14px 16px; } .disclaimer { font-size: 11.5px; line-height: 1.6; color: var(--text-faint); border-top: 1px solid var(--line); padding-top: 14px; } .rationale { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 4px 0 10px; } /* --------------------------------------------------------------------------- The [hidden] attribute must actually hide. A class that sets `display` outranks the user-agent `[hidden] { display:none }` rule, so `.empty { display: flex }` kept the empty state on screen above every result even though the attribute was set. This is the standard remedy and it belongs last so nothing later can defeat it. ------------------------------------------------------------------------ */ [hidden] { display: none !important; }