/* Posters: what the poster walkthrough has beyond the shared prints styles (assets/prints.css). Phone first. */

/* Step 1: a row per file, since a design's size, pages and match are worth reading. */
.hp-posters__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.hp-posters__file { position: relative; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.875rem; background: var(--c-tile); border-radius: 20px; }
.hp-posters__file.is-rejected, .hp-posters__file.is-failed { background: var(--c-surface); border: 1px solid var(--c-line); }
.hp-posters__file-thumbs { display: flex; gap: 0.35rem; align-items: center; justify-content: center; height: 4.75rem; }
.hp-posters__file-thumbs .hp-prints__thumb { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 4px; overflow: hidden; background-color: var(--c-surface); box-shadow: 0 1px 2px rgba(29, 29, 31, 0.1), 0 4px 12px rgba(29, 29, 31, 0.08); }
.hp-posters__file-thumbs .hp-prints__thumb img { object-fit: contain; background: var(--c-surface); }
.hp-posters__file-text { min-width: 0; }
.hp-posters__name { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-posters__meta { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--c-quiet); font-variant-numeric: tabular-nums; }
.hp-posters__status { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--c-quiet); }
.hp-posters__status.is-ok { color: var(--c-ink); font-weight: 500; }
.hp-posters__status svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--c-ink); }
.hp-posters__file .hp-prints__warn { margin-top: 0.35rem; }
.hp-posters__file-end { display: flex; align-items: center; gap: 0.25rem; }
.hp-posters__file-end .hp-prints__ring { position: static; display: inline-grid; }
.hp-posters__file-end .hp-prints__ring-track { fill: none; stroke: var(--c-line); }
.hp-posters__file-end .hp-prints__ring-fill { stroke: var(--c-ink); }
.hp-posters__x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--c-quiet); font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.hp-posters__x:hover { color: var(--c-ink); background: var(--c-surface); }
@media (max-width: 480px) { .hp-posters__file { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.75rem; } .hp-posters__file-thumbs { height: 3.5rem; } }

/* Step 2, laid out as photo prints (the rows, lines, menus and segmented controls are prints.css's):
   the paper and finish for every poster at the top, each with its name, then a row per design. */
.hp-posters__every-row { display: grid; gap: 0.4rem; margin-top: 0.9rem; }
.hp-posters__every-row:first-of-type { margin-top: 0.25rem; }
.hp-posters__every-name { font-size: 0.95rem; font-weight: 500; color: var(--c-ink); }
.hp-posters__every .hp-prints__hint { margin-top: 0.15rem; }
@media (min-width: 600px) {
  .hp-posters__every-row { grid-template-columns: 5.5rem auto; column-gap: 1rem; align-items: center; justify-content: start; }
  .hp-posters__every-row .hp-prints__hint { grid-column: 2; max-width: 40rem; }
}
.hp-posters__every .hp-prints__paper-differs { margin-top: 0.75rem; }
/* A design's thumbnail shows the whole page on white, and its menus line up under its name. */
.hp-posters__row .hp-prints__row-thumb { background: var(--c-surface); }
.hp-posters__row .hp-prints__row-thumb img { object-fit: contain; }
.hp-posters__row .hp-prints__row-name { align-self: start; }
.hp-posters__row .hp-prints__row-head { align-items: flex-start; }
.hp-posters__row .hp-prints__row-head { flex-wrap: wrap; }
.hp-posters__menus { flex-basis: 100%; display: grid; gap: 0.4rem; }
.hp-posters__menus .hp-prints__row-paper { margin-top: 0; }
.hp-posters__menus .hp-prints__row-paper > span { flex: 0 0 4.5rem; }
.hp-posters__menus .hp-prints__row-paper .hp-prints__select { flex: 1 1 auto; max-width: 13rem; }
/* The design's three menus make its column taller than the lines: the lines and "+ Another size" stay together at the top. */
@media (min-width: 900px) { .hp-posters__row { grid-template-rows: auto 1fr; } }
/* A line: the size, a size of their own, the count, the price of one, and the notes under it. */
.hp-posters__line .hp-posters__per { font-size: 0.875rem; color: var(--c-quiet); }
/* On a phone the size menu has a row of its own, so the × sits beside it and the count shares its row with the price. */
@media (max-width: 599px) { .hp-posters__line > .hp-prints__select { flex: 1 1 0; order: -2; } .hp-posters__line > .hp-prints__line-remove { order: -1; } }
.hp-posters__lprice { margin-left: auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-posters__lprice strong { font-size: 1.05rem; font-weight: 600; }
.hp-posters__lprice em { font-style: normal; font-size: 0.85rem; color: var(--c-quiet); }
.hp-posters__line > .hp-posters__tier, .hp-posters__line > .hp-posters__note, .hp-posters__line > .hp-posters__quote-why, .hp-posters__line > .hp-posters__dims { flex-basis: 100%; }
.hp-posters__dims { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--c-quiet); }
.hp-posters__inch { width: 5rem; min-height: 44px; padding: 0 0.5rem; font: inherit; font-size: 1.05rem; font-weight: 600; text-align: center; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: 12px; -moz-appearance: textfield; appearance: textfield; }
.hp-posters__inch::-webkit-outer-spin-button, .hp-posters__inch::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp-posters__inch:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
.hp-posters__quote-why { margin: 0; padding: 0.65rem 0.9rem; border-radius: 14px; background: var(--c-surface); font-size: 0.875rem; line-height: 1.45; color: var(--c-body); }
.hp-posters__tier { margin: 0; font-size: 0.85rem; color: var(--c-quiet); }
.hp-posters__note { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--c-quiet); }

