/* Shared building blocks of the photo tools (EXIF viewer, metadata remover, watermark,
   geotag, find location). Tool-specific styles live in assets/css/{page}.css. */

/* ---------- Start screen ---------- */
.tool-start {
    min-height: calc(100vh - 64px); min-height: calc(100svh - 64px);
    display: flex; align-items: center; justify-content: center; padding: 32px 16px 48px;
}
.tool-start[hidden] { display: none; }
.tool-start__inner { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.tool-start__lead { margin: 0; font-size: 1.125rem; line-height: 1.4; color: var(--text-color-secondary); }
.tool-start__cta { width: 100%; }
.tool-start .ts-dropzone.is-over, body.is-dragging-files .tool-start .ts-dropzone { border-color: var(--primary-color); background: var(--primary-container-color); color: var(--on-primary-container-color); }
.tool-start__alt { width: 100%; padding-top: 16px; border-top: 1px solid var(--divider-color); }
.tool-start__alt p { margin: 0 0 10px; font-size: .875rem; color: var(--text-color-secondary); }

.tool-hero {
    position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 28px;
    background: var(--surface-container-color); box-shadow: 0 1px 2px rgba(31,31,31,.08), 0 8px 24px rgba(11,87,208,.1);
}
.tool-hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tool-hero__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; }
.tool-hero__badge {
    position: absolute; left: 14px; top: 14px; width: 48px; height: 48px; display: grid; place-items: center;
    border-radius: 16px; background: rgba(255,255,255,.94); color: #0b57d0; box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.tool-hero__badge .material-symbols-rounded { font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
/* reusable overlay pieces for the illustrations */
.hero-card {
    max-width: 78%; padding: 12px 14px; border-radius: 16px; text-align: start;
    background: rgba(255,255,255,.9); color: #1a1c1e; box-shadow: 0 8px 24px rgba(0,0,0,.2);
    font: 500 .8125rem/1.5 var(--md-ref-typeface-plain); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-card b { font-weight: 700; }
.hero-card .hero-line { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-card .hero-line .material-symbols-rounded { font-size: 18px; color: #0b57d0; }
.hero-card .is-struck { text-decoration: line-through; opacity: .55; }
.hero-pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); color: #e53935; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.hero-pin .material-symbols-rounded { font-size: 64px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

/* ---------- Workspace ---------- */
.tool-work { max-width: 1240px; margin: 0 auto; padding: 16px 16px 48px; }
.tool-work[hidden] { display: none; }
.tool-bar {
    position: sticky; top: 0; z-index: 50; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    margin: 0 -16px 16px; padding: 10px 16px; background: var(--bg-color); border-bottom: 1px solid var(--divider-color);
}
.tool-bar__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-grid { display: grid; gap: 16px; align-items: start; }
/* Two columns from tablet width; on phones one column, in the order the tool is used */
@media (min-width: 760px) {
    .tool-grid--split { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
    .tool-grid--split-wide { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); }
}
@media (min-width: 1100px) {
    .tool-grid--split { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
    .tool-grid--split-wide { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
}
@media (max-width: 759px) {
    .tool-grid--flow > .tool-col { display: contents; }
    .tool-grid--flow .is-last-on-mobile { order: 10; }
}
.tool-col { display: grid; gap: 16px; min-width: 0; }

/* ---------- Cards ---------- */
.tool-card { min-width: 0; border-radius: 24px; background: var(--surface-color); border: 1px solid transparent; }
.tool-card__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.tool-card__head > .material-symbols-rounded { color: var(--primary-color); }
.tool-card__title { flex: 1; min-width: 0; margin: 0; font-size: 1.0625rem; font-weight: 600; }
.tool-card__body { padding: 14px 20px 20px; }
.tool-card__body > :first-child { margin-top: 0; }
.tool-card__body > :last-child { margin-bottom: 0; }
.tool-card--accent { background: var(--primary-container-color); color: var(--on-primary-container-color); border-color: transparent; }
.tool-card--warn { background: #fff4e5; color: #4a2800; border-color: transparent; }
[data-theme="dark"] .tool-card--warn { background: #3a2a12; color: #ffdcb0; border-color: transparent; }
.tool-card--ok { background: #e6f4ea; color: #0d3d1d; border-color: transparent; }
[data-theme="dark"] .tool-card--ok { background: #0f3d1f; color: #c4ecd0; border-color: transparent; }

/* ---------- File list ---------- */
.file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.file-item {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px;
    background: var(--surface-container-low-color); border: 1px solid transparent; text-align: start; color: var(--text-color);
}
button.file-item, .file-item--button { width: 100%; font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
button.file-item:hover, .file-item--button:hover { background: var(--surface-container-color); }
.file-item.is-active { border-color: transparent; background: var(--secondary-container-color); color: var(--on-secondary-container-color); }
.file-item__thumb {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
    background: var(--surface-container-low-color) center / cover no-repeat; color: var(--text-color-secondary);
}
.file-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-item__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.file-item__name { font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item__meta { font-size: .8125rem; color: var(--text-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item.is-active .file-item__meta { color: inherit; opacity: .8; }
.file-item__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.file-item__status { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; }
.file-item__status .material-symbols-rounded { font-size: 18px; }
.file-item__status.is-ok { color: #1e8e3e; }
.file-item__status.is-error { color: var(--error-color); }
[data-theme="dark"] .file-item__status.is-ok { color: #81c995; }

/* ---------- Badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge {
    display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 999px;
    background: var(--surface-container-low-color); color: var(--text-color-secondary); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge .material-symbols-rounded { font-size: 14px; }
.badge--danger { background: #fce8e6; color: #a50e0e; }
.badge--warn { background: #fff4e5; color: #8a4b00; }
.badge--ok { background: #e6f4ea; color: #0d652d; }
.badge--info { background: var(--primary-container-color); color: var(--on-primary-container-color); }
[data-theme="dark"] .badge--danger { background: #5c1a16; color: #f6aea9; }
[data-theme="dark"] .badge--warn { background: #4a3210; color: #ffcf8a; }
[data-theme="dark"] .badge--ok { background: #0f3d1f; color: #a8dab5; }

/* ---------- Key / value lists & metadata tables ---------- */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: .9375rem; }
.kv dt { color: var(--text-color-secondary); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kv-tile { padding: 12px 14px; border-radius: 16px; background: var(--surface-container-low-color); min-width: 0; }
.kv-tile__label { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--text-color-secondary); }
.kv-tile__label .material-symbols-rounded { font-size: 16px; }
.kv-tile__value { margin-top: 2px; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }

.meta-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.meta-search { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface-container-low-color); }
.meta-search:focus-within { outline: 2px solid var(--primary-color); outline-offset: -1px; border-color: transparent; }
.meta-search .material-symbols-rounded { color: var(--text-color-secondary); font-size: 20px; }
.meta-search input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--text-color); font: 400 1rem var(--md-ref-typeface-plain); outline: none; }
.meta-table { width: 100%; border-collapse: collapse; font-size: .875rem; table-layout: fixed; }
.meta-table caption, .meta-group-title {
    caption-side: top; text-align: start; padding: 18px 0 6px; font-size: .9375rem; font-weight: 600; color: var(--text-color);
}
.meta-table th, .meta-table td { padding: 8px; border-bottom: 1px solid var(--divider-color); text-align: start; vertical-align: top; line-height: 1.45; }
.meta-table th { width: 38%; font-weight: 500; color: var(--text-color-secondary); overflow-wrap: anywhere; }
.meta-table td { overflow-wrap: anywhere; white-space: pre-wrap; }
.meta-table tr.is-sensitive th::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 6px; vertical-align: middle; border-radius: 50%; background: #e53935; }
.meta-table code, .meta-code { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: .8125rem; }
.meta-pre { max-height: 420px; overflow: auto; margin: 0; padding: 12px; border-radius: 12px; background: var(--surface-container-low-color); font: 400 .75rem/1.5 'Roboto Mono', ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Preview ---------- */
.photo-preview { position: relative; display: grid; place-items: center; min-height: 200px; max-height: 70vh; overflow: hidden; border-radius: 16px; background: repeating-conic-gradient(var(--surface-container-low-color) 0 25%, var(--surface-color) 0 50%) 0 0 / 20px 20px; }
.photo-preview img, .photo-preview canvas { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.photo-preview img { height: auto; }
.photo-preview__empty { display: grid; place-items: center; gap: 8px; padding: 32px; color: var(--text-color-secondary); text-align: center; font-size: .875rem; }
.photo-preview__empty .material-symbols-rounded { font-size: 40px; }

/* ---------- Misc ---------- */
.tool-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-color-secondary); }
.tool-note .material-symbols-rounded { font-size: 18px; flex: 0 0 auto; }
.tool-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--text-color-secondary); }
.tool-empty .material-symbols-rounded { font-size: 44px; color: var(--outline-color); }
.tool-empty p { margin: 0; max-width: 420px; line-height: 1.5; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-actions--end { justify-content: flex-end; }
/* Material 3 segmented buttons */
.segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--outline-color); border-radius: 999px; }
.segmented button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: var(--text-color); font: 500 .875rem var(--md-ref-typeface-plain); cursor: pointer; }
.segmented button + button { border-inline-start: 1px solid var(--outline-color); }
.segmented button:hover { background: var(--surface-container-low-color); }
.segmented button.is-active, .segmented button[aria-selected="true"], .segmented button[aria-checked="true"] { background: var(--secondary-container-color); color: var(--on-secondary-container-color); }
.external-links { display: flex; flex-wrap: wrap; gap: 8px; }
.external-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--outline-variant-color); color: var(--text-color); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.external-links a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.external-links .material-symbols-rounded { font-size: 16px; }
.tool-map { height: 420px; }
@media (max-width: 600px) { .tool-map { height: 320px; } }

/* Small phones: labels above values, so long values never get squeezed */
@media (max-width: 479px) {
    .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .kv dt { margin-top: 10px; font-size: .8125rem; }
    .kv dt:first-child { margin-top: 0; }
    .kv dd { font-size: 1rem; }
}

/* Touch screens: bigger targets; phones cannot drag & drop files, so the drop box is hidden there */
@media (pointer: coarse) {
    .ts-chip { min-height: 42px; }
    .segmented button { min-height: 40px; }
}
@media (pointer: coarse) and (max-width: 759px) {
    .ts-dropzone { display: none; }
}

@media (max-width: 768px) {
    .tool-work { padding: 12px 12px 40px; }
    /* on phones the bar scrolls away with the page instead of covering half the screen */
    .tool-bar { position: static; margin: 0 -12px 12px; padding: 8px 12px; }
    .tool-bar__actions { width: 100%; }
    .kv { grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); }
}