/* ============================================================
   indexbychi.css — the shared house style
   Version: 1.0.0

   The design system behind every indexbychi site.

   Plain CSS. No preprocessor, no build step, no framework, no
   remote imports. Drop it in, load it first, then load your own
   site.css after it for project-specific rules and overrides.

       <link rel="stylesheet" href="/css/indexbychi.css">
       <link rel="stylesheet" href="/css/site.css">

   Copy this file into a project. Never edit the copy — fix it
   here, bump the version, and re-copy.

   Contents
     1.  Design tokens
     2.  Reset and base elements
     3.  Layout
     4.  Logo lockup
     5.  Buttons
     6.  Form controls
     7.  Badges and pills
     8.  Tables
     9.  Numbers
     10. Sparklines
     11. Loading placeholders
     12. Utilities
   ============================================================ */


/* ------------------------------------------------------------
   1. Design tokens

   Every colour in the system is declared here and nowhere else.
   If you need a colour, add it to this block — never write a
   hex value further down the file, and never in a site.css.
   ------------------------------------------------------------ */
:root {

    /* --- Raw palette -------------------------------------- */
    /* The ramps. Prefer the semantic names below in real rules. */

    --color-black:       #000;
    --color-white:       #fff;

    --color-neutral-900: #111;
    --color-neutral-800: #1f1f1f;
    --color-neutral-700: #2d2d2d;
    --color-neutral-600: #6b7280;
    --color-neutral-500: #9ca3af;
    --color-neutral-400: #d1d5db;
    --color-neutral-300: #e5e7eb;
    --color-neutral-200: #f3f4f6;
    --color-neutral-100: #f9fafb;

    --color-green-600:   #059669;
    --color-green-700:   #047857;

    --color-red-600:     #dc2626;
    --color-red-700:     #b91c1c;

    --color-blue-500:    #3b82f6;

    /* --- Translucent overlays ----------------------------- */
    /* White over dark surfaces. */

    --color-light-a10:   rgba(255, 255, 255, 0.10);
    --color-light-a20:   rgba(255, 255, 255, 0.20);
    --color-light-a40:   rgba(255, 255, 255, 0.40);
    --color-light-a45:   rgba(255, 255, 255, 0.45);
    --color-light-a60:   rgba(255, 255, 255, 0.60);
    --color-light-a70:   rgba(255, 255, 255, 0.70);
    --color-light-a80:   rgba(255, 255, 255, 0.80);
    --color-light-a90:   rgba(255, 255, 255, 0.90);
    --color-light-a95:   rgba(255, 255, 255, 0.95);

    /* Black over light surfaces, and for shadows. */

    --color-dark-a06:    rgba(0, 0, 0, 0.06);
    --color-dark-a10:    rgba(0, 0, 0, 0.10);
    --color-dark-a35:    rgba(0, 0, 0, 0.35);
    --color-dark-a60:    rgba(0, 0, 0, 0.60);
    --color-dark-a70:    rgba(0, 0, 0, 0.70);
    --color-dark-a85:    rgba(0, 0, 0, 0.85);

    /* Ink at 10%, for icon wells and soft fills. */
    --color-text-a10:    rgba(17, 17, 17, 0.10);

    /* Positive and negative, tinted. */
    --color-positive-a10: rgba(5, 150, 105, 0.10);
    --color-positive-a20: rgba(5, 150, 105, 0.20);
    --color-negative-a10: rgba(220, 38, 38, 0.10);
    --color-negative-a20: rgba(220, 38, 38, 0.20);

    /* --- Semantic colour ---------------------------------- */

    /* Backgrounds and surfaces */
    --color-bg:              var(--color-white);
    --color-bg-subtle:       var(--color-neutral-100);
    --color-bg-muted:        var(--color-neutral-200);
    --color-bg-inverse:      var(--color-black);
    --color-surface:         var(--color-white);
    --color-surface-inverse: var(--color-neutral-800);

    /* Text */
    --color-text:               var(--color-neutral-900);
    --color-text-strong:        var(--color-black);
    --color-text-body:          var(--color-neutral-700);
    --color-text-muted:         var(--color-neutral-600);
    --color-text-subtle:        var(--color-neutral-500);
    --color-text-faint:         var(--color-neutral-400);
    --color-text-inverse:       var(--color-white);
    --color-text-inverse-muted: var(--color-light-a70);

    /* Borders and rules */
    --color-border:         var(--color-neutral-200);
    --color-border-subtle:  var(--color-neutral-100);
    --color-border-strong:  var(--color-neutral-300);
    --color-border-inverse: var(--color-light-a10);

    /* Meaning */
    --color-accent:          var(--color-blue-500);
    --color-positive:        var(--color-green-600);
    --color-positive-strong: var(--color-green-700);
    --color-positive-soft:   var(--color-positive-a10);
    --color-positive-line:   var(--color-positive-a20);
    --color-negative:        var(--color-red-600);
    --color-negative-strong: var(--color-red-700);
    --color-negative-soft:   var(--color-negative-a10);
    --color-negative-line:   var(--color-negative-a20);

    /* Interaction */
    --color-selection-bg:   var(--color-neutral-900);
    --color-selection-text: var(--color-white);
    --color-focus-ring:     var(--color-neutral-900);
    --color-scroll-track:   var(--color-neutral-200);
    --color-scroll-thumb:   var(--color-neutral-400);
    --color-scroll-thumb-hover: var(--color-neutral-500);

    /* --- Type ---------------------------------------------- */
    /* Two families: a serif for display, a sans for everything
       else. Both are optional webfonts with full system
       fallbacks — see README for self-hosting. */

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Text scale — UI chrome and body copy */
    --text-3xs:  10px;
    --text-2xs:  11px;
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   16px;
    --text-xl:   17px;
    --text-2xl:  18px;
    --text-3xl:  20px;

    /* Display scale — headings and big numbers */
    --display-2xs: 22px;
    --display-xs:  24px;
    --display-sm:  26px;
    --display-md:  28px;
    --display-lg:  32px;
    --display-xl:  36px;
    --display-2xl: 40px;
    --display-3xl: 48px;
    --display-4xl: 56px;
    --display-5xl: 60px;
    --display-6xl: 72px;

    /* Weights */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    800;

    /* Line heights */
    --leading-flush:       1;
    --leading-tight:       1.1;
    --leading-heading:     1.2;
    --leading-normal:      1.5;
    --leading-relaxed:     1.6;
    --leading-comfortable: 1.7;
    --leading-loose:       1.8;

    /* Letter spacing */
    --tracking-tight:     -0.025em;
    --tracking-caps:      0.05em;
    --tracking-caps-wide: 0.1em;

    /* --- Space --------------------------------------------- */
    /* A 4px grid. The number is the step, not the pixel value. */

    --space-half: 2px;
    --space-1:    4px;
    --space-1-5:  6px;
    --space-2:    8px;
    --space-2-5:  10px;
    --space-3:    12px;
    --space-3-5:  14px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;
    --space-20:   80px;
    --space-24:   96px;
    --space-30:   120px;
    --space-35:   140px;
    --space-40:   160px;

    /* --- Radii --------------------------------------------- */
    /* The house radius is 2px. It is deliberately almost square. */

    --radius-sharp: 2px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-full:  9999px;

    /* --- Border weights ------------------------------------ */

    --border-thin:  1px;
    --border-thick: 2px;

    /* --- Shadow -------------------------------------------- */
    /* Used sparingly. The system leans on hairlines, not depth. */

    --shadow-hairline: 0 1px 3px var(--color-dark-a10);
    --shadow-bar:      0 2px 8px var(--color-dark-a06);
    --shadow-lift:     0 8px 25px var(--color-dark-a10);

    /* --- Widths -------------------------------------------- */

    --content-max: 1920px;  /* full-bleed content container */
    --prose-max:   720px;   /* comfortable reading measure */

    /* --- Motion -------------------------------------------- */

    --transition-fast:   0.2s;
    --transition-medium: 0.3s;
    --transition-slow:   0.7s;
}


