/* ResourceSpace — Morph theme skin
   Palette & feel based on Bootswatch v5.3.x “Morph”.
   Keeps RS selectors; only re-skins colors, radii, shadows. */

/* Typography (Morph uses Nunito) — optional but recommended */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

/* ---------- Theme tokens (Morph) ---------- */
:root {
    --morph-body-bg: #f7f9fc;     /* --bs-secondary-bg */
    --morph-body-fg: #7b8ab8;     /* --bs-body-color */
    --morph-heading: #485785;     /* --bs-heading-color */
    --morph-link: #485785;        /* --bs-link-color */
    --morph-link-hover: #3a466a;  /* --bs-link-hover-color */
    --morph-primary: #378dfc;
    --morph-primary-600: #2f78d6;
    --morph-success: #43cc29;
    --morph-info: #5b62f4;
    --morph-warning: #ffc107;
    --morph-danger: #e52527;

    --morph-surface: #f0f5fa;     /* tertiary bg */
    --morph-surface-2: #fff;      /* plain white card */
    --morph-border: rgba(55, 94, 148, 0.1);

    --morph-shadow: 5px 5px 10px rgba(55, 94, 148, 0.20), -5px -5px 10px rgba(255,255,255,0.40);
    --morph-shadow-sm: 0 0.125rem 0.25rem rgba(55, 94, 148, 0.20);
    --morph-shadow-lg: 8px 8px 40px rgba(0,0,0,0.15);

    --morph-inset: inset 2px 2px 8px rgba(55, 94, 148, 0.30), inset -3px -2px 5px rgba(255,255,255,0.80);
    --morph-focus: 0 0 0 0.25rem rgba(55,141,252,0.25);

    --morph-radius: 1rem;         /* xl */
    --morph-radius-sm: .5rem;
    --morph-radius-lg: 2rem;      /* pillish */
    --morph-ring: 0 0 6px rgba(55,141,252,0.35);
    --morph-muted: #adb6d3;
}

/* ---------- Base ---------- */
html, body {
    background: var(--morph-body-bg);
    color: var(--morph-body-fg);
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#UICenter{
    background: var(--morph-body-bg);
}

h1, h2, h3, h4, h5, h6 { color: var(--morph-heading); }
a, a:link, a:visited { color: var(--morph-link); text-decoration: underline; }
a:hover { color: var(--morph-link-hover); }
a:active { opacity: .8; }

/* Readonly inputs flatten like Morph */
input[readonly] {
    color: var(--morph-heading);
    border: none;
    box-shadow: none;
}

/* ---------- Header ---------- */
#Header {
    background: var(--morph-surface-2);
    border: 0;
    transform: translate3d(0,0,0);
    box-shadow: var(--morph-shadow-sm);
}
#Header li a { color: var(--morph-heading)!important; opacity: 1!important; }
#Header a:hover, #Header .current { opacity: 1; text-decoration: none; }
#HiddenLinks li a { color: #fff; opacity: .85; }
#Header .UploadButton a { color: #fff; }

/* Top text (white-on-dark hero variants kept readable) */
#TextHeader, #TextHeader a, #TextDesc { color: #fff; }

