@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Cormorant+Infant&display=swap');

/*Global*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    font-family: "Cormorant Infant", serif;
    overflow: hidden; /*only one page (input or output) is shown at a time*/
}

.container {
    width: 100%;
    height: 100vh;
}

.pages {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*=======================
   Back Arrow
=======================*/

/*pinned to the corner rather than sitting in the flow, so the card padding
  cannot push the pages below the fold. The glass look comes from the shared
  rule further down; only the pill shape and spacing are set here*/
.back-arrow {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100; /*keeps the back link clickable above both pages*/
    text-decoration: none;
    font-size: 24px;
    color: #176b53;
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 30px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/*colour shift rather than the old opacity fade, which would have washed out
  the card behind the text along with the text itself*/
.back-arrow:hover {
    color: #0d4a39;
    background-color: rgba(136, 162, 160, 0.75);
}

.arrow-icon {
    margin-right: 8px;
}

/*Background*/
#bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /*urls in a css file resolve against the css file, not against index.html.
      this file sits beside the images folder, so images/bg.JPG is correct and
      ../images/bg.JPG would point outside mag-search*/
    background-image: url('images/bg.JPG');
    background-size: cover;
    background-position: center;
    z-index: -1; /*sits behind the glass cardss*/
}

#bg-container::before { /*photo credit overlay*/
    content: "Photo of Murlo. Not by Neala Kelley";
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #d5d8cb;
    z-index: 1;
}

/*Heading, in its own glass card*/
/*left/transform centres a card that is only as wide as its text; the old
  width:100% would have stretched the card across the whole viewport*/
#heading1 {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 40px;
    border-radius: 30px;
    white-space: nowrap; /*keeps the card hugging one line of text*/
    font-size: 48px;
    font-family: "DM Serif Display", serif;
    color: #166b53;
}

/*Glass Card*/
/*the shared glass treatment only. Radius and padding stay with each element
  so a card fits its own contents, and so this rule cannot overwrite the
  spacing set in the sections above it*/
.glass-card,
.back-arrow,
#heading1 {
    background: rgba(213, 216, 203, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/*the full-size cards: input box, history, results*/
.glass-card {
    border-radius: 30px;
    padding: 40px;
}

/*=======================
   Input Page
=======================*/

/*column layout so the history card can sit below the input box and scroll*/
#input {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    padding: 160px 20px 40px; /*top padding clears the heading card and keeps the old gap below it*/
    overflow-y: auto;
}

#inputbox {
    width: 460px;
    text-align: center;
    flex-shrink: 0;
}

.input-subheading {
    font-size: 20px;
    color: #166b53;
    font-family: "DM Serif Display", serif;
    margin-bottom: 20px;
}

/*Toggles*/
.toggle-label {
    font-size: 17px;
    color: #166b53;
    margin: 14px 0 6px;
}

.toggle-group {
    display: inline-flex;
    background-color: rgba(213, 216, 203, 0.8);
    border: 2px solid #166b53;
    border-radius: 30px;
    overflow: hidden;
}

.toggle-group button {
    padding: 8px 16px;
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: #166b53;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.toggle-group button:hover {
    background-color: #b9c4b4;
}

.toggle-group button.active {
    background-color: #166b53;
    color: #d5d8cb;
}

/*Input Fields*/
.input-field {
    margin: 20px 0 8px;
}

.input-field label {
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
    color: #166b53;
}

.input-field input {
    width: 100%;
    height: 40px;
    padding: 10px;
    border-radius: 30px;
    border: 0px;
    background-color: #d5d8cb;
    font-size: 16px;
    text-align: center;
}

/*small line under the input showing accepted formats*/
.input-hint {
    font-size: 14px;
    color: #2b2b2b;
    opacity: 0.75;
    margin-bottom: 6px;
}

/*Submit Button*/
#submit {
    margin-top: 16px;
    padding: 12px 24px;
    font-size: 16px;
    font-family: "DM Serif Display", serif;
    color: #166b53;
    background-color: #d5d8cb;
    border: 2px solid #166b53;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#submit:hover {
    background-color: #88a2a0;
}

#submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/*index state line + refresh control*/
#indexStatus {
    margin-top: 18px;
    font-size: 15px;
    color: #166b53;
}

#refreshBtn {
    margin-top: 8px;
    padding: 18px 18px;
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: #166b53;
    background-color: #d5d8cb;
    border: 1px solid #166b53;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#refreshBtn:hover {
    background-color: #b9c4b4;
}

