/*
 * Vishow Tools stylesheet: Shared public utility workspaces, tool controls, CMS-authored content, and responsive behavior.
 * Sections are intentionally kept unminified and human-readable for direct maintenance.
 */

:root {
    --field: #f8fafc;
}

textarea, select {
    font: inherit;
}

textarea:focus-visible, select:focus-visible {
    outline: 3px solid #93b4fb;
    outline-offset: 3px;
}

.toolindex {
    padding-top: 55px;
}

.toolindex .cards {
    margin-top: 0;
}

.toolindex .card h2 {
    margin: 22px 0 9px;
    font-size: 17px;
    letter-spacing: 0;
}

.sectionlink {
    margin-top: 30px;
    text-align: right;
}

.sectionlink a, .related a {
    color: var(--blue);
    font-weight: 700;
}

.inputaction {
    display: flex;
    gap: 12px;
}

.inputaction input, .formgrid input, .formgrid select {
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cfd9e7;
    border-radius: 9px;
    background: var(--field);
}

.inputaction input {
    flex: 1;
}

.inputaction .button {
    flex: 0 0 auto;
}

.resultgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
}

.resultgrid>div {
    min-width: 0;
    padding: 15px 17px;
    border-bottom: 1px solid var(--line);
    background: var(--field);
}

.resultgrid>div:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.resultgrid>div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.resultgrid>div:last-child:nth-child(odd) {
    border-bottom: 0;
}

.resultgrid span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.resultgrid code {
    display: block;
    overflow-wrap: anywhere;
    color: #172554;
    font: 13px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.workspace textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #cfd9e7;
    border-radius: 9px;
    background: var(--field);
    resize: vertical;
}

.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.divider:before, .divider:after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.filepick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px dashed #aebed2;
    border-radius: 9px;
    background: var(--field);
    cursor: pointer;
}

.filepick strong {
    color: var(--blue);
    font-size: 13px;
}

.filepick span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.hashresults {
    display: grid;
    gap: 17px;
    margin-top: 20px;
}

.hashresults>div>span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.hashresults .output input {
    font-size: 11px;
}

.formgrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}

.formgrid input, .formgrid select {
    width: 100%;
}