/* ------------------------------------------------------------
   2. Reset and base elements
   ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-heading);
}

p {
    line-height: var(--leading-normal);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

ul, ol {
    list-style: none;
}

hr {
    height: 0;
    border: 0;
    border-top: var(--border-thin) solid var(--color-border);
}

button {
    font-family: inherit;
}

/* Scrollbars — thin, neutral, out of the way. */
::-webkit-scrollbar {
    width: var(--space-1-5);
}

::-webkit-scrollbar-track {
    background: var(--color-scroll-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}

:focus-visible {
    outline: var(--border-thick) solid var(--color-focus-ring);
    outline-offset: var(--space-half);
}


/* ------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------ */

/* Full-bleed page container. Gutters widen at larger viewports. */
.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-12);
    }
}

@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-16);
    }
}

/* Reading measure for long-form copy. */
.prose {
    max-width: var(--prose-max);
}


/* ------------------------------------------------------------
   4. Logo lockup

   The wordmark set in the display serif, with INDEXBYCHI in
   small tracked-out caps tucked under its right edge.

       <a href="/" class="logo">
           <span class="logo-mark">Realty</span>
           <span class="logo-sub">indexbychi</span>
       </a>

   Swap the .logo-mark text per site; .logo-sub never changes.
   Add .logo-inverse when the lockup sits on a dark surface.
   ------------------------------------------------------------ */

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    line-height: var(--leading-flush);
    text-decoration: none;
}