/*History card (below the input box, persisted in localStorage)*/
.history-card {
    width: 640px;
    max-width: 92vw;
    padding: 24px 30px;
    text-align: left;
    flex-shrink: 0;
}

.history-card .card-title {
    text-align: center;
    margin-bottom: 12px;
}

.history-entry {
    padding: 10px 0;
    border-bottom: 1px solid rgba(22, 107, 83, 0.25);
}

.history-entry:last-child {
    border-bottom: none;
}

/*flex now. float moved the date to the right
  visually but left it next to the catalog number in the text flow, so
  double clicking "########" ran on into the "M" of "M/DD/YYY" and copied "########M"*/
.history-input {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    color: #166b53;
}

.history-number {
    word-break: break-word;
}

.history-out {
    display: block;
    font-size: 15px;
    color: #2b2b2b;
    line-height: 1.5;
    word-break: break-word;
}

.history-miss {
    color: #8a3b2e;
    font-style: italic;
}

/*timestamp beside the searched number*/
.history-time {
    flex-shrink: 0; /*the date keeps its width, the number wraps instead*/
    font-family: "Cormorant Infant", serif;
    font-size: 13px;
    color: rgba(43, 43, 43, 0.65);
}

.history-link {
    color: #166b53;
    font-size: 14px;
    white-space: nowrap;
}

/*pager between the list and the action buttons*/
.history-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.history-pager span {
    font-size: 14px;
    color: #166b53;
}

/*shared look for pager + export/clear buttons, matching the refresh control*/
.history-pager button,
.history-actions button {
    padding: 5px 18px;
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: #166b53;
    background-color: #d5d8cb;
    border: 1px solid #166b53;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.history-pager button:hover:not(:disabled),
.history-actions button:hover {
    background-color: #b9c4b4;
}

.history-pager button:disabled {
    opacity: 0.45;
    cursor: default;
}

.history-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

/*clearing is destructive, so it reads in the warning color*/
#historyClear {
    color: #8a3b2e;
    border-color: #8a3b2e;
}

#historyClear:hover {
    background-color: rgba(138, 59, 46, 0.15);
}

/*=======================
   Output Page
=======================*/

#output {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 40px 20px;
    overflow-y: auto; /*scrolls if the results are taller than the screen*/
}

/*single result card, centered like one column of the converter output.
  widened for the labelled locations ("Conservation: Scaff. 09 Cass. 281 / E2"),
  which would otherwise wrap awkwardly at 420px*/
.result-card {
    width: 520px;
    max-width: 92vw;
    padding: 30px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 26px;
    flex-shrink: 0;
}

.card-title {
    font-family: "DM Serif Display", serif;
    font-size: 30px;
    color: #166b53;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(22, 107, 83, 0.35);
}

/*the catalog number subheading inside the result card*/
.coord-block h4 {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    color: #166b53;
    margin-bottom: 8px;
}

/*the scaff + cassetta line, the reason the page exists, so it reads large*/
#locationDisplay {
    color: #2b2b2b;
    font-size: 26px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/*divider between locations when an object is listed in more than one place.
  rust, like the relocation notice, a double listing usually signals
  a data error or a broken object rather than something routine. Sized in em
  so it stays proportionate in the big result card and the small history rows*/
.also-found {
    display: inline-block;
    font-size: 0.55em;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8a3b2e;
    margin: 4px 0;
}

/*where an object belongs while it sits somewhere else. Green rather than rust,
  since this is ordinary information and not a problem to flag. Sized in em so
  it stays proportionate in the large result card*/
.return-to {
    display: block;
    font-size: 0.6em;
    color: #166b53;
    margin-top: 2px;
}

.notfound-text {
    color: #2b2b2b;
    font-size: 18px;
    line-height: 1.6;
}

/*temporary relocation, in the same rust tone the page uses for problems, since
  it means the shelf location above is not where the object currently sits*/
#relocationNotice {
    color: #8a3b2e;
    font-size: 18px;
    line-height: 1.5;
    padding: 12px 16px;
    border: 1px solid rgba(138, 59, 46, 0.45);
    border-radius: 16px;
    background-color: rgba(138, 59, 46, 0.08);
}

.history-moved {
    color: #8a3b2e;
    font-style: italic;
}