.buttonrow {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.timestampresults code {
    font-size: 11px;
}

.related {
    margin-top: 50px;
    padding: 25px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.related h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.related p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.cms-content {
    margin-top: clamp(2rem, 5vw, 4rem);
    font-size: 1.03rem;
    line-height: 1.75;
}

.cms-content h2, .cms-content h3 {
    margin: 1.8em 0 .55em;
    color: var(--ink);
}

.cms-content p, .cms-content li {
    max-width: 74ch;
}

.cms-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 10px;
}

.cms-content pre {
    max-width: 100%;
    overflow: auto;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    background: #15221e;
    color: #edf7f3;
}

.cms-content code {
    overflow-wrap: anywhere;
}

.cms-content blockquote {
    margin: 1.5rem 0;
    padding: .2rem 1.2rem;
    border-left: 4px solid var(--blue);
    color: #52615c;
}

.cms-content table {
    width: 100%;
    border-collapse: collapse;
}

.cms-content th, .cms-content td {
    padding: .65rem;
    border: 1px solid #dbe3df;
    text-align: left;
}

.blocked-image {
    display: block;
    padding: 1rem;
    background: #f4f5f4;
    color: #68736f;
}

.content-cards {
    margin-top: 2rem;
}

@media (max-width:640px) {
    .inputaction, .buttonrow {
        flex-direction: column;
    }

    .inputaction .button, .buttonrow .button {
        width: 100%;
    }

    .resultgrid, .formgrid {
        grid-template-columns: 1fr;
    }

    .resultgrid>div, .resultgrid>div: nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .resultgrid>div: nth-last-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .resultgrid>div: last-child {
        border-bottom: 0;
    }

    .filepick {
        align-items: flex-start;
        flex-direction: column;
    }

    .hashresults .output {
        align-items: stretch;
        flex-direction: column;
        padding: 9px;
    }

    .hashresults .output input {
        min-height: 48px;
    }

    .hashresults .output button {
        margin: 0;
    }
}

/* CMS articles use a compact, continuous reading surface. */

.article-page, .article-header, .article-body {
    background: #fff;
}

.article-header {
    position: relative;
    padding: 28px 0 22px;
    border-bottom: 1px solid var(--line);
}

.article-text {
    width: min(800px, calc(100% - 40px));
    margin-inline: auto;
}

.article-header .crumb {
    margin-bottom: 14px;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.article-meta .eyebrow {
    margin: 0;
}

.article-meta small {
    color: var(--muted);
    font-size: 11px;
}

.article-header h1 {
    margin: 10px 0 9px;
    font-size: clamp(34px, 4.3vw, 48px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.article-header p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.58;
}

.article-body {
    padding: 24px 0 88px;
}

.article-content {
    margin-top: 0;
}

.article-content>:first-child {
    margin-top: 0;
}

.article-content img {
    position: relative;
    left: 50%;
    display: block;
    width: auto;
    max-width: min(1100px, calc(100vw - 48px));
    height: auto;
    margin: 1.5rem 0;
    transform: translateX(-50%);
    border-radius: 10px;
}

.article-content .blocked-image {
    margin: 1.25rem 0;
}

.article-content p, .article-content li {
    max-width: none;
}

.preview-image-error {
    display: block;
    margin: 1rem 0;
    padding: 14px 16px;
    border: 1px dashed #c9d2ce;
    border-radius: 7px;
    background: #f5f7f6;
    color: #68736f;
    font-size: .9rem;
}

@media (max-width:640px) {
    .article-header {
        padding: 20px 0 17px;
    }

    .article-text {
        width: min(100% - 28px, 800px);
    }

    .article-header .crumb {
        margin-bottom: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .article-header h1 {
        font-size: 34px;
    }

    .article-body {
        padding: 18px 0 64px;
    }

    .article-content img {
        max-width: calc(100vw - 28px);
        margin-top: 1.1rem;
        margin-bottom: 1.1rem;
    }
}

.article-content img.media-size-small {
    width: min(320px, calc(100vw - 48px));
}

.article-content img.media-size-medium {
    width: min(560px, calc(100vw - 48px));
}

.article-content img.media-size-content {
    width: min(800px, calc(100vw - 48px));
}

.article-content img.media-size-wide {
    width: min(1100px, calc(100vw - 48px));
}

.image-text-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin: 1.5rem 0;
}

.article-content .image-text-block img, .markdown-preview .image-text-block img {
    position: static;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: none;
    border-radius: 10px;
}

.image-text-copy>:first-child {
    margin-top: 0;
}

.image-text-copy>:last-child {
    margin-bottom: 0;
}

.guide-hero {
    padding: 30px 0 28px;
    border-bottom: 1px solid #d7e0eb;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.guide-hero .crumb {
    margin-bottom: 16px;
}

.guide-hero h1 {
    font-size: clamp(38px, 4.2vw, 54px);
}

.guide-hero p {
    margin-bottom: 0;
}

.guide-hero+.guideindex {
    padding-top: 24px;
}

@media (max-width:640px) {
    .image-text-block {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .guide-hero {
        padding: 22px 0 22px;
    }

    .guide-hero .crumb {
        margin-bottom: 16px;
    }

    .guide-hero+.guideindex {
        padding-top: 24px;
    }
}

/* --------------------------------------------------------------------------
   Alpha14: compact first-viewport layout for every public utility page
   --------------------------------------------------------------------------
   Purpose:
   - Put the utility itself in the visitor's first desktop viewport.
   - Keep the existing page text, controls, and behavior unchanged.
   - Set the tool-page heading size once in CSS for all seven utilities.
   - Leave Guides, articles, legal pages, and administrator screens untouched.

   Future adjustment:
   - Change .tool-pagehead h1 to alter every tool-page heading consistently.
   - Change .tool-pagehead / .tool-pagebody padding to tune vertical density.
   - Workspace rules below only affect public utility pages because every rule
     is scoped beneath .tool-pagebody.
   -------------------------------------------------------------------------- */

.tool-pagehead {
    padding: 16px 0 13px;
}

.tool-pagehead .crumb {
    margin-bottom: 7px;
}

.tool-pagehead .eyebrow {
    margin-bottom: 5px;
    font-size: 9px;
}

/* Global tool-page heading size: intentionally not configurable in the CMS. */

.tool-pagehead h1 {
    font-size: clamp(28px, 2.7vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.tool-pagehead .narrow > p, .tool-pagehead .shell > p {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.tool-pagebody {
    padding: 14px 0 68px;
}

/* Keep the existing privacy/security notice, but stop it behaving like a hero. */

.tool-pagebody .notice {
    gap: 10px;
    margin-bottom: 11px;
    padding: 9px 13px;
    border-radius: 9px;
}

.tool-pagebody .notice strong {
    font-size: 12px;
}

.tool-pagebody .notice p {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.45;
}

/* The utility card is the primary visual object on a tool page. */

.tool-pagebody .workspace {
    padding: 19px;
    border-radius: 13px;
    box-shadow: 0 12px 32px #0f172114;
}

.tool-pagebody .button {
    min-height: 42px;
}

.tool-pagebody .output {
    min-height: 50px;
}

.tool-pagebody .meter {
    margin: 8px 0 17px;
}

.tool-pagebody .options {
    gap: 9px 18px;
    margin: 17px 0 11px;
}

.tool-pagebody .solo {
    padding: 9px 0 13px;
}

.tool-pagebody .error {
    min-height: 16px;
    margin: 6px 0;
}

.tool-pagebody .help {
    margin-top: 7px;
    margin-bottom: 7px;
    line-height: 1.45;
}

.tool-pagebody .totp {
    margin: 17px 0 13px;
    padding: 18px;
}

.tool-pagebody .totp strong {
    margin: 10px 0;
    font-size: 30px;
}

.tool-pagebody .inputaction input, .tool-pagebody .formgrid input, .tool-pagebody .formgrid select {
    min-height: 42px;
}

.tool-pagebody .formgrid {
    gap: 10px;
}

.tool-pagebody .buttonrow {
    margin-top: 11px;
}

.tool-pagebody .divider {
    margin: 17px 0;
}

.tool-pagebody .filepick {
    padding: 13px 15px;
}

.tool-pagebody .resultgrid {
    margin-top: 13px;
}

.tool-pagebody .resultgrid > div {
    padding: 11px 14px;
}

.tool-pagebody .hashresults {
    gap: 11px;
    margin-top: 15px;
}

/* Secondary explanation begins after the utility rather than competing with it. */

.tool-pagebody .properties, .tool-pagebody .commands {
    margin-top: 38px;
}

.tool-pagebody .related {
    margin-top: 34px;
}

.tool-pagebody .cms-content {
    margin-top: 32px;
}

/* Markdown is naturally taller than the calculators.  A shorter editor canvas
   keeps its complete toolbar/workspace visible on ordinary desktop screens;
   users can still scroll inside the document editor as before. */

.tool-pagebody .markdown-grid {
    min-height: 500px;
}

.tool-pagebody #markdown-source {
    height: 458px;
}

.tool-pagebody .markdown-preview {
    padding-top: 28px;
    padding-bottom: 48px;
}

@media (max-width: 640px) {
    .tool-pagehead {
        padding: 14px 0 12px;
    }

    .tool-pagehead h1 {
        font-size: 28px;
    }

    .tool-pagehead .narrow > p, .tool-pagehead .shell > p {
        font-size: 13px;
    }

    .tool-pagebody {
        padding: 12px 0 56px;
    }

    .tool-pagebody .workspace {
        padding: 16px;
    }

    .tool-pagebody .markdown-grid {
        min-height: 480px;
    }

    .tool-pagebody #markdown-source {
        height: 438px;
    }
}

/* --------------------------------------------------------------------------
   Alpha15: one shared tool-card footprint across every public utility
   --------------------------------------------------------------------------
   Purpose:
   - Use the Password Generator workspace as the visual size reference.
   - Give all seven public utilities the same desktop card width and height.
   - Preserve every existing label, control, result, help message, and action.
   - Keep blue as the primary visual accent; semantic success/error colours
     remain reserved for status feedback rather than page theming.

   Future adjustment:
   - Change the two custom properties below to resize every public tool card.
   - Mobile layouts intentionally return to automatic height so content is not
     clipped on narrow screens.
   -------------------------------------------------------------------------- */

.tool-pagebody {
    --tool-card-width: 760px;
    --tool-card-height: 520px;
}

/* Notices and tool cards align to exactly the same compact content width. */

.tool-pagebody .notice, .tool-pagebody .workspace {
    width: min(var(--tool-card-width), 100%);
    margin-right: auto;
    margin-left: auto;
}

/* Every desktop utility card uses the same outer footprint. */

.tool-pagebody .workspace {
    height: var(--tool-card-height);
    overflow-x: hidden;
    overflow-y: auto;
}

/* Password and TOTP are naturally shorter than the data-heavy calculators.
   A column layout distributes their existing controls cleanly inside the same
   fixed card without adding or removing any content. */

.tool-pagebody .workspace[data-password-tool], .tool-pagebody .workspace[data-totp-tool] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tool-pagebody .workspace[data-password-tool] #generate-password, .tool-pagebody .workspace[data-totp-tool] #copy-totp {
    margin-top: 0;
}

/* Keep calculator/result rows compact enough to fit the shared card while
   retaining all existing values and labels. */

.tool-pagebody .workspace[data-cidr-tool] .resultgrid > div, .tool-pagebody .workspace[data-timestamp-tool] .resultgrid > div {
    padding-top: 9px;
    padding-bottom: 9px;
}

.tool-pagebody .workspace[data-hash-tool] textarea {
    min-height: 104px;
    max-height: 124px;
}

.tool-pagebody .workspace[data-hash-tool] .divider {
    margin-top: 13px;
    margin-bottom: 13px;
}

.tool-pagebody .workspace[data-hash-tool] .filepick {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* What's My IP keeps its existing request-property content inside the same
   visual card so the fixed height is useful rather than empty whitespace. */

.tool-pagebody .workspace.ip-workspace {
    display: flex;
    flex-direction: column;
}

.tool-pagebody .workspace.ip-workspace .properties {
    margin-top: 20px;
}

.tool-pagebody .workspace.ip-workspace .properties h2 {
    margin-bottom: 8px;
    font-size: 18px;
}

.tool-pagebody .workspace.ip-workspace .properties > div {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Markdown shares the same outer dimensions while its existing source and
   preview panes scroll internally, preserving the complete editing workflow. */

.tool-pagebody .markdown-workspace {
    width: min(var(--tool-card-width), 100%);
    height: var(--tool-card-height);
}

.tool-pagebody .markdown-workspace .markdown-grid {
    min-height: 0;
    height: 376px;
}

.tool-pagebody .markdown-workspace #markdown-source {
    height: 334px;
    resize: none;
}

.tool-pagebody .markdown-workspace .preview-pane {
    overflow: auto;
}

@media (max-width: 800px) {
    .tool-pagebody .workspace, .tool-pagebody .markdown-workspace {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .tool-pagebody .markdown-workspace .markdown-grid {
        height: auto;
        min-height: 480px;
    }

    .tool-pagebody .markdown-workspace #markdown-source {
        height: 438px;
        resize: vertical;
    }
}