/* Public content pages use the same width, entry spacing and surfaces. */
:root { --content-page-top: calc(var(--public-nav-height, 64px) + 40px); }
.ui-directory-page > .content-section {
    padding: var(--content-page-top) var(--ui-gutter) 72px !important;
}
.ui-files-page .section-shell { padding: 0; }
.blog-index-page .blog-page { padding-top: var(--content-page-top); }
.messages-page .messages-main { margin-top: var(--content-page-top); }
.ui-directory-page :is(.tool-name, .link-name, .tree-name) {
    color: var(--ui-ink);
    font-weight: 600;
}
.ui-directory-page :is(.tool-description, .link-desc, .tree-description) {
    color: var(--ui-muted);
    font-weight: 400;
}

/* Tools and friends share a simple grid of fully clickable entries. */
.ui-tools-page .tool-directory, .ui-links-page .links-grid {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
}
.ui-tools-page :is(.tools-grid, .loading-grid), .ui-links-page .links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px;
    list-style: none;
}
.ui-tools-page .tool-item { border: 0; }
.ui-tools-page .tool-entry, .ui-tools-page .tool-item:nth-child(even) .tool-entry,
.ui-links-page .link-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 12px;
    align-items: start;
    gap: 18px;
    min-height: 148px !important;
    padding: 26px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px;
    color: var(--ui-ink);
    background: var(--ui-surface) !important;
    box-shadow: 0 2px 8px rgb(32 57 88 / 3%);
    text-decoration: none;
    animation: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.ui-tools-page .tool-entry:hover, .ui-links-page .link-card:hover {
    border-color: #a9bfdc !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 4px 16px rgb(32 57 88 / 7%);
}
.ui-tools-page .tool-entry::before, .ui-links-page .link-card::before,
.ui-links-page .link-card::after { content: none; }
.ui-tools-page .tool-thumbnail, .ui-links-page .link-avatar {
    width: 52px;
    height: 52px;
    margin: 0;
    border: 1px solid #e3eaf3 !important;
    border-radius: 10px !important;
    color: var(--ui-accent);
    background: var(--ui-tint) !important;
    font-family: var(--ui-font);
    font-size: 20px;
    font-weight: 600;
    transform: none !important;
}
.ui-tools-page .tool-thumbnail img, .ui-links-page .link-avatar img {
    opacity: 0;
    background: var(--ui-surface);
    border-radius: 9px !important;
    filter: none;
    transform: none !important;
}
.ui-tools-page .tool-thumbnail img.is-loaded, .ui-links-page .link-avatar img.is-loaded { opacity: 1; }
.ui-tools-page .tool-thumbnail-placeholder {
    border: 0 !important;
    border-radius: 0 !important;
}
.ui-tools-page .tool-title-row { margin: 1px 0 8px; }
.ui-tools-page .tool-name, .ui-links-page .link-name {
    display: block;
    overflow: visible;
    font-size: 17px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-tools-page .tool-description, .ui-links-page .link-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
}
.ui-tools-page .tool-domain {
    display: block;
    margin-top: 12px;
    color: #708099;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}
.ui-tools-page .tool-arrow, .ui-links-page .link-visit {
    display: block;
    width: 12px;
    height: 12px;
    margin-top: 8px;
    color: #8294ac;
    font-size: 0;
    opacity: 1;
    transform: none;
}
.ui-tools-page .tool-arrow::after, .ui-links-page .link-visit::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.ui-tools-page .loading-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    min-height: 148px !important;
    padding: 26px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px;
    background: var(--ui-surface);
}
.ui-tools-page .skeleton-index { display: none; }
.ui-tools-page .skeleton-thumb { width: 52px; height: 52px; }
.ui-directory-page :is(.skeleton-thumb, .skeleton-line) { background: #edf1f6; }
.ui-tools-page .directory-state, .ui-links-page .state-panel {
    padding: 40px 26px;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    background: var(--ui-surface) !important;
}
.ui-links-page .links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px; }
.ui-links-page .directory-section { padding: 0 0 28px; }
.ui-links-page .link-card { min-height: 136px !important; padding: 22px !important; gap: 14px; }
.ui-links-page .link-name { font-size: 16px; margin: 0 0 6px; }
.ui-links-page .link-desc { font-size: 13px; }
.ui-links-page .link-visit { overflow: visible; }