/* Step 3: beside the sheet, the order as it is priced, what goes to us to quote, and the proof. */
.hp-posters__side { display: grid; gap: 1rem; }
.hp-posters__order, .hp-posters__quotebox { padding: 0.5rem 1rem 1rem; background: var(--c-tile); border-radius: 18px; }
.hp-posters__order h3, .hp-posters__quotebox h3 { margin: 0.75rem 0 0.25rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; color: var(--c-ink); }
.hp-posters__orow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--c-line-strong); font-variant-numeric: tabular-nums; }
.hp-posters__orow b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--c-ink); }
.hp-posters__orow span { font-size: 0.8125rem; color: var(--c-quiet); }
.hp-posters__oprice { text-align: right; font-size: 0.95rem; font-weight: 500; white-space: nowrap; color: var(--c-ink); }
.hp-posters__oprice small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--c-quiet); }
.hp-posters__orow.is-total { border-bottom: 0; padding-bottom: 0.25rem; }
.hp-posters__orow.is-total b, .hp-posters__orow.is-total .hp-posters__oprice { font-weight: 700; }
.hp-posters__order > p { margin: 0.4rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--c-quiet); }
.hp-posters__quotebox { display: grid; gap: 0.75rem; }
.hp-posters__quotebox h3 { margin-bottom: -0.5rem; }
.hp-posters__qlede { margin: 0; font-size: 0.875rem; color: var(--c-quiet); }
.hp-posters__qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.875rem; color: var(--c-body); }
.hp-posters__qlist b { color: var(--c-ink); }
.hp-posters__field { display: grid; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--c-quiet); }
.hp-posters__input { width: 100%; min-height: 44px; padding: 0.55rem 0.8rem; font: inherit; font-size: 1rem; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: 12px; }
.hp-posters__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-soft); }
textarea.hp-posters__input { resize: vertical; }
.hp-posters__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-posters__quotebox .hp-prints__segment { justify-self: start; background: rgba(29, 29, 31, 0.07); }
.hp-posters__quotebox .hp-prints__button { justify-self: start; }
.hp-posters__sent { margin: 0; padding: 1rem; border-radius: 18px; background: var(--c-soft); font-size: 0.95rem; color: var(--c-ink); }
.hp-posters__proof { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 1rem; border: 1px solid var(--c-line-strong); border-radius: 16px; cursor: pointer; }
.hp-posters__proof strong { display: block; font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.hp-posters__proof > span > span { display: block; margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.45; color: var(--c-quiet); }
.hp-posters__check { width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; accent-color: var(--c-ink); cursor: pointer; }

/* The proof: the rule line, the two ways to approve (a required choice, like cards), the tick for approving here, and the printed proof beside either. */
.hp-posters__proofbox { display: grid; gap: 0.75rem; }
.hp-posters__proofbox h3 { margin: 0.25rem 0 -0.35rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; color: var(--c-ink); }
.hp-posters__prule { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--c-quiet); }
.hp-posters__ptiles { display: grid; gap: 0.5rem; }
.hp-posters__ptile { display: grid; gap: 0.2rem; min-height: 44px; padding: 0.85rem 1rem; border: 1px solid var(--c-line-strong); border-radius: 16px; background: var(--c-surface); font: inherit; text-align: left; color: var(--c-body); cursor: pointer; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.hp-posters__ptile:hover { border-color: var(--c-ink); }
.hp-posters__ptile.is-on { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.hp-posters__ptile b { font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.hp-posters__ptile span { font-size: 0.85rem; line-height: 1.4; color: var(--c-quiet); }
.hp-posters__approve { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--c-soft); font-weight: 500; color: var(--c-ink); cursor: pointer; }
.hp-posters__proof .hp-posters__pprice { margin: 0.1rem 0 0.15rem; font-size: 0.875rem; font-weight: 500; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* A poster on a board is printed on the vinyl: the paper control rests, quietly, and says why under it. */
.hp-posters__every .hp-prints__segment[aria-disabled="true"] { opacity: 0.45; }
.hp-posters__every .hp-prints__segment-item:disabled { cursor: default; }
.hp-posters__every .hp-prints__segment-item:disabled:hover { color: var(--c-quiet); }
.hp-posters__menus .hp-prints__select:disabled { opacity: 0.6; cursor: default; }