.logo-mark {
    font-family: var(--font-display);
    font-size: var(--display-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-flush);
    color: var(--color-text);
}

.logo-sub {
    align-self: flex-end;
    margin-top: 3px;
    font-family: var(--font-sans);
    font-size: var(--text-3xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps-wide);
    line-height: var(--leading-flush);
    text-transform: uppercase;
    color: var(--color-dark-a35);
    transition: color var(--transition-fast);
}

.logo:hover .logo-sub {
    color: var(--color-accent);
}

.logo-inverse .logo-mark {
    color: var(--color-text-inverse);
}

.logo-inverse .logo-sub {
    color: var(--color-light-a45);
}


/* ------------------------------------------------------------
   5. Buttons

   One base, two fills, three sizes. Works on <button> and <a>.

       <button class="btn btn-primary">Search</button>
       <a class="btn btn-inverse btn-lg" href="/">Start</a>
   ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3-5) var(--space-6);
    border: none;
    border-radius: var(--radius-sharp);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                opacity var(--transition-fast),
                color var(--transition-fast);
}

/* Fills */

.btn-primary {
    background-color: var(--color-text-strong);
    color: var(--color-text-inverse);
}

.btn-primary:hover {
    background-color: var(--color-surface-inverse);
}

.btn-inverse {
    background-color: var(--color-bg);
    color: var(--color-text-strong);
}

.btn-inverse:hover {
    opacity: 0.9;
}

.btn-quiet {
    background-color: transparent;
    color: var(--color-text-muted);
}

.btn-quiet:hover {
    color: var(--color-text);
}

/* Sizes */

.btn-sm {
    padding: var(--space-2-5) var(--space-6);
    font-size: var(--text-base);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

/* Shape and width modifiers */

.btn-round {
    border-radius: var(--radius-sm);
}

.btn-block {
    display: flex;
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ------------------------------------------------------------
   6. Form controls

   Class-based on purpose — bare element selectors would collide
   with the borderless inputs that sit inside composite search
   and filter bars.

       <label class="label" for="q">Location</label>
       <input class="input" id="q" type="text" placeholder="Detroit">
   ------------------------------------------------------------ */

.label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    padding: var(--space-2-5) var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
}

.textarea {
    min-height: 120px;
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-text-faint);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--color-border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: var(--border-thick) solid var(--color-focus-ring);
    outline-offset: var(--space-half);
    border-color: var(--color-border-strong);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

/* An input paired with a leading icon. */
.field {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
}

.field svg {
    flex-shrink: 0;
    color: var(--color-text-faint);
}

.field .input,
.field .select {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.field .input:focus,
.field .select:focus {
    outline: none;
}

.field-hint {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}


/* ------------------------------------------------------------
   7. Badges and pills

   Small tracked-out caps. The house radius keeps them square —
   add .badge-round for a fully rounded pill.

       <span class="badge badge-positive">Curated</span>
   ------------------------------------------------------------ */

.badge {
    display: inline-block;
    padding: var(--space-1-5) var(--space-4);
    border-radius: var(--radius-sharp);
    background-color: var(--color-bg-subtle);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.badge-sm {
    padding: var(--space-1) var(--space-3);
}

.badge-round {
    border-radius: var(--radius-full);
}

/* Variants */

.badge-neutral {
    border: var(--border-thin) solid var(--color-border);
    background-color: var(--color-bg-subtle);
}

.badge-outline {
    border: var(--border-thin) solid var(--color-border-strong);
    background-color: transparent;
}

.badge-positive {
    border: var(--border-thin) solid var(--color-positive-line);
    background-color: var(--color-positive-soft);
}

.badge-negative {
    border: var(--border-thin) solid var(--color-negative-line);
    background-color: var(--color-negative-soft);
}

.badge-inverse {
    background-color: var(--color-light-a10);
    border: var(--border-thin) solid var(--color-light-a20);
    color: var(--color-text-inverse);
}

/* Solid fills, for a figure that needs to carry across an image. */

.badge-solid-positive {
    background: linear-gradient(135deg, var(--color-positive), var(--color-positive-strong));
    color: var(--color-text-inverse);
}

.badge-solid-negative {
    background: linear-gradient(135deg, var(--color-negative), var(--color-negative-strong));
    color: var(--color-text-inverse);
}


/* ------------------------------------------------------------
   8. Tables

   Hairline rules, no vertical borders, column heads in the same
   small tracked-out caps as the badges. Add .table-dense for a
   tighter row height when a page is carrying a lot of rows.

       <table class="table table-dense">
         <thead><tr><th>Name</th><th class="col-num">Price</th></tr></thead>
         <tbody><tr><td>…</td><td class="col-num">1,240</td></tr></tbody>
       </table>
   ------------------------------------------------------------ */

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-base);
}

.table caption {
    padding-bottom: var(--space-3);
    text-align: left;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.table th {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-thin) solid var(--color-border-strong);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--color-text-subtle);
}