/*link out to the object record, shaped like the other buttons on the page*/
.object-link {
    display: inline-block;
    padding: 8px 20px;
    font-family: "DM Serif Display", serif;
    font-size: 15px;
    text-decoration: none;
    color: #166b53;
    background-color: #d5d8cb;
    border: 2px solid #166b53;
    border-radius: 30px;
    transition: background-color 0.3s ease;
    align-self: center;
}

.object-link:hover {
    background-color: #88a2a0;
}

#objectLinks {
    align-self: center;
    margin: auto;
}

/*Copy Button*/
.copy-btn {
    align-self: center;
    padding: 5px 18px;
    margin: 6px 2px;
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: #166b53;
    background-color: #d5d8cb;
    border: 2px solid #166b53;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.copy-btn:hover {
    background-color: #88a2a0;
}

.magmap-btn {
    align-self: center;
    padding: 5px 18px;
    margin: 6px 2px;
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: #166b53;
    background-color: #d5d8cb;
    border: 2px solid #166b53;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.magmap-btn:hover {
    background-color: #88a2a0;
}

/*#output is a column, so the side by side pair needs its own row wrapper*/
.result-row {
    display: flex;
    align-items: flex-start; /*each card keeps its own height*/
    justify-content: center;
    gap: 30px;
    max-width: 100%;
    margin-bottom: 5vh;
}

.thumb-card {
    width: 300px;
    padding: 24px;
    text-align: center;
    flex-shrink: 0; /*stops the card being squeezed by a tall location card*/
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#objectThumb {
    display: block;
    width: 100%;
    height: auto; /*keeps the aspect ratio whatever Open Context sends*/
    border-radius: 16px;
}

/*New Search Button*/
#newsearch {
    display: flex;
    width: auto;
    margin: 0 auto;
    padding: 12px 28px;
    border-radius: 30px;
    border: 2px solid #166b53;
    background-color: #d5d8cb;
    color: #166b53;
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

#newsearch:hover {
    background-color: #88a2a0;
}

/*=======================
   Mag map overlay
=======================*/

/*wraps the map image so the svg can sit exactly on it. The frame around it is
  wider than the image, so positioning against the frame would misalign*/
.magmap-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.magmap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /*the map stays clickable through the overlay*/
}

/*the highlighted shelf. Green rather than rust: finding the object is the
  good outcome, not a problem to flag*/
.magmap-hit {
    fill: rgba(22, 107, 83, 0.3);
    stroke: #166b53;
    animation: magmap-pulse 1.8s ease-in-out infinite;
}

@keyframes magmap-pulse {
    0%, 100% { fill-opacity: 1; }
    50% { fill-opacity: 0.35; }
}

/*a pulsing box is unpleasant for anyone sensitive to motion*/
@media (prefers-reduced-motion: reduce) {
    .magmap-hit { animation: none; }
}

/*heading above the map, explaining an empty or unusual highlight: museum
  objects and Scaff. 16 have no area drawn yet. Shaped like the other card
  titles so the map card reads the same as the result cards*/
.magmap-note {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    line-height: 1.3;
    color: #166b53;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(22, 107, 83, 0.35);
}

.mag-map {
    display: flex;
    /*column so the heading stacks above the map instead of beside it*/
    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin-top: 5vh;
    margin-bottom: 5vh;
}

#magMapFrame {
    display: flex;

    align-items: center;
    justify-content: center;

    background-color: #d5d8cb;
    aspect-ratio: auto;
    height: 45vw;
    width: 65vw;
    border-radius: 16px;
}

#magMapImage {
    aspect-ratio: auto;
    height: auto;
    width: 60vw;

    border-style: solid;
    border-radius: 16px;
    border-color: #d5d8cb;
}

/*=======================
   Scrollbars
=======================*/

/*opening the map makes the results taller than the screen, and a scrollbar
  running down the glass cards looks bad. Scrolling still works by wheel,
  trackpad, touch and keyboard; only the bar itself is hidden*/
.pages,
.pages div {
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*old edge*/
}

.pages::-webkit-scrollbar,
.pages div::-webkit-scrollbar {
    display: none; /*chrome, safari, new edge*/
}

/*=======================
   Narrow screens
=======================*/

/*a card that hugs its text will run off a phone screen at 48px, so the
  heading steps down and the input box stops being a fixed width*/
@media (max-width: 560px) {
    #heading1 {
        font-size: 30px;
        padding: 12px 24px;
    }

    #input {
        padding-top: 135px;
    }

    #inputbox {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .result-row {
        flex-direction: column;
        align-items: center;
    }
}