/* Picture-first duties (UX review U4, U10, U13–U15). Every Abbey duty can be done by looking: signs,
   drawn tools and shapes carry the meaning, and any word left is a second cue at 14 px or more with
   good contrast. Loaded after the older duty styles, which it refines. */

/* Done: a large tick and "Done!" over the finished work, on every map. */
.interactive-duty .duty-done, .quick-duty .duty-done { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:6; width:auto; height:auto; animation:duty-seal .45s ease-out both; }
.duty-done[hidden] { display:none!important; }
.duty-done > :is(span, strong), .interactive-duty .duty-done strong { font:600 24px/1 var(--lk-sans, Arial, sans-serif); color:#f6ecd0; }
.interactive-duty .duty-done, .quick-duty .duty-done { background:radial-gradient(closest-side, #16201bd9, #16201b99 60%, transparent); }
.duty-done > * { grid-area:1/1; }
.duty-done { grid-template-columns:auto; }
.interactive-duty .duty-done, .quick-duty .duty-done { display:flex; align-items:center; justify-content:center; gap:10px; }
.interactive-duty .duty-done svg, .quick-duty .duty-done svg { width:34px; height:34px; padding:6px; box-sizing:content-box; background:#40593d; color:#f0e1b3; border:2px solid #acb18b; border-radius:50%; stroke-width:2.4; }
.interactive-duty .duty-done[hidden] { display:none!important; }
.duty-dialog .duty-finished .duty-feedback { padding-right:0; }
.quick-duty { position:relative; }
.quick-duty .quick-status.complete { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.duty-art { display:block; }

/* Sacred texts: each gap on the shelf shows its book's sign in outline, over its name. */
.interactive-duty .book-shelves { display:flex; gap:6px; padding:12px 6px 0; }
.interactive-duty .book-shelves .placement-slot { height:auto; min-height:136px; padding:6px 2px 4px; gap:4px; justify-content:flex-end; border:0; border-radius:6px 6px 0 0; }
.interactive-duty .book-shelves .placement-slot:not(:disabled):hover { background:#ffffff0d; }
.interactive-duty .duty-spine { width:40px; height:96px; margin:0 auto; }
.interactive-duty .shelf-label { font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); color:#efe4c6; padding:2px 0 4px; letter-spacing:0; white-space:nowrap; }
.interactive-duty .book-object { height:auto; min-height:118px; width:24%; max-width:104px; padding:6px 3px 7px; display:flex; flex-direction:column; align-items:center; gap:4px; background:#1f2a24; border:1px solid #8e9272; border-left-width:1px; border-radius:8px; color:#f1e6c8; font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); }
.interactive-duty .book-object:nth-child(n) { background:#1f2a24; }
.interactive-duty .duty-book { width:52px; height:66px; }
.interactive-duty .book-object span { white-space:nowrap; }
.held-tool .duty-book, .held-tool .duty-store { width:56px; height:auto; }

/* The brothers' table: outlines only, drawn dark enough to see in any light. */
.interactive-duty .table-setting .placement-slot { border:2px dashed #4d4128; border-radius:10px; background:#ffffff1f; color:transparent; }
.interactive-duty .table-setting .placement-slot.filled { border-style:solid; border-color:#6b8a5a; background:#ffffff26; }
.interactive-duty .table-setting .duty-prop { opacity:1; filter:brightness(.42) saturate(.2); }
.interactive-duty .table-setting .filled .duty-prop { filter:none; }
.interactive-duty .table-object { height:auto; min-height:84px; padding:8px 4px; font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); color:#f1e6c8; justify-content:center; gap:10px; border-radius:8px; }

/* Remedies: the recipe is pictures that tick off; the herbs look nothing alike. */
.recipe-steps { display:flex; align-items:center; justify-content:center; gap:4px; margin:0 0 4px; }
.recipe-step { position:relative; display:grid; place-items:center; width:50px; height:50px; border-radius:12px; background:#1d2823; border:2px solid #56614f; }
.recipe-step .duty-art { width:38px; height:38px; }
.recipe-step.next { border-color:#e5c579; box-shadow:0 0 0 3px #e5c57933; }
.recipe-step.done { opacity:.5; border-color:#6b8a5a; }
.recipe-step.done::after { content:"✓"; position:absolute; right:-6px; top:-8px; width:22px; height:22px; border-radius:50%; background:#40593d; color:#f0e1b3; font:700 14px/22px Arial, sans-serif; text-align:center; }
.recipe-join { font:600 20px/1 Arial, sans-serif; color:#d8c79c; font-style:normal; width:14px; text-align:center; }
.interactive-duty .mortar-scene { height:112px; padding-bottom:4px; }
.interactive-duty .mortar-bowl { margin-top:20px; }
.interactive-duty .herb-piece.herb-mint { background:#5fae55; }
.interactive-duty .herb-piece.herb-chamomile { background:#f3ecd2; box-shadow:inset 0 0 0 4px #f0c33c; }
.interactive-duty .herb-piece.herb-sage { background:#9db097; }
.interactive-duty .herb-tray { margin:8px 0; gap:8px; }
.interactive-duty .herb-object { min-height:84px; padding:6px 4px; gap:4px; font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); color:#f1e6c8; border-radius:8px; }
.interactive-duty .herb-object .duty-herb { width:46px; height:46px; stroke:none; }
.interactive-duty .mix-actions { display:flex; flex-direction:row; gap:8px; }
.interactive-duty .mix-actions button { min-height:56px; display:flex; align-items:center; justify-content:center; gap:8px; font:600 16px/1 var(--lk-sans, Arial, sans-serif); padding:6px 10px; }
.interactive-duty .mix-actions .duty-tool { width:36px; height:36px; flex-shrink:0; }

/* Fountain and linens: the scene changes with each step; the guide is the tools, in order. */
.interactive-duty .sequence-scene, .interactive-duty .sequence-scene[data-stage] { height:auto; padding:0; display:block; background:#18221e; border-bottom:0; border-radius:10px; }
.interactive-duty .sequence-scene::before { content:none; }
.interactive-duty .sequence-scene .duty-scene { width:100%; height:auto; max-height:128px; margin:0 auto; }
.sequence-guide { list-style:none; display:flex; justify-content:center; gap:10px; margin:10px 0 0; padding:0; counter-reset:none; }
.sequence-guide li { position:relative; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:#1d2823; border:2px solid #56614f; }
.sequence-guide li .duty-art { width:34px; height:34px; }
.sequence-guide li b { position:absolute; right:-7px; top:-8px; min-width:22px; height:22px; border-radius:11px; background:#2b3a31; border:1px solid #87917a; color:#f3e8c9; font:700 14px/20px Arial, sans-serif; text-align:center; }
.sequence-guide li.next { border-color:#e5c579; box-shadow:0 0 0 3px #e5c57933; }
.sequence-guide li.next b { background:#e5c579; color:#1c2420; border-color:#e5c579; }
.sequence-guide li.done { opacity:.55; border-color:#6b8a5a; }
.sequence-guide li.done b { background:#40593d; border-color:#8fb471; }
.interactive-duty .tool-tray { gap:8px; padding-top:10px; flex-wrap:nowrap; }
.interactive-duty .sequence-tool { flex:1; min-width:0; max-width:120px; min-height:84px; padding:6px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); color:#f1e6c8; border-radius:8px; }
.interactive-duty .sequence-tool .duty-tool { width:44px; height:44px; }
.interactive-duty .sequence-tool:disabled { opacity:.3; }
.interactive-duty .sequence-tool span { white-space:nowrap; }

/* Herb beds: hold to pour. The soil darkens with --wet, the herbs lift, and a tick marks each bed. */
.interactive-duty .herb-plots { gap:10px; padding:8px 2px; }
.interactive-duty .herb-plot { position:relative; min-height:104px; padding:6px; background:#263a2d; border:2px solid #6f7d5f; border-radius:10px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; --wet:0; }
.interactive-duty .herb-plot .duty-bed { width:100%; max-width:150px; height:auto; }
.interactive-duty .herb-plot .bed-soil { fill:color-mix(in srgb, #3a2716 calc(var(--wet) * 100%), #a48a61); }
.interactive-duty .herb-plot .bed-plant { transform:rotate(calc((1 - var(--wet)) * 9deg)) scale(calc(.86 + var(--wet) * .14)); filter:saturate(calc(.35 + var(--wet) * .65)) brightness(calc(.8 + var(--wet) * .2)); }
.interactive-duty .herb-plot.holding { border-color:#8cc6d9; background:#27403a; }
.interactive-duty .herb-plot.watered { border-color:#8fb471; background:#2d4a37; opacity:1; }
.interactive-duty .herb-plot.watered::after { content:none; }
.bed-can { position:absolute; right:4px; top:2px; width:54px; opacity:0; transform:rotate(-8deg); transition:opacity .15s, transform .15s; pointer-events:none; }
.bed-can .duty-can { width:54px; height:auto; }
.herb-plot.holding .bed-can { opacity:1; transform:rotate(18deg); }
.herb-plot.holding .can-drops { animation:can-drops .5s linear infinite; }
@keyframes can-drops { from { transform:translateY(-3px); opacity:.4; } to { transform:translateY(6px); opacity:1; } }
.bed-done { position:absolute; right:6px; top:6px; width:30px; height:30px; border-radius:50%; background:#40593d; border:2px solid #b4cf93; color:#f3ecd0; font:700 18px/26px Arial, sans-serif; text-align:center; }

/* Cellar stores: each bin shows the dark shape of what belongs in it, over its name. */
.interactive-duty .store-bins { gap:6px; padding:12px 6px 0; }
.interactive-duty .store-bin { min-height:104px; gap:4px; padding:6px 2px; justify-content:flex-end; font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); color:#f1e6c8; border:2px dashed #9a9275; border-bottom:0; border-radius:8px 8px 0 0; }
.interactive-duty .store-bin .duty-store { width:52px; height:52px; }
.interactive-duty .store-bin.filled { border-style:solid; border-color:#8fb471; }
.interactive-duty .store-object { min-height:88px; width:24%; padding:6px 2px; gap:4px; justify-content:center; font:600 14px/1.15 var(--lk-sans, Arial, sans-serif); color:#f1e6c8; border-radius:8px; }
.interactive-duty .store-object .duty-store { width:46px; height:46px; }
.interactive-duty .store-object.selected, .interactive-duty .book-object.selected, .interactive-duty .table-object.selected { outline:3px solid #e8c886; outline-offset:3px; background:#3b3a28; }

/* Tight phones: 360 px wide and 640 px tall keep every duty on one screen. */
@media (max-width:400px) {
  .interactive-duty .book-object { min-height:108px; }
  .interactive-duty .duty-book { width:46px; height:58px; }
  .interactive-duty .book-shelves .placement-slot { min-height:128px; }
  .interactive-duty .duty-spine { height:90px; }
  .interactive-duty .sequence-scene .duty-scene { max-height:112px; }
  .sequence-guide { gap:12px; margin-top:8px; }
  .interactive-duty .sequence-tool { min-height:78px; }
  .interactive-duty .herb-plot { min-height:96px; }
}
@media (max-height:700px) and (max-width:600px) {
  .interactive-duty .mortar-scene { height:92px; }
  .interactive-duty .mortar-bowl { margin-top:10px; transform:scale(.85); }
  .interactive-duty .pestle { transform:rotate(35deg) scale(.85); }
  .interactive-duty .herb-object { min-height:76px; }
  .interactive-duty .table-object { min-height:76px; }
}
/* Held sideways, the pictures sit beside the tray. */
@media (max-height:500px) and (min-width:600px) {
  .duty-dialog .duty-workspace.sequence { display:grid; grid-template-columns:1fr 1.1fr; gap:4px 16px; align-items:center; }
  .duty-dialog .duty-workspace.sequence .sequence-scene { grid-row:1 / span 2; }
  .duty-dialog .duty-workspace.sequence .tool-tray { padding-top:4px; }
  .interactive-duty .sequence-tool { min-height:68px; }
  .duty-dialog .duty-workspace.mix .recipe-steps { grid-column:2; }
  .interactive-duty .herb-object { min-height:64px; }
  .interactive-duty .herb-object .duty-herb { width:34px; height:34px; }
  .duty-dialog .duty-workspace.water .herb-plots { grid-template-columns:repeat(4, 1fr); }
  .duty-dialog .duty-workspace.stores { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; align-items:end; }
  .duty-dialog .duty-workspace.stores .object-tray { display:grid; grid-template-columns:1fr 1fr; padding:0; gap:8px; }
  .duty-dialog .duty-workspace.stores .store-object { width:100%; min-height:70px; }
  .interactive-duty .book-object { width:100%; max-width:none; min-height:96px; }
  .duty-dialog .duty-feedback { font-size:14px!important; }
}

/* Quick duties (Priory and Hilltop) ------------------------------------------------------------- */
/* U13: every control at least 44 × 44, including the sluice's − and +. */
.quick-duty .quick-controls button { min-width:44px; min-height:48px; }
@media (max-width:450px) { .quick-duty .quick-controls button { min-width:44px; } .quick-level .quick-controls { gap:6px; } }

/* U14: signal pennants at 48 px, each with its own bold white shape, repeated on the buttons. */
.quick-sequence-guide.signal-guide { gap:4px 10px; margin:12px 0 18px; }
.quick-sequence-guide.signal-guide > span { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 4px 2px; border-radius:8px; }
.quick-sequence-guide.signal-guide .duty-pennant { height:48px; width:auto; }
.quick-sequence-guide.signal-guide b { font:700 14px/1 Arial, sans-serif; color:#efe4c6; }
.quick-sequence-guide.signal-guide .current { outline:3px solid var(--quick-gold); }
.quick-signal-row .duty-pennant { height:64px; width:auto; }
.quick-signal-row button { min-height:92px; }

/* U10: the lift is loaded, locked, then wound by holding the crank. */
.quick-hoist-guide { display:flex; justify-content:center; align-items:center; gap:8px; margin:6px 0 10px; }
.quick-hoist-guide span { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:#1d2823; border:2px solid #56614f; }
.quick-hoist-guide span.current { border-color:var(--quick-gold); box-shadow:0 0 0 3px #e5c57933; }
.quick-hoist-guide span.done { opacity:.5; border-color:#6b8a5a; }
.quick-hoist-guide .duty-art { width:34px; height:34px; }
.quick-hoist-guide i { font:600 18px/1 Arial, sans-serif; font-style:normal; color:#d8c79c; }
.quick-hoist-controls { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:10px; align-items:stretch; }
.quick-hoist-controls button { min-height:96px!important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px!important; font-weight:600; }
.quick-hoist-controls .duty-art { width:48px; height:48px; }
.quick-hoist-controls button:disabled { opacity:.35; }
.quick-hoist-controls button.quick-next { border:3px solid var(--quick-gold); background:#4a4a32; }
.quick-crank { position:relative; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; --wind:0; }
.quick-hoist-controls .quick-crank { padding-bottom:20px!important; }
.quick-crank .duty-crank { width:62px; height:62px; transform:rotate(calc(var(--wind) * 1080deg)); }
.quick-crank .crank-meter { position:absolute; left:8px; right:8px; bottom:6px; height:6px; border-radius:3px; background:#141c18; overflow:hidden; }
.quick-crank .crank-meter i { display:block; height:100%; width:calc(var(--wind) * 100%); background:var(--quick-gold); }
.quick-crank.holding { background:#55553a!important; }
.quick-duty .quick-hoist { margin:0 0 10px; }

/* U10: the bell rope is pulled down, hand over hand. */
.quick-rigging { display:grid; grid-template-columns:1fr 124px; gap:12px; align-items:stretch; margin:8px 0 4px; }
.quick-rigging .duty-rigging { width:100%; height:auto; max-height:260px; }
.quick-duty .quick-sally { position:relative; min-height:230px!important; padding:0!important; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; background:#1f2724!important; --drag:0; }
.quick-sally .duty-sally { position:absolute; left:50%; top:0; width:64px; height:auto; transform:translate(-50%, calc(var(--drag) * 28px)); }
.quick-sally .pull-arrow { position:absolute; left:0; right:0; bottom:0; padding:22px 0 8px; background:linear-gradient(#1f272400, #1f2724 45%); display:grid; justify-items:center; gap:2px; font:600 16px/1 var(--lk-sans, Arial, sans-serif); color:#f1e6c8; }
.quick-sally .pull-arrow svg { width:30px; height:30px; animation:pull-hint 1.2s ease-in-out infinite; }
@keyframes pull-hint { 0%, 100% { transform:translateY(-3px); } 50% { transform:translateY(4px); } }
.quick-pips { display:flex; justify-content:center; gap:10px; margin:8px 0 0; }
.quick-pips i { width:18px; height:18px; border-radius:50%; border:2px solid #87917a; background:#1c2823; }
.quick-pips i.on { background:var(--quick-gold); border-color:var(--quick-gold); }
@media (max-width:400px) { .quick-rigging { grid-template-columns:1fr 108px; } .quick-duty .quick-sally { min-height:210px!important; } .quick-hoist-controls button { min-height:88px!important; } }
@media (max-height:500px) and (min-width:600px) { .quick-rigging .duty-rigging { max-height:170px; } .quick-duty .quick-sally { min-height:170px!important; } .quick-hoist-controls button { min-height:70px!important; } }
/* Held sideways, the lift stands beside its guide and controls so nothing needs scrolling. */
@media (max-height:500px) and (min-width:600px) {
  .quick-lift { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"hint hint" "art guide" "art controls" "status status"; column-gap:20px; align-items:center; }
  .quick-lift .quick-hint { grid-area:hint; } .quick-lift .quick-status { grid-area:status; }
  .quick-lift .quick-hoist-guide { grid-area:guide; margin:0; } .quick-lift .quick-hoist-controls { grid-area:controls; }
  .quick-lift .quick-hoist { grid-area:art; margin:0!important; } .quick-lift .quick-hoist .duty-hoist { height:min(150px, 38dvh); }
}
@media (prefers-reduced-motion:reduce) { .quick-sally .pull-arrow svg, .herb-plot.holding .can-drops { animation:none; } }