/* TastingKit by Thrane.nu – placemat editor. Panel to the left, the paper on a "desk" to the right; stacked on small screens. */
.tk-editor { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 991px) { .tk-editor { grid-template-columns: minmax(0, 1fr); } .tk-stage { order: -1; } }
.tk-panel { background: var(--body-bg, #fff); border: 1px solid var(--border-color, #dfe3e7); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.tk-panel section { display: flex; flex-direction: column; gap: .5rem; }
.tk-panel h2 { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .75; }
.tk-f { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.tk-wines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tk-wine { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .25rem; align-items: start; }
.tk-wine .tk-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-wine .tk-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tk-wine .tk-name { overflow-wrap: anywhere; }
.tk-wine .tk-meta { font-size: .8rem; color: var(--danger, #c52827); }
.tk-hint { font-size: .8rem; opacity: .8; margin: 0; }
.tk-stage { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.tk-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; font-size: .875rem; }
.tk-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.tk-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; border-radius: 99px; font-weight: 500; font-size: .8rem; background: #e3f1e8; color: #2e6a49; }
.tk-chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.tk-chip.bad { background: #f8e6dd; color: #a6401c; }
.tk-desk { background: #e2dcd8; border-radius: .5rem; padding: clamp(10px, 2.5vw, 28px); }
#tk-mat { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 8px 28px rgba(0,0,0,.14); touch-action: none; user-select: none; -webkit-user-select: none; }
.tk-toast { min-height: 1.4em; font-size: .85rem; font-weight: 500; }
/* A message that pops in as a coloured pill (1.5.4); empty = nothing shown. */
.tk-toast.is-shown { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 99px; font-size: .95rem; font-weight: 600;
  background: #2f3b45; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); animation: tk-toast-in .25s ease-out; }
.tk-toast.is-shown.is-warn { background: #b3261e; }
.tk-toast.is-shown.is-ok { background: #2e6a49; }
.tk-toast.is-shown.is-warn::before { content: "!"; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; color: #b3261e; font-weight: 800; font-size: .8em; }
@keyframes tk-toast-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tk-toast.is-shown { animation: none; } }
#tk-save.tk-dirty::after { content: " •"; }
/* Paper elements: the paper is always white, so these colours are fixed. */
.tk-c { cursor: grab; outline: none; }
.tk-c .tk-safe { display: none; fill: none; stroke: #7a2335; stroke-dasharray: 2 1.6; }
.tk-c.sel .tk-safe, .tk-c.drag .tk-safe, .tk-c:focus-visible .tk-safe { display: inline; }
.tk-c.bad .tk-safe, .tk-c.hit .tk-safe { display: inline; stroke: #c0392b; stroke-dasharray: none; }
.tk-c.bad .tk-ring { stroke: #c0392b; }
.tk-c.drag { cursor: grabbing; }
.tk-c.snapback { transition: transform .25s ease; }
.tk-zones { display: none; fill: #7a2335; fill-opacity: .06; }
svg.dragging .tk-zones { display: inline; }
@media (prefers-reduced-motion: reduce) { .tk-c.snapback { transition: none; } }
/* On the site (template's own styles around it) */
.tk-site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.tk-site-title { margin: 0; font-size: 1.5rem; }
.tk-editor--site { font-size: 15px; }
.tk-editor--site .tk-panel h2 { font-family: inherit; }
.tk-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; margin-bottom: .4rem; }
.tk-sizes .tk-size-wide { grid-column: 1 / -1; }
.tk-notes-pages { display: grid; gap: 1rem; justify-items: center; }
.tk-notes-pages svg { display: block; width: 100%; max-width: 760px; height: auto; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .12); }
.tk-note { margin-top: .35rem; font-size: .8rem; }
.tk-wine--demo { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
.tk-wine--demo .tk-n { padding-top: .3rem; }
.tk-demo-intro { margin: .25rem 0 .5rem; }
#tk-demo-add { margin-top: .5rem; }
/* Template picker (1.5.2): a card per template with a small picture of the placemat in it. */
.tk-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; max-height: 30rem; overflow-y: auto; }
.tk-tpl { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .35rem; border: 1px solid var(--border-color, #dfe3e7); border-radius: .4rem; cursor: pointer; font-size: .8rem; line-height: 1.25; background: var(--body-bg, #fff); }
.tk-tpl:hover { border-color: #9aa3ab; }
.tk-tpl.is-on { border-color: #7a2335; box-shadow: 0 0 0 1px #7a2335; }
.tk-tpl:focus-within { outline: 2px solid #7a2335; outline-offset: 2px; }
.tk-tpl:has(.tk-tpl-radio:focus:not(:focus-visible)) { outline: none; }
.tk-tpl-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tk-tpl-pic { display: block; width: 100%; height: auto; aspect-ratio: 1.414; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); pointer-events: none; }
.tk-tpl-name { overflow-wrap: anywhere; }
.tk-tpl.is-on .tk-tpl-name { font-weight: 600; }
.tk-tpl.is-on .tk-tpl-name::before { content: "✓ "; color: #7a2335; }
/* Font choice (1.5.3): radio buttons, each name written in its own font. */
.tk-fontpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0 0 .5rem; padding: 0; border: 0; min-width: 0; }
.tk-fontpick-label { grid-column: 1 / -1; float: none; width: auto; margin: 0 0 .1rem; padding: 0; font-size: .85rem; }
.tk-fontopt { position: relative; display: flex; align-items: center; min-height: 2.4rem; padding: .3rem .55rem; border: 1px solid var(--border-color, #dfe3e7); border-radius: .4rem; cursor: pointer; background: var(--body-bg, #fff); line-height: 1.15; }
.tk-fontopt--template { grid-column: 1 / -1; }
.tk-fontopt:hover { border-color: #9aa3ab; }
.tk-fontopt.is-on { border-color: #7a2335; box-shadow: 0 0 0 1px #7a2335; }
.tk-fontopt:focus-within { outline: 2px solid #7a2335; outline-offset: 2px; }
.tk-fontopt:has(.tk-fontopt-radio:focus:not(:focus-visible)) { outline: none; }
.tk-fontopt-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tk-fontopt-name { font-size: 1.05rem; overflow-wrap: anywhere; }
/* Printing the editor page (Cmd+P) shows a note instead of the paper: the placemat is printed from its PDF (1.5.3). */
.tk-print-note { display: none; }
@media print {
  #tk-mat, #tk-notes, .tk-notes-pages, .tk-tpl-pic { display: none !important; }
  .tk-desk { background: none; padding: 0; }
  .tk-print-note { display: block !important; margin: 0; padding: 1.5rem; border: 1px solid #999; border-radius: .5rem; font-size: 14pt; color: #000; }
}
/* Font groups fold (1.5.4): summary = label + the chosen font written in it. */
.tk-fontgroup { border: 1px solid var(--border-color, #dfe3e7); border-radius: .4rem; margin: 0 0 .5rem; background: var(--body-bg, #fff); }
.tk-fontgroup > summary { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; cursor: pointer; list-style: none; font-size: .85rem; }
.tk-fontgroup > summary::-webkit-details-marker { display: none; }
/* The chevron (1.5.6): a clear down arrow when folded, up when open (shared with .tk-fold below). */
.tk-fontgroup > summary::after, .tk-fold > summary::after { content: ""; flex: none; width: .6rem; height: .6rem; margin: 0 .2rem 0 .35rem;
  border-right: 2.5px solid #7a2335; border-bottom: 2.5px solid #7a2335; transform: translateY(-.15rem) rotate(45deg); transition: transform .15s; align-self: center; }
.tk-fontgroup[open] > summary::after, .tk-fold[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.tk-fontgroup > summary:hover::after, .tk-fold > summary:hover::after { border-color: #4f1522; }
.tk-fontgroup > summary:focus-visible { outline: 2px solid #7a2335; outline-offset: 2px; border-radius: .4rem; }
.tk-fontgroup-label { flex: 1 1 0; min-width: 0; }
.tk-fontgroup-choice { flex: 0 0 auto; min-width: 0; max-width: 60%; margin-inline-start: auto; font-size: 1.05rem; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-fontgroup .tk-fontpick { padding: 0 .5rem .5rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .tk-fontgroup > summary::after { transition: none; } }
/* Sticky paper (1.5.4): on wide and tall screens the paper stays in view while the panel scrolls; it is never taller than
   the window (portrait papers shrink to fit; the svg keeps the paper's aspect ratio, set by placemat-editor.js). */
@media (min-width: 992px) and (min-height: 700px) {
  .tk-stage { position: sticky; top: var(--tk-sticky-top, 16px); }
  #tk-mat { margin-inline: auto; width: min(100%, calc((100vh - var(--tk-sticky-top, 16px) - 11rem) * var(--tk-ratio, 1.414))); }
  .tk-desk .tk-notes-pages { width: 100%; max-height: calc(100vh - var(--tk-sticky-top, 16px) - 11rem); overflow-y: auto; }
}
/* Folding sections (1.5.5): the section heading is the summary, with a small note at the right. */
.tk-fold > summary { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; list-style: none; padding: .15rem 0; }
.tk-fold > summary::-webkit-details-marker { display: none; }
.tk-fold > summary h2 { flex: 1; }
.tk-fold[open] > summary { margin-bottom: .5rem; }
.tk-fold > summary:focus-visible { outline: 2px solid #7a2335; outline-offset: 2px; border-radius: .25rem; }
.tk-fold-note { font-size: .75rem; color: #7a2335; font-weight: 600; }
/* 1.7.1: the folding sections as clear cards – a tinted bar with a dark, full-strength heading (the panel's other
   headings stay small and grey), so Background, Points on the phone and Sizes stand apart. */
.tk-fold { border: 1px solid #e6dcd3; border-radius: .5rem; background: var(--body-bg, #fff); }
.tk-fold > summary { align-items: center; padding: .7rem .8rem; border-radius: .5rem; background: #faf6f2; transition: background-color .15s; }
.tk-fold > summary:hover { background: #f3e9e1; }
.tk-fold[open] > summary { border-bottom: 1px solid #e6dcd3; border-radius: .5rem .5rem 0 0; margin-bottom: .6rem; }
.tk-panel .tk-fold > summary h2 { opacity: 1; font-size: .9rem; font-weight: 700; letter-spacing: .05em; color: #4f1522; }
.tk-fold > :not(summary) { margin-inline: .8rem; }
.tk-fold[open] { padding-bottom: .7rem; }
.tk-fold > summary::after { width: .7rem; height: .7rem; }
@media (prefers-reduced-motion: reduce) { .tk-fold > summary::after { transition: none; } }
/* Background picture (1.6.0): its own mode on the paper with a frame, corner handles (scale) and a round handle (turn);
   the circles rest and fade meanwhile. */
#tk-mat.tk-bg-editing .tk-c { pointer-events: none; opacity: .45; }
#tk-mat.tk-bg-editing { cursor: move; }
.tk-bg-box { fill: rgba(0, 0, 0, 0); pointer-events: all; stroke: #7a2335; stroke-width: .5; stroke-dasharray: 2 1.2; cursor: move; outline: none; }
.tk-bg-box:focus-visible { stroke-width: .9; stroke-dasharray: none; }
.tk-bg-h { fill: #fff; stroke: #7a2335; stroke-width: .5; cursor: nwse-resize; }
.tk-bg-rot { cursor: grab; }
.tk-bg-stem { stroke: #7a2335; stroke-width: .4; }
.tk-bg-pick { align-self: flex-start; cursor: pointer; }
.tk-bg-pick:focus-within { outline: 2px solid #7a2335; outline-offset: 2px; }
.tk-bg-controls { display: flex; flex-direction: column; gap: .5rem; }
.tk-bg-controls[hidden] { display: none; }
.tk-bg-range { display: flex; align-items: center; gap: .5rem; }
.tk-bg-range output { min-width: 3.2em; text-align: end; font-variant-numeric: tabular-nums; }
.tk-bg-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
@media print { .tk-bg-frame { display: none; } }

/* Points on the phone (1.7.0): settings and the organiser's remote control. */
.tk-vote-opts { margin-top: .5rem; }
.tk-vote-scale { margin: 0 0 .4rem; }
.tk-vote-scale legend { font-size: .9rem; font-weight: 600; margin-bottom: .1rem; }
.tk-vote-panel { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--tk-line, #dfe3e7); }
.tk-vote-state { margin: 0 0 .5rem; padding: .4rem .6rem; border-radius: .35rem; background: #f1f3f5; font-weight: 600; }
.tk-vote-state[data-state="open"] { background: #e3f4e8; color: #1e6b35; }
.tk-vote-state[data-state="shown"] { background: #e7eefb; color: #24467a; }
.tk-vote-links { margin: .5rem 0; font-size: .9rem; }
.tk-vote-res { margin: .25rem 0 .5rem; padding: 0; list-style: none; }
.tk-vote-res li { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: .4rem; padding: .25rem 0; border-bottom: 1px solid #eceff1; font-size: .9rem; }
.tk-vres-rank { font-weight: 700; text-align: right; }
.tk-vres-avg { font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-vote-sets summary { cursor: pointer; font-size: .9rem; }
.tk-vote-sets > ul { margin: .2rem 0 0 !important; padding-left: 1rem; font-size: .85rem; }
.tk-vote-sets li { display: flex; justify-content: space-between; gap: .5rem; }

/* 1.7.1: a checkbox or radio always level with the first line of its label, also when the label wraps and the site's
   template centres them (seen on placemats.dk). */
.tk-panel .form-check { display: flex; align-items: flex-start; gap: .5rem; padding-left: 0; min-height: 0; }
.tk-panel .form-check-inline { display: inline-flex; margin-inline-end: 1rem; }
.tk-panel .form-check > .form-check-input { flex: none; float: none; margin: .25em 0 0; align-self: flex-start; }

/* 1.7.1: compact buttons in the panel with own line icons (a site template may make .btn large and round, and may
   not load Joomla's icon font), with room between them and the next section. */
.tk-panel .btn-sm:not(.btn-link) { display: inline-flex; align-items: center; gap: .4rem; width: auto; min-height: 0; padding: .3rem .7rem;
  font-size: .85rem; line-height: 1.3; border-radius: .4rem; }
.tk-ico { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#tk-bg-edit[aria-pressed="true"] .tk-ico-off, #tk-bg-edit[aria-pressed="false"] .tk-ico-on { display: none; }
.tk-bg-controls > .btn, .tk-bg-pick { align-self: flex-start; }
.tk-bg-pick { margin: .25rem 0 .5rem; }
#tk-bg-status:empty { display: none; }
.tk-bg-btns { gap: .5rem; margin: .25rem 0; }
.tk-vote-host { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; }
.tk-vote-host-qr { width: 88px; height: 88px; flex: none; border: 1px solid #e6dcd3; border-radius: .3rem; }
.tk-vote-host p { margin: 0; font-size: .9rem; }
.tk-vote-host small { opacity: .8; }

/* 1.7.1: the heading stays on one line; the small note beside it gives way (ellipsis) instead of pushing the heading
   onto two lines – ticking "Points on the phone" made the section jump. */
.tk-fold > summary h2 { flex: 0 0 auto; white-space: nowrap; }
.tk-fold > summary .tk-fold-note { flex: 1 1 auto; min-width: 0; line-height: 1; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 1.7.2: the small "?" link to the customer help page (Options → Placemats help_url). */
.tk-help { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-inline-start: .3rem; border: 1.5px solid currentColor;
  border-radius: 50%; font: 700 .7rem/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-decoration: none !important;
  color: #7a2335; opacity: .75; vertical-align: .1em; }
.tk-help:hover, .tk-help:focus-visible { opacity: 1; background: #7a2335; color: #fff; }
.tk-help:focus-visible { outline: 2px solid #7a2335; outline-offset: 2px; }


/* The circles' look (1.8.0): colour themes as swatches, ring/width/number/icon as small picture tiles. */
.tk-look { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
.tk-look > legend { float: none; width: auto; font-size: .85rem; font-weight: 600; margin: 0 0 .3rem; padding: 0; }
.tk-look { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); gap: .3rem; }
.tk-look > legend { grid-column: 1 / -1; }
.tk-look--seg { grid-template-columns: repeat(3, 1fr); }
.tk-lookopt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .25rem .15rem .2rem; border: 1px solid var(--border-color, #dfe3e7);
  border-radius: .4rem; cursor: pointer; background: var(--body-bg, #fff); font-size: .7rem; line-height: 1.1; text-align: center; color: inherit; }
.tk-lookopt:hover { border-color: #9aa3ab; }
.tk-lookopt.is-on { border-color: #7a2335; box-shadow: 0 0 0 1px #7a2335; }
.tk-lookopt.is-on .tk-lookopt-name { color: #7a2335; }
.tk-lookopt:focus-within { outline: 2px solid #7a2335; outline-offset: 2px; }
.tk-lookopt:has(.tk-lookopt-radio:focus:not(:focus-visible)) { outline: none; }
.tk-lookopt-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tk-lookopt-name { overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.tk-look-svg { width: 1.9rem; height: 1.9rem; display: block; color: #2b2b2b; }
.tk-lookopt.is-on .tk-look-svg { color: #7a2335; }
.tk-swatch { width: 2.1rem; height: 2.1rem; }
.tk-lookopt--template { grid-column: 1 / -1; cursor: default; font-size: .75rem; border-style: dashed; border-color: #7a2335; }
.tk-look-colors { margin: -.25rem 0 .75rem; font-size: .85rem; }
.tk-look-colors > summary { cursor: pointer; color: #7a2335; font-weight: 600; }
.tk-look-colorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem .6rem; margin-top: .45rem; }
.tk-look-color { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.tk-look-color input { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border-color, #dfe3e7); border-radius: .3rem; background: none; cursor: pointer; flex: none; }
.tk-look-color input:disabled { opacity: .35; cursor: default; }
.tk-look-nofill { grid-column: 1 / -1; margin: 0; }
.tk-look-warn { margin: 0 0 .75rem; padding: .45rem .6rem; border-radius: .4rem; background: #fff4e5; color: #7a4100; font-size: .8rem; }

/* Tabs (1.9.0): Content, Look, Place, Share & print – icon + label, a small number when something needs fixing. */
.tk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; margin: -.35rem -.35rem 0; padding: .2rem; border-radius: .5rem; background: #f4efef; }
.tk-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; padding: .4rem .15rem .35rem; border: 0; border-radius: .4rem;
  background: none; color: #5a4a4d; font-size: .72rem; font-weight: 600; line-height: 1.1; cursor: pointer; }
.tk-tab .tk-ico { width: 1.15rem; height: 1.15rem; margin: 0; }
.tk-tab:hover { color: #4f1522; background: rgba(255, 255, 255, .6); }
.tk-tab[aria-selected="true"] { background: #fff; color: #7a2335; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tk-tab:focus-visible { outline: 2px solid #7a2335; outline-offset: 1px; }
.tk-tab-label { max-width: 100%; overflow-wrap: break-word; hyphens: auto; text-align: center; }
.tk-tab-badge { position: absolute; top: .15rem; right: .3rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 1rem; background: #c0392b;
  color: #fff; font-size: .65rem; line-height: 1.05rem; text-align: center; }
.tk-tabpanel { display: flex; flex-direction: column; gap: 1.25rem; }
.tk-tabpanel[hidden] { display: none; }

/* Ready to print? (1.9.0) */
.tk-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.tk-check li { padding: .45rem .6rem; border-radius: .4rem; }
.tk-check-ok { background: #e3f4e8; color: #1e6b35; }
.tk-check-ok::before { content: "✓ "; font-weight: 700; }
.tk-check-bad { background: #fff4e5; color: #7a4100; }
.tk-check-bad .btn-link { font-size: .85rem; font-weight: 600; color: #7a2335; vertical-align: baseline; }
.tk-check-dialog { max-width: min(28rem, calc(100vw - 2rem)); border: 0; border-radius: .6rem; padding: 1.25rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.tk-check-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.tk-check-dialog h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.tk-check-dialog-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* A field reached from the paper or the check list lights up for a moment. */
.tk-flash { animation: tk-flash 1.4s ease-out; }
@keyframes tk-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(122, 35, 53, .45); } 100% { box-shadow: 0 0 0 3px rgba(122, 35, 53, 0); } }
@media (prefers-reduced-motion: reduce) { .tk-flash { animation: none; outline: 2px solid #7a2335; } }

/* The title, the date, the footer and the QR code can be clicked on the paper. */
#tk-mat [data-tk-goto] { cursor: pointer; }
#tk-mat [data-tk-goto]:hover { opacity: .7; }
#tk-mat.tk-bg-editing [data-tk-goto] { cursor: inherit; }
.tk-autosave { font-size: .75rem; opacity: .75; }
/* 1.9.1: the theme names are long ("Champagne", "Sort og guld"): wider tiles, never broken inside a word. */
.tk-look.tk-themes { grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr)); }
.tk-themes .tk-lookopt-name { overflow-wrap: normal; hyphens: manual; }
/* 1.9.1: the bar over the paper – the summary at the left, switch, state, "saved" and the "?" links together at the right. */
.tk-bar-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .75rem; margin-inline-start: auto; }
.tk-view-wrap { display: inline-flex; align-items: center; }
.tk-view-wrap[hidden] { display: none; }

/* Arrangements (2.0): four tiles in a row. */
.tk-look.tk-arrange { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Touch screens (2.0): the page scrolls over the paper until "Move circles" is on. */
#tk-mat.tk-touch:not(.tk-moving) { touch-action: pan-x pan-y pinch-zoom; }
#tk-mat.tk-moving { outline: 2px dashed #7a2335; outline-offset: 3px; }
.tk-move[aria-pressed="true"] { color: #fff; }

/* Phones (2.0): the paper stays at the top while the panel scrolls under it, and the tabs are a bar at the bottom of
   the screen (with room for the phone's home bar). */
@media (max-width: 767px) {
  .tk-editor { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .tk-stage { position: sticky; top: var(--tk-sticky-top, 0px); z-index: 20; padding: .4rem 0 .5rem; background: var(--body-bg, #fff);
    box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .25); }
  .tk-stage > .tk-hint, #tk-summary { display: none; }
  .tk-stage .tk-btns .btn { padding: .3rem .6rem; font-size: .85rem; }
  #tk-mat { width: min(100%, calc(30vh * var(--tk-ratio, 1.414))); margin-inline: auto; }
  .tk-stage .tk-bar { gap: .35rem .6rem; }
  .tk-desk { padding: .5rem; }
  .tk-desk .tk-notes-pages { max-height: 30vh; overflow-y: auto; }
  .tk-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; margin: 0; border-radius: 0;
    padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .14); }
  .tk-tab { padding: .45rem .1rem .4rem; font-size: .7rem; }
  .tk-tab .tk-ico { width: 1.35rem; height: 1.35rem; }
  .tk-panel { padding: .9rem; }
}

/* 2.0.3: Joomla's administrator (Atum) puts an "opens in a new window" icon before every target="_blank" link; the
   help link is a "?" in a ring and needs no second icon. */
a.tk-help[target]::before, a.tk-help[target]::after { content: none !important; display: none !important; }

/* 2.1.0: the big and the small text in the middle of a circle, side by side under the wine's name. */
/* Extra circles (2.2.0): the symbol as small radio tiles, the edge text and a remove button on one line. */
.tk-extras { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tk-extras:empty { display: none; }
.tk-extra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .35rem; }
.tk-extra-symbols { display: flex; gap: .2rem; margin: 0; padding: 0; border: 0; }
.tk-extra-sym { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color, #dfe3e7);
  border-radius: .35rem; cursor: pointer; color: inherit; }
.tk-extra-sym svg { width: 1.15rem; height: 1.15rem; }
.tk-extra-sym input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tk-extra-sym.is-on { border-color: #7a2335; box-shadow: inset 0 0 0 1px #7a2335; color: #7a2335; }
.tk-extra-sym:has(input:focus-visible) { outline: 2px solid #7a2335; outline-offset: 2px; }
.tk-extra-text { grid-column: 1 / -1; min-width: 0; }
.tk-extra-remove { padding: .2rem .4rem; }
.tk-centre-row { display: flex; gap: .35rem; margin-top: .25rem; }
.tk-centre-row[hidden] { display: none; }
.tk-centre-row .tk-big { flex: 0 0 4.6rem; font-weight: 700; text-align: center; }
.tk-centre-row .tk-small { flex: 1 1 auto; min-width: 0; }
#tk-guests { font-size: .9rem; }