/* ARK PNT converter — page styles. Sits on top of style.css. */

/* Header. This page doesn't load calculator.css, where .sub-logo img is capped at 38px,
   so the 1024px logo rendered full size. Uses the 64px copy — 1.5MB down to 10KB. */
.pnt-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .85rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
}
.pnt-brand {
    display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
    color: inherit;
}
.pnt-brand img {
    width: 30px; height: 30px; display: block; border-radius: 6px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.pnt-brand-name {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 1.18rem; font-weight: 700; letter-spacing: .16em;
    line-height: 1; text-transform: uppercase;
    background: linear-gradient(90deg, #f0b64a, #d4911e);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pnt-brand-name span {
    color: rgba(255,255,255,.82);
    background: none; -webkit-text-fill-color: rgba(255,255,255,.82);
    margin-left: .18em; font-weight: 500; letter-spacing: .2em;
}
.pnt-brand:hover .pnt-brand-name { filter: brightness(1.12); }
.pnt-nav { display: flex; gap: 1.4rem; align-items: center; font-size: .92rem; }
.pnt-nav a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s; }
.pnt-nav a:hover { color: #d4911e; }
@media (max-width: 460px) {
    .pnt-header { padding: .7rem 1rem; }
    .pnt-nav { gap: 1rem; font-size: .86rem; }
}

.pnt-main { max-width: 1140px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

.pnt-hero { text-align: center; margin: 1rem 0 2.5rem; }
.pnt-hero h1 {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: .5px; margin: 0 0 .6rem; text-wrap: balance;
}
.pnt-sub { max-width: 46rem; margin: 0 auto; opacity: .82; line-height: 1.65; }

.pnt-tool { margin-bottom: 3.5rem; }
.pnt-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; }
@media (max-width: 860px) { .pnt-grid { grid-template-columns: minmax(0,1fr); } }

.pnt-col {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px; padding: 1.4rem;
}
.pnt-h {
    font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; letter-spacing: .06em;
    text-transform: uppercase; margin: 0 0 1rem; opacity: .9;
}

/* drop zone */
.pnt-drop {
    border: 2px dashed rgba(255,255,255,.22); border-radius: 12px;
    padding: 1.8rem 1rem; text-align: center; margin-bottom: 1.3rem;
    transition: border-color .15s, background .15s;
}
.pnt-drop.is-over { border-color: #d4911e; background: rgba(212,145,30,.09); }
.pnt-drop p { margin: .2rem 0; }
.pnt-muted { opacity: .65; font-size: .92rem; }
.pnt-small { font-size: .82rem; opacity: .5; }
.pnt-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #d4911e; font: inherit; text-decoration: underline;
}

/* source image + draggable crop frame */
.pnt-source { margin-bottom: 1.3rem; }
.pnt-source-canvas {
    display: block; width: 100%; height: auto; border-radius: 10px;
    background: rgba(0,0,0,.3); touch-action: none; cursor: move;
}
.pnt-source-bar {
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; flex-wrap: wrap; margin-top: .5rem;
}

/* form controls */
.pnt-field { margin-bottom: 1.15rem; }
.pnt-field label {
    display: block; margin-bottom: .4rem; font-size: .87rem;
    font-weight: 600; letter-spacing: .02em; opacity: .9;
}
.pnt-input {
    width: 100%; padding: .62rem .75rem; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.28); color: inherit; font: inherit;
}
.pnt-input:focus-visible { outline: 2px solid #d4911e; outline-offset: 1px; }
.pnt-range { width: 100%; accent-color: #d4911e; }

/* Preset chooser — plain language instead of a dithering number */
.pnt-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 460px) { .pnt-seg { grid-template-columns: 1fr; } }
.pnt-seg button {
    display: block; text-align: left; cursor: pointer; font: inherit; color: inherit;
    padding: .7rem .8rem; border-radius: 9px;
    border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.24);
    transition: border-color .15s, background .15s;
}
.pnt-seg button strong { display: block; font-size: .92rem; margin-bottom: .12rem; }
.pnt-seg button span { display: block; font-size: .76rem; opacity: .6; line-height: 1.35; }
.pnt-seg button:hover { border-color: rgba(212,145,30,.5); }
.pnt-seg button.is-on {
    border-color: #d4911e; background: rgba(212,145,30,.13);
}
.pnt-seg button.is-on strong { color: #d4911e; }
.pnt-seg button:focus-visible { outline: 2px solid #d4911e; outline-offset: 1px; }

.pnt-adv { margin: -.3rem 0 1.15rem; }
.pnt-adv summary {
    cursor: pointer; font-size: .82rem; opacity: .6; padding: .3rem 0;
    list-style: none;
}
.pnt-adv summary::-webkit-details-marker { display: none; }
.pnt-adv summary::before { content: '▸ '; }
.pnt-adv[open] summary::before { content: '▾ '; }
.pnt-adv summary:hover { opacity: .9; }
.pnt-hint { font-size: .8rem; opacity: .58; margin: .35rem 0 0; line-height: 1.45; }

.pnt-btn {
    display: inline-block; width: 100%; padding: .8rem 1rem; border: 0;
    border-radius: 9px; background: #d4911e; color: #17140e;
    font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.pnt-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pnt-btn:disabled { opacity: .38; cursor: not-allowed; }
.pnt-btn-alt { width: auto; padding: .75rem 1.6rem; text-decoration: none; }

/* preview — checkerboard so unpainted areas read as unpainted */
.pnt-preview-wrap {
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; padding: 1rem; min-height: 300px;
    background-color: rgba(0,0,0,.3);
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%),
        linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
/* Scale the canvas up to fill the panel. It renders at its true 128/256/512 and is
   enlarged with nearest-neighbour, so you see real pixels, just bigger — otherwise a
   256px canvas sits marooned in the middle of a wide panel and looks letterboxed. */
.pnt-canvas {
    width: 100%; max-width: 420px; height: auto;
    image-rendering: pixelated; image-rendering: crisp-edges;
    border-radius: 4px; box-shadow: 0 3px 18px rgba(0,0,0,.45);
}

.pnt-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
    margin-top: 1.1rem; text-align: center;
}
.pnt-stats > div {
    background: rgba(0,0,0,.24); border-radius: 9px; padding: .65rem .4rem;
}
.pnt-stat-n {
    display: block; font-family: 'Rajdhani', sans-serif; font-size: 1.35rem;
    font-weight: 700; font-variant-numeric: tabular-nums; color: #d4911e;
}
.pnt-stat-l {
    display: block; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .07em; opacity: .6; margin-top: .1rem;
}

/* prose */
.pnt-content { max-width: 46rem; margin: 0 auto 3rem; line-height: 1.7; }
.pnt-content h2 {
    font-family: 'Rajdhani', sans-serif; font-size: 1.5rem;
    margin: 2.4rem 0 .7rem; text-wrap: balance;
}
.pnt-content h3 { font-size: 1.03rem; margin: 1.5rem 0 .35rem; }
.pnt-content p { margin: 0 0 .9rem; opacity: .88; }
.pnt-content code {
    background: rgba(0,0,0,.35); padding: .1rem .35rem;
    border-radius: 4px; font-size: .9em;
}
.pnt-path {
    background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: .8rem 1rem; overflow-x: auto;
    font-family: Consolas, monospace; font-size: .9rem;
}
/* copyable command block */
.pnt-copy { position: relative; }
.pnt-copy .pnt-path {
    white-space: pre-wrap; word-break: break-all;
    padding-right: 5rem; font-size: .78rem; line-height: 1.5;
    max-height: 11rem; overflow-y: auto;
}
.pnt-copy-btn {
    position: absolute; top: .6rem; right: .6rem;
    padding: .32rem .8rem; border-radius: 6px; cursor: pointer;
    border: 1px solid rgba(212,145,30,.45); background: rgba(212,145,30,.16);
    color: #e8b45c; font: inherit; font-size: .78rem; font-weight: 600;
}
.pnt-copy-btn:hover { background: rgba(212,145,30,.28); }
.pnt-copy-btn:focus-visible { outline: 2px solid #d4911e; outline-offset: 1px; }

.pnt-table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; }
.pnt-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.pnt-table th {
    text-align: left; padding: .6rem .7rem; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .07em; opacity: .6;
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.pnt-table td { padding: .55rem .7rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.pnt-table tr:last-child td { border-bottom: 0; }

.pnt-cta {
    text-align: center; max-width: 46rem; margin: 0 auto;
    padding: 2rem 1.5rem; border-radius: 14px;
    background: rgba(212,145,30,.08); border: 1px solid rgba(212,145,30,.22);
}
.pnt-cta h2 { font-family: 'Rajdhani', sans-serif; margin: 0 0 .5rem; }
.pnt-cta p { opacity: .85; margin: 0 0 1.2rem; }

/* plank-fix toggle */
.pnt-check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.pnt-check input { margin-top: .25rem; accent-color: #d4911e; flex: none; }
.pnt-check strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.pnt-check em { display: block; font-style: normal; font-size: .78rem; opacity: .6; line-height: 1.45; }