.table td {
    padding: var(--space-4);
    border-bottom: var(--border-thin) solid var(--color-border-subtle);
    color: var(--color-text-body);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover td {
    background-color: var(--color-bg-subtle);
}

/* A row that should read as the anchor of its group. */
.table .row-strong td {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

/* Dense variant — same type, tighter rows. */

.table-dense {
    font-size: var(--text-sm);
}

.table-dense th {
    padding: var(--space-2) var(--space-3);
}

.table-dense td {
    padding: var(--space-2) var(--space-3);
}

/* Numeric columns. Right-aligned and tabular so digits line up
   between rows. Apply to the th and every td in the column. */

.table .col-num,
.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Scroll container for a table wider than its column. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
}


/* ------------------------------------------------------------
   9. Numbers

   Figures are the content on a data-dense page, so they get
   their own treatment: display serif, bold, tabular.
   ------------------------------------------------------------ */

/* Utility — lock digits to a fixed advance width. */
.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* A headline figure. */
.value {
    font-family: var(--font-display);
    font-size: var(--display-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.value-sm {
    font-size: var(--text-3xl);
}

.value-lg {
    font-size: var(--display-md);
}

/* The label that sits above a figure. */
.value-label {
    margin-bottom: var(--space-1);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* Direction. Colour only — no arrows, no background. */
.value-positive,
.text-positive {
    color: var(--color-positive);
}

.value-negative,
.text-negative {
    color: var(--color-negative);
}

/* An inline change figure next to a value. */
.delta {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--color-text-muted);
}

.delta-positive {
    color: var(--color-positive);
}

.delta-negative {
    color: var(--color-negative);
}


/* ------------------------------------------------------------
   10. Sparklines

   A thin inline SVG trend line. Stroke only — no fill, no glow,
   no gradient. Draw the path in the markup and let the CSS
   colour it.

       <svg class="sparkline sparkline-positive" viewBox="0 0 120 32"
            preserveAspectRatio="none" aria-hidden="true">
         <polyline points="0,26 20,22 40,24 60,14 80,16 100,8 120,4"/>
       </svg>

   viewBox plus preserveAspectRatio="none" lets the line stretch
   to any cell width; non-scaling-stroke keeps the weight even.
   ------------------------------------------------------------ */

.sparkline {
    display: block;
    width: 120px;
    height: 32px;
    overflow: visible;
}

.sparkline polyline,
.sparkline path,
.sparkline line {
    fill: none;
    stroke: var(--color-text-subtle);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sparkline-positive polyline,
.sparkline-positive path {
    stroke: var(--color-positive);
}

.sparkline-negative polyline,
.sparkline-negative path {
    stroke: var(--color-negative);
}

/* Optional zero line behind the trend. */
.sparkline .sparkline-baseline {
    stroke: var(--color-border-strong);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

/* The end-of-series dot. Fill, not stroke. */
.sparkline .sparkline-dot {
    fill: var(--color-text-subtle);
    stroke: none;
}

.sparkline-positive .sparkline-dot {
    fill: var(--color-positive);
}

.sparkline-negative .sparkline-dot {
    fill: var(--color-negative);
}

/* Sized to sit inside a table row rather than a card. */
.sparkline-inline {
    display: inline-block;
    width: 80px;
    height: 20px;
    vertical-align: middle;
}


/* ------------------------------------------------------------
   11. Loading placeholders
   ------------------------------------------------------------ */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton {
    background-color: var(--color-bg-muted);
    animation: pulse 2s ease-in-out infinite;
}


/* ------------------------------------------------------------
   12. Utilities
   ------------------------------------------------------------ */

.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-subtle {
    color: var(--color-text-subtle);
}

.text-caps {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}