/* TechWork.Components.Shell — techwork-shell.css
   ==============================================================================================
   The web side of a native shell's layout contract (BlazorWrapper, or any shell speaking the same
   bridge contract). Pairs with techwork-shell.js and BlazorWrapper's native-shell.json contract;
   the design rules behind it are docs/design-system/MOBILE-AND-NATIVE-SHELL.md.

   What the shell and the module give this sheet:
     html.native-shell                   added by techwork-shell.js configure() when the bridge
                                         object exists (phones and tablets);
     html.native-shell-fullscreen-modals added by shells that hide their own bars while a modal is
                                         open (modals then cover the whole screen, as sheets);
     html.native-push-open /             a detail or form is a pushed page / the current page is
     html.native-page-pushed             a pushed page (techwork-shell.js push / pageStack);
     --shell-tab-height                  the native tab bar's real footprint from the screen
                                         bottom, home indicator included (0px on tablets);
     --shell-top-height                  the translucent native top bar's footprint from the
                                         screen top, status bar included (0px on older shells);
     --shell-safe-top / --shell-safe-bottom
                                         the device's safe-area insets as the shell measured them.

   Everything that changes the page is keyed on html.native-shell (or a class only the shell
   module or this package's components add), so the sheet is inert in a plain browser. The two
   exceptions are component styles that belong to this package's own markup and apply wherever it
   renders: DeepLinkDialog's fill wrapper, and the phone-width PhoneSearchBar / ShellMorePage list.

   Literal colours here are deliberate: inside the shell the app takes the iOS system palette
   (--ios-*), not the web theme's. Web-theme tokens are read as --twc-* with a literal fallback, so
   the sheet works without techwork-theme.css. App-specific screens (an app's own detail bars,
   help panel, …) keep their shell rules in the app. */


/* ── Insets ─────────────────────────────────────────────────────────────────────────────────────
   --shell-bottom-inset is the one number every bottom-anchored thing uses. It deliberately does
   NOT add env(safe-area-inset-bottom) on top of --shell-tab-height: the web view is pinned to the
   screen bottom with contentInsetAdjustmentBehavior = .never, so WebKit may report the ~34px
   home-indicator inset through env() as well, and adding both would double-count it (83px
   footprint + 34px). Only when the shell has not set the variable (older builds, or before the
   first layout pass) does it fall back to the classic 49pt bar + safe area. Tablets get 0px, so
   every rule keyed on this token is a no-op where there is no tab bar. */
html.native-shell {
    --shell-bottom-inset: var(--shell-tab-height, calc(env(safe-area-inset-bottom, 0px) + 49px));
    /* The top counterpart. A phone shell runs the web view full-screen under a translucent native
       top bar (like a UINavigationBar) and sets --shell-top-height to that bar's footprint from
       the screen top, status bar included. Older shells placed the web view below an opaque bar
       and never set it, so it defaults to 0px, as it is on tablets. Anything pinned to the top
       of the document (sticky headers) offsets by it so it stops under the bar, not behind it. */
    --shell-top-inset: var(--shell-top-height, 0px);
    scroll-padding-top: var(--shell-top-inset);
}

/* Signed-out pages (.auth-layout, techwork-theme.css) run under a shell with no tab bar, and a
   phone shell shrinks its top bar to the status-bar strip there, still reporting it as
   --shell-top-height. Keep the centred card clear of the status bar and the home indicator. Older
   shells report their full top bar and no --shell-safe-bottom, so this degrades to the plain
   padding plus that bar. */
html.native-shell .auth-layout {
    padding-top: calc(var(--shell-top-inset) + 1.5rem);
    padding-bottom: calc(var(--shell-safe-bottom, 0px) + 1.5rem);
}

/* The sign-in card fits the screen, so the screen should not move at all, as a native sign-in
   screen does not: no rubber-band bounce when dragged. */
html.native-shell:has(.auth-layout) {
    overscroll-behavior: none;
}

/* Page content (the document is the scroller): clear both bars, plus a small breathing gap so the
   first and last cards are not flush against them. */
html.native-shell .content-area {
    padding-top: calc(var(--shell-top-inset) + 1rem);
    padding-bottom: calc(var(--shell-bottom-inset) + 0.75rem);
}

/* Modals are position: fixed to the viewport, so the content-area padding never reaches them — a
   long dialog's last card scrolled in behind the tab bar. End every Bootstrap modal (TechWork
   Dialog → .modal) at the top of the tab bar instead of the screen bottom: fullscreen dialogs
   (height: 100%), centred ones and modal-dialog-scrollable bodies all size from .modal, so they
   shrink with it and keep their footer above the bar. */