/* ---------- Notices / validation ---------- */
.FormError, .FormIncorrect { color: var(--morph-danger); }
.FormIncorrect { border: 1px solid #cfd7e6; background: #fff; }
.PageInformal  { border: 1px solid #cfd7e6; background: #fff; }

/* ---------- Panels / cards / resource tiles ---------- */
.RecordPanel, .ResourcePanelSmall, .ResourcePanelLarge, div#Metadata div.Title {
    background: var(--morph-surface);
}
#ResearchBoxPanel, .HomePanelIN, .RecordPanel .RecordDownload, .RecordPanel, .ResourcePanelLarge {
    border-radius: var(--morph-radius);
    overflow: hidden;
}
.ResourcePanel {
    background-color: var(--morph-surface-2);
    border-radius: var(--morph-radius-sm);
    transition: box-shadow .12s ease, transform .12s ease;
    box-shadow: var(--morph-shadow-sm);
    border: 0;
}
.ResourcePanel:hover { box-shadow: var(--morph-shadow); transform: translateY(-1px); z-index: 10; }
.ResourcePanel.Selected { outline: 3px solid var(--morph-primary); }
tr[id^="ResourceShell"].Selected { background-color: #d7e8fe; }

.ResourcePanelInfo { color: var(--morph-body-fg); }
.ResourcePanelInfo a { color: var(--morph-heading); }

.ResourcePanelIcons a.fa-minus-circle { color: var(--morph-danger); }

/* ---------- Search / Home bands ---------- */
#SearchBox, #HomeSiteText.dashtext, .HomePanelIN, .PopupCategoryTree {
    background: rgba(0, 0, 0, 0.40);
    color: #fff;
}
#SearchBoxPanel h2, #ThemeBoxPanel h2, #ResearchBoxPanel h2, .SearchSpace h2 { color: #fff; }