/* The exchange details form one quiet section below the directory. */
.ui-links-page .exchange-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    padding: 28px;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    background: var(--ui-surface) !important;
}
.ui-links-page .exchange-section h2 { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.ui-links-page .exchange-copy { max-width: none; margin-top: 12px; font-size: 14px; line-height: 1.9; }
.ui-links-page .exchange-actions { margin-top: 22px; gap: 12px; }
.ui-links-page .copy-status { min-height: 0; }
.ui-links-page .copy-status:empty { display: none; }
.ui-links-page .site-details {
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
}
.ui-links-page .site-detail-row { grid-template-columns: 42px minmax(0, 1fr); padding: 12px 0; gap: 16px; }
.ui-links-page .site-detail-row:first-child { padding-top: 0; }
.ui-links-page .site-detail-row:last-child { padding-bottom: 0; border-bottom: 0; }
.ui-links-page .site-detail-row :is(dt, dd) { font-size: 13px; letter-spacing: 0; line-height: 1.7; }
.ui-links-page .link-modal-content {
    border-radius: 12px !important;
    color: var(--ui-ink);
    background: var(--ui-surface) !important;
}
.ui-links-page .link-modal-content h2 { font-size: 24px; font-weight: 600; letter-spacing: 0; }
.ui-links-page .modal-intro { font-size: 14px; }
.ui-links-page .form-group label { font-size: 13px; }
.ui-links-page .form-group small { font-size: 12px; }
.ui-links-page .form-group :is(input, textarea)::placeholder { color: #7b889a; }
.ui-links-page .form-actions button { border-radius: 8px; min-height: 44px; }

/* File rows use readable metadata, soft icons and a full-width name target. */
.ui-files-page #filesContainer { border-radius: 10px !important; box-shadow: 0 2px 8px rgb(32 57 88 / 3%); }
.ui-files-page :is(.tree-table-header, .tree-row) {
    grid-template-columns: minmax(0, 1fr) 90px 90px 80px;
    gap: 24px;
    padding-inline: 26px;
}
.ui-files-page .tree-table-header { min-height: 52px; padding-block: 16px; color: var(--ui-muted); font: 12px/1.5 var(--ui-font); letter-spacing: 0; }
.ui-files-page .tree-row { min-height: 78px; padding-block: 17px; }
.ui-files-page .tree-row:hover, .ui-files-page .tree-row:focus-within { background: #f8faff; }
.ui-files-page .tree-link { flex: 1; min-height: 42px; }
.ui-files-page .tree-chevron { width: 7px; height: 7px; margin-right: 16px; }
.ui-files-page .tree-symbol {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 14px 0 0;
    border: 0;
    border-radius: 8px;
    color: var(--ui-accent);
    background: var(--ui-tint);
}
.ui-files-page .tree-symbol::before {
    content: "";
    position: static;
    display: block;
    width: 21px;
    height: 21px;
    border: 0;
    background: currentColor;
    -webkit-mask: url('/static/images/ui-icons/files.svg') center / contain no-repeat;
    mask: url('/static/images/ui-icons/files.svg') center / contain no-repeat;
}
.ui-files-page .tree-symbol.file::before {
    -webkit-mask-image: url('/static/images/ui-icons/blog.svg');
    mask-image: url('/static/images/ui-icons/blog.svg');
}
.ui-files-page .tree-symbol.file::after, .ui-files-page .tree-link.folder .tree-name::after { content: none; }
.ui-files-page .tree-copy { gap: 5px; }
.ui-files-page .tree-name { font-size: 15px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.ui-files-page .tree-description { font-size: 12px; line-height: 1.6; }
.ui-files-page .tree-description:empty { display: none; }
.ui-files-page :is(.tree-kind, .tree-size, .tree-downloads) { color: var(--ui-muted); font: 12px/1.5 var(--ui-font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ui-files-page .tree-state-row { padding: 14px 26px 14px calc(99px + var(--tree-depth, 1) * 1.35rem); color: var(--ui-muted); background: #fafbfd; font-size: 13px; }
.ui-files-page :is(.loading-index, .index-state) { margin-top: 0; }
.ui-files-page .skeleton-row { padding-inline: 26px; }

@media (max-width: 1000px) {
    .ui-links-page .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
    :root { --content-page-top: calc(var(--public-nav-height, 64px) + 24px); }
    .ui-directory-page > .content-section { padding-bottom: 48px !important; }
    .ui-tools-page :is(.tools-grid, .loading-grid), .ui-links-page .links-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
    .ui-tools-page .tool-entry, .ui-tools-page .tool-item:nth-child(even) .tool-entry,
    .ui-links-page .link-card { min-height: 128px !important; padding: 22px !important; gap: 14px; }
    .ui-tools-page .tool-name { font-size: 16px; }
    .ui-links-page .exchange-section { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px; }
    .ui-links-page .exchange-actions button { padding-inline: 14px; }
    .ui-files-page .tree-table-header { display: none; }
    .ui-files-page .tree-row { grid-template-columns: minmax(0, 1fr); padding: 14px 18px; min-height: 80px; }
    .ui-files-page :is(.tree-kind, .tree-size, .tree-downloads) { display: none; }
    .ui-files-page .tree-mobile-meta { display: block; color: var(--ui-muted); font: 11px/1.6 var(--ui-font); letter-spacing: 0; white-space: normal; }
    .ui-files-page .tree-chevron { margin-right: 12px; }
    .ui-files-page .tree-symbol { margin-right: 12px; }
    .ui-files-page .tree-indent { flex-basis: calc(var(--tree-depth, 0) * .9rem); }
    .ui-files-page .tree-state-row { padding-left: calc(78px + var(--tree-depth, 1) * .9rem); }
    .ui-files-page .tree-name { font-size: 14px; }
    .ui-files-page .skeleton-row { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-directory-page :is(.tool-entry, .link-card) { transition: none; }
}