html.native-shell .modal {
    height: calc(100% - var(--shell-bottom-inset));
}

/* Other bottom-anchored fixed UI: Blazor's error bar. */
html.native-shell #blazor-error-ui {
    bottom: var(--shell-bottom-inset);
}


/* ── Modals as full-screen sheets ───────────────────────────────────────────────────────────────
   Shells that hide their own bars while a modal is open (html.native-shell-fullscreen-modals) let
   a modal cover the whole screen, as a native sheet does, so nothing behind it can be tapped. The
   modal then runs edge to edge and pads itself for the notch and home indicator instead of
   stopping at the tab bar. How each kind of dialog uses the space is below. */
html.native-shell.native-shell-fullscreen-modals {
    --shell-safe-top-inset: var(--shell-safe-top, env(safe-area-inset-top, 0px));
    --shell-safe-bottom-inset: var(--shell-safe-bottom, env(safe-area-inset-bottom, 0px));
}

html.native-shell.native-shell-fullscreen-modals .modal {
    height: 100%;
}

/* Every dialog except a small confirmation is a full-screen sheet in the app: no card margins or
   corners, the header pinned to the top of the screen over the status bar with a translucent
   blurred background (the form scrolls visibly underneath), a footer pinned to the bottom over the
   home indicator, and the scroll running to the screen edge with the home-indicator gap after the
   last row rather than a band the content stops above. The sheet's .modal-content is the scroller
   (Bootstrap's scrollable dialog scrolls the body instead, which would leave the header opaque and
   outside the scroll), so the header and footer stick to it. Small dialogs (DialogSize.Small,
   .modal-sm: "Delete …?" confirmations) stay centred, as iOS alerts do. Full-screen DeepLinkDialogs
   (.deep-link-dialog-fullscreen) keep their own bounded layout: their body must stay the scroller
   so a panel can pin, say, a compose box. */