/* ---------- Collection bar ---------- */
.ui-layout-resizer { background: #444; }
.CollectBack { color: #e0e0e0; background: #2b2b2b; }
.CollectBack a, .BrowseBar a, .BrowseBar h2 { color: #e0e0e0; }
.CollectBack a:hover { color: #fff; }
.CollectionPanelShell { background-color: #444; }

/* ---------- Lists / tables ---------- */
.ListviewStyle thead, .ListviewTitleStyle {
    background: #444b40;
    text-transform: uppercase;
}
.ListviewTitleStyle td, .ListviewTitleStyle th, .ListviewTitleStyle a, .ListviewTitleStyle a:visited {
    color: #fff; font-size: .875rem;
}
.ListviewTitleStyle a:hover { color: #e8eef7; text-decoration: none; }
.ListviewStyle { border-collapse: collapse; }
.ListviewStyle tr:nth-child(even):not(.ListviewTitleStyle),
.tableRowEven { background-color: #e4e9ee; }
.tableRowOdd  { background-color: #f8fafd; }
.ListviewStyle tr:hover { background-color: #dde6f2 !important; }

/* ---------- Tabs & info boxes ---------- */
.Tab a { padding: 8px 1rem; background: rgba(255,255,255,.4); }
.TabBar { background-color: #eef3f9; }
#BasicsBoxTabs > .TabBar { background-color: #f2f6fb; }
.StyledTabbedPanel, .InfoTable { background: #fff; border-radius: var(--morph-radius-sm); }
.InfoTable tr+tr>td { border-top: 1px solid #dde6f2; }
.InfoTable td+td { border-left: 1px solid #dde6f2; }
#InfoBoxInner, #InfoBoxCollectionInner, #InfoBoxInner h2, #InfoBoxCollectionInner h2 { color: var(--morph-heading); }

/* ---------- Forms & inputs ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea, select, .sp-replacer {
    background-color: var(--morph-surface);
    border: 1px solid var(--morph-border);
    box-shadow: var(--morph-inset);
    border-radius: var(--morph-radius-sm);
    color: var(--morph-body-fg);
}
input:focus, textarea:focus, select:focus, .RecordPanel .RecordDownloadSpace .DownloadDBlend a:focus {
    outline: 0;
    box-shadow: var(--morph-inset), var(--morph-focus);
}
select, .sp-replacer { box-shadow: var(--morph-shadow-sm); background-color: #fff; }
select:before { color: var(--morph-primary); }
.emailinvalid { background-color: #fcd5d5; }

/* ---------- Buttons & CTAs ---------- */
button, input[type=submit], input[type=button], .RecordPanel .RecordDownloadSpace .DownloadDBlend a, .UploadButton a {
    border: 1px solid transparent;
    color: #fff;
    background-color: var(--morph-primary);
    border-radius: var(--morph-radius-lg);
    box-shadow: var(--morph-shadow-sm);

    /* Morph-like sizing */
    font-size: 1rem;
    padding: .5rem 1rem;       /* bigger, more open */
    line-height: 1.5;
    font-weight: 600;
    transition: all .15s ease-in-out;
}
button:hover, input[type=submit]:hover, input[type=button]:hover,
.uppy-StatusBar-actionBtn:hover, .UploadButton a:hover {
    background-color: var(--morph-primary-600);
}
.RecordPanel .RecordDownloadSpace .DownloadDBlend .MissingFile a {
    border: 1px solid var(--morph-heading);
    background-color: #fff;
    color: var(--morph-heading);
    box-shadow: var(--morph-shadow-sm);
}

/* Uppy buttons (align to primary) */
.uppy-StatusBar-actionBtn, .uppy-Dashboard-browse,
.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload,
.uppy-DashboardContent-back, .uppy-DashboardContent-addMore {
    background-color: var(--morph-primary);
    color: #fff;
}

/* ---------- Alerts / pills / tags ---------- */
span.Pill { color: #fff; background: var(--morph-danger); }

/* ---------- Modal ---------- */
#modal_overlay { background: rgba(0,0,0,.65); }
#modal {
    background-color: #f3f7fc;
    border-radius: var(--morph-radius-sm);
    box-shadow: var(--morph-shadow-lg);
}
#modal .RecordHeader, #modal .BasicsBox h1, #modal .TopInpageNav { background: none; color: var(--morph-muted); }
#modal .RecordHeader h1, #modal .BasicsBox h1 { color: var(--morph-heading); }

/* ---------- Search bar cosmetics ---------- */
#SearchBarTabsContainer { background: rgba(0,0,0,.20); }
.SearchBarTab { color: #fff; }
.SearchBarTab.SearchBarTabSelected { background: rgba(255,255,255, .14); }
.SearchBarTab:hover { background: rgba(255,255,255, .10); }

/* ---------- Misc RS elements (kept, re-tinted) ---------- */
.highlight { color: #000; background-color: #fff3cd; } /* Morph highlight */
.FormHelpInner { background: #fff; border: 1px solid var(--morph-primary); border-radius: .5rem; }
.NewFlag { background-color: #fff; color: var(--morph-muted); text-shadow: none; }
.MultiRTypeSelect { background: #fff; border: 1px solid var(--morph-border); }
.TaggingHint { background: #fff; border: 1px solid var(--morph-border); }
.TaggingHint:hover { background: #eef3f9; color: var(--morph-heading); }

/* Breadcrumbs */
.SearchBreadcrumbs > span { color: var(--morph-body-fg); }
.BreadcrumbsBox a { color: #4a567d; }

/* Featured tiles / Home */
.FeaturedSimpleTile { background: rgba(30, 30, 30, 0.65); color: #fff; }
.FeaturedSimpleTile .FeaturedSimpleTileContents h2 { background: rgba(0,0,0,.4); text-shadow: 0 1px 5px #000; }
.FeaturedSimpleTileImage img.TileGroupImageBase { box-shadow: 0 0 25px rgba(0,0,0,.5); }

/* Image previews */
#preview, #wmpreview, #previewimage, #previewimagecopy, #contact-sheet--previewimage {
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    border-radius: var(--morph-radius-sm);
}

/* Chosen / pickers */
#iconpicker-button {
    background: #fff; border: 1px solid var(--morph-border);
    box-shadow: inset -1px -1px 3px rgba(0,0,0,0.10);
}

/* Trees (jstree dark variant tweaks) */
.jstree-default-dark .jstree-anchor { color: #5c6b99; }
.jstree-default-dark .jstree-hovered { background: #8fa3d3; color: #fff; }
.jstree-default-dark .jstree-wholerow-clicked { background: #6e84bd; }

/* Delete / dialog buttons */
.ui-dialog { box-shadow: var(--morph-shadow-lg); border: 1px solid #e7e7e7; }
.ui-dialog .ui-dialog-title { background: #fff; }
.ui-dialog .ui-dialog-buttonpane button {
    background-color: var(--morph-primary);
    color: #fff; border-radius: var(--morph-radius-lg);
}

/* Download area */
.RecordPanel .RecordDownloadSpace { background: #fff; }
.RecordPanel .RecordDownloadSpace .DownloadDBlend { background: #fff; border-color: #c6cfe0; }
.RecordPanel .RecordDownloadSpace .DownloadDBlend p { color: #6c79a4; }

/* Keywords / selected */
input:checked + .customFieldLabel, .keywordselected {
    background-color: var(--morph-primary);
    color: #fff;
}
.keywordselected a { color: #fff; }

/* Buttons inside tools panel kept flat on white */
.RecordPanel .RecordDownloadSpace .DownloadDBlend .AltThumbLink,
.RecordPanel .RecordDownloadSpace .DownloadDBlend .AltThumbLink:hover,
.RecordPanel .RecordDownloadSpace .DownloadDBlend .AltThumbLink:active {
    background: #fff; box-shadow: none;
}

/* Search icon chip */
.search-icon, .search-icon:hover, .search-icon:active {
    color: #2a7de1;
    background-color: #e4ebf5;
    border-radius: 999px;
}

/* Sticky bars */
.QuestionSubmit.QuestionSticky {
    background-color: #eef3f9;
    border-top: 1px solid #cad6ea;
    box-shadow: 0 -12px 15px -12px #bfcce3;
}
.BasicsBox.SearchSticky {
    background-color: #eef3f9;
    border-bottom: 1px solid #cad6ea;
    box-shadow: 0 12px 10px -12px #bfcce3;
}
.Question.QuestionStickyRight {
    background-color: #eef3f9;
    border-left: 1px solid #cad6ea;
    box-shadow: -12px 0 15px -12px #bfcce3;
}

/* Scrollbar */
::-webkit-scrollbar:vertical { width: 12px; }
::-webkit-scrollbar:horizontal { height: 12px; }
::-webkit-scrollbar, ::-webkit-scrollbar-corner { background: none; }
::-webkit-scrollbar-thumb {
    background: rgba(55, 94, 148, .30);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(55, 94, 148, .35); }
::-webkit-scrollbar-thumb:active { background: rgba(55, 94, 148, .40); }

/* Misc accents retained but re-hued */
.CommentFlagged i { color: #ef7c7d; }    /* Morph danger-300 */
.ClearSelectedButton { background-color: #e94444; }
.ClearSelectedButton:hover { background-color: #b71c1c; }

/* Drag targets */
#trash_bin.ui-state-active, .ui-state-active { border: 1px solid #d0d0d0; background: rgba(229, 37, 39, 0.20); }
#dash_tile_bin.ui-state-hover { background: rgba(0,0,0,0.55); color:#d7d7d7; }

/* Keep plugin tiles fresh */
.PluginDisplay { background: #fff; box-shadow: var(--morph-shadow-sm); border: 0; }
.PluginDisplay .Pill { background-color: var(--morph-primary); }
.tickbox:not(:checked) + label { opacity: .55; }

/* Form caps warning */
.Question #capswarning { color: var(--morph-danger); }

/* Search results count emphasis */
#SearchResultFound .Selected { font-weight: 700; }

/* Login */
#login_box {
    background: #235787;
    color: #fff;
    box-shadow: 0 1px 10px rgba(0,0,0,.25);
}
#login_box textarea { background: #9a9a9ad9; color: #fff; }
#login_box .FormError {
    color: #fff; background-color: #ff000030; border: 2px solid var(--morph-danger);
}

/* Focus ring harmonisation across clickable RS items */
:focus-visible { outline: none; box-shadow: var(--morph-ring); border-radius: .35rem; }

/* =========================
   Morph checkbox polish
   ========================= */
/* --- Advanced search resource-type pills (CSS-only) --- */

/* reset: make sure boxes are visible (override earlier rule) */
#advancedform .Question input.SearchTypeCheckbox {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    inline-size: auto;
    block-size: auto;
}

/* nicer, bigger checkboxes */
#advancedform .Question input.SearchTypeCheckbox {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--morph-primary);
    border-radius: .35rem;
    vertical-align: -2px;
}

/* treat the pair of TDs as one “pill” */
#advancedform .Question td:has(> input.SearchTypeCheckbox) {
    padding: .6rem .6rem .6rem .9rem;                  /* left half */
    background: var(--morph-surface);
    border: 1px solid var(--morph-border);
    border-right: 0;
    border-radius: var(--morph-radius-lg) 0 0 var(--morph-radius-lg);
    box-shadow: var(--morph-shadow-sm);
}

#advancedform .Question td:has(> input.SearchTypeCheckbox) + td {
    padding: .6rem 1.1rem;                              /* right half (label) */
    background: var(--morph-surface);
    border: 1px solid var(--morph-border);
    border-left: 0;
    border-radius: 0 var(--morph-radius-lg) var(--morph-radius-lg) 0;
    box-shadow: var(--morph-shadow-sm);
    color: var(--morph-heading);
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
}

/* hover */
#advancedform .Question td:has(> input.SearchTypeCheckbox) + td:hover {
    background: #eef3f9;
}

/* focus ring when the input receives focus */
#advancedform .Question td:has(> input.SearchTypeCheckbox:focus-visible),
#advancedform .Question td:has(> input.SearchTypeCheckbox:focus-visible) + td {
    box-shadow: var(--morph-shadow), var(--morph-focus);
}

/* checked state paints both halves */
#advancedform .Question td:has(> input.SearchTypeCheckbox:checked),
#advancedform .Question td:has(> input.SearchTypeCheckbox:checked) + td {
    background: var(--morph-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--morph-shadow);
}

/* disabled */
#advancedform .Question td:has(> input.SearchTypeCheckbox:disabled),
#advancedform .Question td:has(> input.SearchTypeCheckbox:disabled) + td {
    opacity: .55;
    cursor: not-allowed;
}

/* optional: center the whole row like your screenshot */
#advancedform .Question > table tr { text-align: center; }


/* ===== Morph-style forms ===== */

/* text inputs, selects, textareas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    font-size: 1rem;                  /* up from ~0.85rem */
    padding: .55rem .9rem;            /* Morph spacing */
    border-radius: .65rem;
    border: 1px solid var(--morph-border);
    background: #fff;
    color: var(--morph-heading);
    box-shadow: var(--morph-inset);
    line-height: 1.5;
}

/* hover + focus */
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
    border-color: var(--morph-primary);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--morph-primary);
    box-shadow: 0 0 0 0.25rem rgba(55,141,252,.25);
}

/* checkboxes + radios */
input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--morph-primary);
    border-radius: .35rem;
}

/* labels for spacing */
label {
    font-size: 1rem;
    color: var(--morph-heading);
}

/* buttons inside forms */
button,
input[type=submit],
input[type=button] {
    font-size: 1rem;
    padding: .55rem 1.2rem;
    border-radius: var(--morph-radius-lg);
}

/* ===== Morph-style dropdowns (native <select> + Chosen) ===== */

/* 1) Native <select> — bigger, clean caret, proper focus */
select {
    font-size: 1rem;
    line-height: 1.5;
    min-height: 44px;                 /* comfortable touch target */
    padding: .55rem 2.2rem .55rem .9rem; /* room for caret on the right */
    border-radius: .65rem;
    border: 1px solid var(--morph-border);
    background: #fff;
    color: var(--morph-heading);
    box-shadow: 0 1px 2px rgba(28,51,106,.08);  /* no inset glow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* caret (SVG), high-contrast but subtle */
    background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23485785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
}

select:hover {
    border-color: var(--morph-primary);
}

select:focus {
    outline: none;
    border-color: var(--morph-primary);
    box-shadow:
            0 1px 2px rgba(28,51,106,.08),
            0 0 0 .25rem rgba(55,141,252,.25);        /* Morph focus ring */
}

/* remove macOS inner focus ring in WebKit */
select:focus-visible { outline: none; }

/* 2) Tight rows like “From date / To date”: space the small selects nicely */
#advancedform .Question select { margin-right: .5rem; }
#advancedform .Question select:last-child { margin-right: 0; }

/* 3) Chosen (if enabled) — match size/feel to native selects */
.chosen-container-single .chosen-single {
    height: 44px;
    line-height: 44px;
    padding: 0 2.2rem 0 .9rem;
    border-radius: .65rem;
    border: 1px solid var(--morph-border);
    box-shadow: 0 1px 2px rgba(28,51,106,.08);
    background: #fff;
    color: var(--morph-heading);
}
.chosen-container-single .chosen-single div {  /* caret area */
    right: .5rem;
    width: 1rem;
}
.chosen-container .chosen-drop {
    border: 1px solid var(--morph-border);
    border-radius: .65rem;
    box-shadow: 0 10px 30px rgba(28,51,106,.12);
}
.chosen-container .chosen-results li.highlighted {
    background: var(--morph-primary);
    color: #fff;
}
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
    border-color: var(--morph-primary);
    box-shadow: 0 0 0 .25rem rgba(55,141,252,.25);
}

/* 4) Compact variant for very narrow columns (optional) */
.select--sm { min-height: 38px; padding: .4rem 2rem .4rem .7rem; }


/* ===== Archive state table: make each row clickable without JS ===== */
/* ===== Archive state table — show a visible checkbox box ===== */

/* Row is clickable via the invisible input overlay (kept) */
table:has(input[name="archive[]"]) tr { position: relative; }

/* Make room for the visual box */
table:has(input[name="archive[]"]) td:has(> input[name="archive[]"]) {
    padding: .6rem .6rem .6rem 2.8rem;  /* extra left space */
}

/* Draw the visual checkbox in the left half */
table:has(input[name="archive[]"]) td:has(> input[name="archive[]"])::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .35rem;
    background: #fff;
    border: 1.5px solid #cfd7e6;
    box-shadow: 0 1px 2px rgba(28,51,106,.12);
    z-index: 2;
}

/* Tick mark */
table:has(input[name="archive[]"]) tr:has(input[name="archive[]"]:checked) td:has(> input[name="archive[]"])::after {
    content: "✓";
    position: absolute;
    left: 1.18rem;
    top: 50%;
    transform: translateY(-55%);
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    z-index: 2;
}

/* Checked state colors for the visual box */
table:has(input[name="archive[]"]) tr:has(input[name="archive[]"]:checked) td:has(> input[name="archive[]"])::before {
    background: var(--morph-primary);
    border-color: var(--morph-primary);
    box-shadow: none;
}

/* Keep the invisible full-row input overlay so the whole pill toggles */
table:has(input[name="archive[]"]) tr td:first-child input[name="archive[]"] {
    position: absolute;
    inset: 0;            /* cover the row */
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 3;
}

/* Pill visuals (from previous step) still apply — checked/hover/focus */
table:has(input[name="archive[]"]) tr:hover td { background: #eef3f9; }
table:has(input[name="archive[]"]) tr:has(input[name="archive[]"]:focus-visible) td {
    box-shadow: var(--morph-shadow), var(--morph-focus);
}
table:has(input[name="archive[]"]) tr:has(input[name="archive[]"]:checked) td {
    background: var(--morph-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--morph-shadow);
}

/* End — Morph skin */