html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content {
    height: 100%;
    max-height: none;
    border: 0;
    /* !important: the theme's base .modal-content radius is itself !important. */
    border-radius: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content > .modal-body {
    flex: 1 0 auto;
    overflow: visible;
}

html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content > .modal-header,
html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content > .modal-footer {
    position: sticky;
    z-index: 5;
    border-radius: 0;
    background: color-mix(in srgb, var(--twc-color-card-bg, #ffffff) 78%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content > .modal-header {
    top: 0;
    padding-top: calc(1rem + var(--shell-safe-top-inset));
}

html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content > .modal-footer {
    bottom: 0;
    padding-bottom: calc(0.75rem + var(--shell-safe-bottom-inset));
}

html.native-shell.native-shell-fullscreen-modals .modal:not(.deep-link-dialog-fullscreen) > .modal-dialog:not(.modal-sm) > .modal-content > .modal-body:last-child {
    padding-bottom: calc(1rem + var(--shell-safe-bottom-inset)) !important;
}

/* Small confirmations stay centred cards, clear of the notch and home indicator. */
html.native-shell.native-shell-fullscreen-modals .modal-dialog.modal-sm {
    margin-top: max(0.5rem, var(--shell-safe-top-inset));
    margin-bottom: max(0.5rem, var(--shell-safe-bottom-inset));
}


/* ── DeepLinkDialog (browser and shell) ─────────────────────────────────────────────────────────
   A full-screen DeepLinkDialog's .modal-body is a bounded flex column (Bootstrap's d-flex and
   flex-column through Dialog's BodyClass, plus min-height: 0 here, which Bootstrap ships no
   utility for), and the component's own .deep-link-dialog-fill wrapper flex-fills it so a panel
   inside can flex-grow and pin, say, a compose bar. Both names are owned solely by DeepLinkDialog,
   so the chain cannot leak onto other dialogs' bodies nested inside the panel. */
.deep-link-dialog-min-h-0 {
    min-height: 0;
}

.deep-link-dialog-fullscreen > .modal-dialog > .modal-content > .modal-body > .deep-link-dialog-fill {
    flex: 1 1 auto;
    min-height: 0;
}


/* ── Detail screens as pushed pages (shells with the detailPush capability) ────────────────────
   DeepLinkDialog marks its modal .native-push, and techwork-shell.js adopts every other
   full-screen TechWork dialog the same way (.native-push-generic). Instead of a sheet over hidden
   bars it is an opaque page on the grouped background that slides in from the right and sits
   under the shell's own top bar (which shows a back button and the title, and hides the tab bar
   while the page is open), as a UINavigationController push does. So: no header or ✕ of its own,
   content starting under the bar, and nothing of the list showing through. The shell's back adds
   .native-push-leaving (techwork-shell.js) to slide it out before it closes. */
html.native-shell.native-shell-fullscreen-modals .modal.native-push {
    padding-top: var(--shell-top-inset);
    background: var(--twc-color-bg, #f2f2f7);
    /* A soft shadow on the leading edge while it slides, so it reads as a page coming over the
       list rather than the list being replaced. Off-screen once the page is in place. */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.28);
    animation: native-push-in 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Same curve on the way out, so the page follows through instead of snapping away. The module
   waits for animationend before it closes the dialog. */
html.native-shell.native-shell-fullscreen-modals .modal.native-push.native-push-leaving {
    animation: native-push-out 0.34s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    pointer-events: none;
}

/* Controls mirrored into the shell's top bar (techwork-shell.js mirror / toolbar / formActions: a
   form's Save / Cancel, toolbar items): the page's own, and the button row they leave empty, are
   hidden. */
html.native-shell [data-shell-mirrored] {
    display: none !important;
}

/* Page controls the app does without in the shell (a "View site" button the top bar already
   offers, a floating button the shell replaces, …): mark them data-shell-hide. */
html.native-shell [data-shell-hide] {
    display: none !important;
}

/* A page's own "Back to …" control on a pushed page (the shell's back replaces it). */
html.native-page-pushed [data-shell-back] {
    display: none !important;
}

/* On a pushed page the shell's back button replaces the page's own "← Back to …" link
   (a.back-button, techwork-theme.css). */
html.native-page-pushed a.back-button {
    display: none !important;
}

/* A form or detail sliding out (techwork-shell.js slideOutCopy): a still copy of it, so the real
   dialog can close underneath at once. Above the page it leaves, never interactive. */
html.native-shell.native-shell-fullscreen-modals .modal.native-push-ghost {
    pointer-events: none;
}

/* Pages pushed from other pages (techwork-shell.js pageStack). Going forward, the new page's
   content area slides in from the right over a still copy of the page it came from; going back, a
   copy of the page being left slides out to the right over the page it returns to. */
.shell-page-snapshot {
    position: fixed;
    inset: 0;
    z-index: 1030;
    overflow: hidden;
    background: var(--twc-color-bg, #f2f2f7);
    pointer-events: none;
}

.shell-page-snapshot.leaving {
    z-index: 1032;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.28);
    animation: native-push-out 0.34s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

html.native-shell .content-area.shell-page-entering {
    position: relative;
    z-index: 1031;
    min-height: 100vh;
    background: var(--twc-color-bg, #f2f2f7);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.28);
    animation: native-push-in 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    .shell-page-snapshot.leaving,
    html.native-shell .content-area.shell-page-entering {
        animation: none;
    }
}

@keyframes native-push-in {
    from { transform: translateX(100%); }
    to { transform: none; }
}

@keyframes native-push-out {
    from { transform: none; }
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    html.native-shell.native-shell-fullscreen-modals .modal.native-push,
    html.native-shell.native-shell-fullscreen-modals .modal.native-push.native-push-leaving {
        animation: none;
    }
}

html.native-shell.native-shell-fullscreen-modals .modal.native-push > .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

html.native-shell.native-shell-fullscreen-modals .modal.native-push > .modal-dialog > .modal-content {
    background: transparent;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
}

/* The shell's bar carries the title and the way back. (A panel that draws its own bar hides that
   bar's title and close itself, in the app's CSS.) */
html.native-shell.native-shell-fullscreen-modals .modal.native-push > .modal-dialog > .modal-content > .modal-header {
    display: none;
}


/* ── iOS palette ────────────────────────────────────────────────────────────────────────────────
   iOS look inside the app (native shell only). Measured against iOS 26 Settings on a phone: the
   page is the system grouped background (pure black in dark, #F2F2F7 in light) and cards sit on it
   as #1C1C1E / white surfaces, so the page reads darker than its cards, not lighter as in the web
   palette. Text is the system font (SF Pro) rather than the web stack, which falls through to
   Verdana on iOS. Only the tokens change here, so every card, grid and dialog follows without
   per-component rules, and the desktop web app is untouched. The --twc-* names are
   TechWork.Components' tokens (techwork-theme.css reads them directly, and its --color-* /
   --font-* aliases resolve from them), so redefining them here re-points both.

   --ios-separator, --ios-pressed and --ios-chevron are also the hooks techwork-theme.css's
   phone-list rows take in the shell (below). */
html.native-shell {
    --twc-font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
    --twc-color-bg: #f2f2f7;
    --twc-color-card-bg: #ffffff;
    --twc-color-border: rgba(60, 60, 67, 0.18);
    --ios-separator: rgba(60, 60, 67, 0.29);
    --ios-pressed: #d1d1d6;
    --ios-chevron: rgba(60, 60, 67, 0.3);
    --ios-group-radius: 26px;
    --ios-search-fill: rgba(118, 118, 128, 0.12);
    --ios-blue: #007aff; --ios-green: #34c759; --ios-orange: #ff9500; --ios-red: #ff3b30;
    --ios-purple: #af52de; --ios-indigo: #5856d6; --ios-teal: #30b0c7; --ios-pink: #ff2d55;
    --ios-gray: #8e8e93;
    -webkit-tap-highlight-color: transparent;
}

html.native-shell[data-bs-theme="dark"],
html.native-shell[data-bs-theme="dark"] body {
    --twc-color-bg: #000000;
    --twc-color-card-bg: #1c1c1e;
    --twc-color-border: rgba(84, 84, 88, 0.45);
    --bs-body-bg: #1c1c1e;
    --bs-border-color: rgba(84, 84, 88, 0.65);
    --ios-separator: rgba(84, 84, 88, 0.65);
    --ios-pressed: #3a3a3c;
    --ios-chevron: rgba(235, 235, 245, 0.3);
    --ios-search-fill: rgba(118, 118, 128, 0.24);
    --ios-blue: #0a84ff; --ios-green: #30d158; --ios-orange: #ff9f0a; --ios-red: #ff453a;
    --ios-purple: #bf5af2; --ios-indigo: #5e5ce6; --ios-teal: #40c8e0; --ios-pink: #ff375f;
    --ios-gray: #98989d;
}

/* A layout that paints its shell or content area with its own dark surface (some use
   --bs-secondary-bg !important) gets the grouped background in the app instead. */
html.native-shell[data-bs-theme="dark"] .app-shell,
html.native-shell[data-bs-theme="dark"] .content-area {
    background: var(--twc-color-bg, #000000) !important;
}


/* ── iOS form fields ────────────────────────────────────────────────────────────────────────────
   Form fields in the app look like iOS text fields (a rounded, borderless fill, 44pt tall, 17pt
   text, as UITextField and SwiftUI's TextField draw them): every text box, number field, select,
   date and textarea alike, in both themes. No focus ring (iOS shows the caret instead); an invalid
   field gets a thin red edge. !important where the dark theme's own field colours are. */
html.native-shell .form-control,
html.native-shell .form-select,
html.native-shell .form-control-sm,
html.native-shell .form-select-sm {
    min-height: 44px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 17px;
    line-height: 1.3;
    border: 0;
    border-radius: 10px;
    background-color: var(--ios-search-fill) !important;
    color: var(--twc-color-text, #111827) !important;
    box-shadow: none;
}

html.native-shell .form-control,
html.native-shell .form-control-sm {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

html.native-shell .form-control:focus,
html.native-shell .form-select:focus {
    background-color: var(--ios-search-fill) !important;
    box-shadow: none;
    caret-color: var(--ios-blue);
}

html.native-shell .form-control.invalid,
html.native-shell .form-select.invalid {
    box-shadow: inset 0 0 0 1px var(--ios-red);
}

html.native-shell .form-control::placeholder {
    color: var(--twc-color-muted, #64748b);
}

html.native-shell .input-group-text {
    min-height: 44px;
    font-size: 17px;
    border: 0;
    background-color: var(--ios-search-fill);
}

/* Bootstrap overlaps joined input-group parts by 1px (to merge their borders); with a translucent
   fill that overlap paints as a darker seam between "£" and its field. */
html.native-shell .input-group > :not(:first-child) {
    margin-left: 0 !important;
}

html.native-shell textarea.form-control {
    min-height: 88px;
}

/* WebKit centres the value of date and time fields; line them up with the text fields. */
html.native-shell .form-control::-webkit-date-and-time-value {
    text-align: left;
}

/* iOS large title (PageHeader's .twc-page-title): 34pt bold, as on Settings and every tab root. */
html.native-shell .twc-page-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.01em;
}


/* ── More list (ShellMorePage) ──────────────────────────────────────────────────────────────────
   An iOS inset-grouped list, one rounded group per section. The page is only reached in the shell,
   so its colours come from the iOS palette above (with fallbacks, should a host render it
   elsewhere). */
.more-list {
    list-style: none;
    margin: 0 0 2.25rem;
    padding: 0;
    border-radius: var(--ios-group-radius, var(--twc-radius-card, 0.875rem));
    overflow: hidden;
    background: var(--twc-color-card-bg, #ffffff);
}

.more-list-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.375rem 1rem;
    color: var(--twc-color-text, #111827);
    font-size: 17px;
    text-decoration: none;
}

/* Hairline between rows, starting where the title starts (tile 30px + 12px gap + 16px inset), as
   UITableView separators do. */
.more-list li + li .more-list-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(1rem + 30px + 0.75rem);
    right: 0;
    border-top: 0.5px solid var(--ios-separator, var(--twc-color-border, rgba(60, 60, 67, 0.18)));
}

.more-list-link:active { background: var(--ios-pressed, var(--bs-tertiary-bg, #f8f9fa)); }
.more-list-title { flex: 1; min-width: 0; }

.more-list-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--more-tint);
    color: #fff;
}

.more-list-tile .material-icons { font-size: 19px; }

/* Dark mode matches iOS 26 dark icons: the glyph takes the colour on a dark tile. */
[data-bs-theme="dark"] .more-list-tile {
    background: #2c2c2e;
    color: var(--more-tint);
}

.more-tint-blue { --more-tint: var(--ios-blue, #007aff); }
.more-tint-green { --more-tint: var(--ios-green, #34c759); }
.more-tint-orange { --more-tint: var(--ios-orange, #ff9500); }
.more-tint-red { --more-tint: var(--ios-red, #ff3b30); }
.more-tint-purple { --more-tint: var(--ios-purple, #af52de); }
.more-tint-indigo { --more-tint: var(--ios-indigo, #5856d6); }
.more-tint-teal { --more-tint: var(--ios-teal, #30b0c7); }
.more-tint-pink { --more-tint: var(--ios-pink, #ff2d55); }
.more-tint-gray { --more-tint: var(--ios-gray, #8e8e93); }

.more-list-chevron {
    font-size: 22px;
    margin-right: -0.375rem;
    color: var(--ios-chevron, var(--bs-secondary-color, rgba(33, 37, 41, 0.75)));
}


/* ── Phone list rows in the shell ───────────────────────────────────────────────────────────────
   Phone list rows (.phone-list / .phone-row*, techwork-theme.css; grids set PhoneRowTemplate) take
   the iOS separator, pressed-row and chevron colours in the app. */
@media (max-width: 767.98px) {
    html.native-shell .rtable.phone-list tbody tr.rtable-row:not(:last-child)::after {
        border-top-color: var(--ios-separator);
    }

    html.native-shell .rtable.phone-list tbody tr.rtable-row:active {
        background-color: var(--ios-pressed);
    }
}

html.native-shell .phone-row-chevron {
    color: var(--ios-chevron);
}


/* ── Phone search bar (PhoneSearchBar, ≤767.98px) ───────────────────────────────────────────────
   The iOS search field (Contacts, Phone) under a list screen's title — a 44pt capsule in the
   system search fill with a magnifier and "Search", full width, in the page flow so it scrolls
   away with the page. A toolbar search box it stands in for carries .phone-search-duplicate and
   hides at this width. 17px text, as iOS uses (and below which WebKit would zoom a focused field).
   This part applies in a browser too: it is the component's own layout. */
.phone-search {
    display: none;
}

@media (max-width: 767.98px) {
    .phone-search {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        height: 44px;
        margin: 0 0 1rem;
        padding: 0 0.85rem;
        border-radius: 999px;
        background: var(--ios-search-fill, var(--bs-tertiary-bg, #f8f9fa));
    }

    .phone-search-duplicate {
        display: none !important;
    }
}

.phone-search .material-icons {
    flex: none;
    font-size: 21px;
    color: var(--twc-color-subtle, #475569);
}

.phone-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--twc-color-text, #111827);
    font-size: 17px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.phone-search input::placeholder {
    color: var(--twc-color-subtle, #475569);
    opacity: 1;
}

.phone-search:focus-within {
    box-shadow: 0 0 0 2px var(--twc-color-primary-tint-strong, rgba(59, 91, 219, 0.22));
}

/* In a shell that draws the search field natively (a capsule over the web view, above the tab
   bar) the page keeps only an empty marker, displayed exactly where the HTML field would be (phone
   width) so techwork-shell.js can tell when to show the native one. It takes no space. */
.phone-search.phone-search-native {
    height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}