/* town.css — the neighbourhood map view for "Feet on the Table".
 *
 * Load this LAST (after style.css and workspace.css) so the handful of
 * deliberate overrides at the bottom win without editing the older files.
 *
 *   <link rel="stylesheet" href="/town.css">
 *
 * Structure it expects (built by the app, art by public/town-art.js):
 *
 *   body.has-town                      // any non-meal moment
 *     .room-card[.show-map]
 *       #map-toggle                    // topbar toggle, lives in .room-header
 *       #town-view                     // shown only while .show-map
 *         .town-header                 // .eyebrow, h2, p, .town-location
 *         .town-layout                 // optional wrapper: map + .town-jobs
 *           .town-map                  // aspect-locked box
 *             svg.town-art             // decorative, aria-hidden
 *             button.map-stop[data-place] style="--x:14%;--y:20%"
 *               .map-stop-icon + strong
 *           .town-jobs                 // .place-heading, .place-description,
 *                                      // .place-tasks > .place-job, …
 *         .map-topline                 // clock + coins (+ .town-return)
 *       #room                          // hidden while .show-map
 *
 * The map box keeps a strict 1000/650 aspect ratio: the --x/--y percentages on
 * .map-stop only line up with the drawing while that ratio holds, so never give
 * .town-map an independent height — size it by width alone.
 */

/* ------------------------------------------------------------ the shell  */
#town-view{display:none;padding:18px 20px 20px;background:linear-gradient(#fcfaf1,#f7f5ea)}
.room-card.show-map #town-view,#town-view.is-open{display:block}
.room-card.show-map #room{display:none}
.room-card:not(.show-map) #town-view{display:none}

/* Toggle that swaps the room for the map. */
#map-toggle{min-height:40px;padding:0 15px;border:1px solid #d7dcc9;border-radius:999px;
  background:#f1f3e8;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.6px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#map-toggle:hover{background:#e7ecdc}
#map-toggle[aria-pressed=true],.room-card.show-map #map-toggle{background:var(--green);color:#fffdf1;border-color:#2f4d3b}
.room-header{gap:10px;flex-wrap:wrap}

/* ------------------------------------------------------------- header   */
.town-header{margin:0 0 14px;max-width:62ch}
.town-header .eyebrow{color:#909380;margin-bottom:7px}
.town-header h2{font:clamp(22px,3.2vw,31px)/1.2 var(--serif);font-weight:400;letter-spacing:-.8px;text-wrap:balance}
.town-header h2 em,.town-header h2 span{font-style:italic;color:#899475}
.town-header p{color:var(--muted);font-size:13px;line-height:1.6;margin-top:7px;text-wrap:pretty}
.town-location{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  background:var(--peach);border:1px solid #ecd9c4;border-radius:999px;padding:6px 14px;
  font-size:12px;font-weight:600;color:#8a6a3e}

/* --------------------------------------------------------- map + stops  */
.town-layout{display:grid;gap:18px;align-items:start}

.town-map{
  --stop-size:clamp(42px,5.2vw,54px);
  --stop-label:clamp(11px,1.3vw,13px);
  position:relative;width:100%;aspect-ratio:1000/650;
  /* overflow stays visible so edge labels are never clipped */
  overflow:visible;border-radius:24px}
/* The frame lives on the artwork, not the box: a filter on .town-map would
   trace a shadow around every overlay chip as well. */
.town-art{display:block;width:100%;height:100%;border-radius:24px;
  border:1px solid #d8ddc6;background:#dde6ca;box-shadow:0 8px 0 #e4e5d6}

.map-stop{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:48px;min-height:48px;padding:0;background:none;
  transition:filter .15s}
.map-stop-icon{
  display:grid;place-items:center;
  width:var(--stop-size);height:var(--stop-size);border-radius:50%;
  font-size:calc(var(--stop-size) * .5);line-height:1;
  background:#fffdf3;border:2px solid #d5cfb6;
  box-shadow:0 4px 0 #c8c2aa,0 7px 14px #3b4a3524;
  transition:background .15s,transform .15s,box-shadow .15s,border-color .15s}
.map-stop strong{
  font-size:var(--stop-label);font-weight:700;line-height:1.15;white-space:nowrap;
  color:var(--green);background:#fffdf3f2;border:1px solid #ded8c1;border-radius:999px;
  padding:3px 9px;box-shadow:0 2px 0 #d5cfb8;
  transition:background .15s,color .15s,border-color .15s}

.map-stop:hover .map-stop-icon{transform:translateY(-3px);box-shadow:0 7px 0 #c8c2aa,0 10px 16px #3b4a3524}
/* The global button:active nudge would drop the centring transform. */
.map-stop:not(:disabled):active{transform:translate(-50%,-50%)}
.map-stop:not(:disabled):active .map-stop-icon{transform:translateY(2px);box-shadow:0 2px 0 #c8c2aa}
.map-stop:focus-visible{outline-offset:2px;border-radius:16px}

.map-stop.active{z-index:4}
.map-stop.active .map-stop-icon{background:var(--green);border-color:#2b4636;
  box-shadow:0 0 0 6px #3d604b26,0 4px 0 #2b4636}
.map-stop.active strong{background:var(--green);color:#fffdf1;border-color:#2b4636;box-shadow:0 2px 0 #2b4636}

.map-stop:disabled,.map-stop.locked{opacity:.52}
.map-stop:disabled .map-stop-icon,.map-stop.locked .map-stop-icon{filter:grayscale(.65);box-shadow:0 2px 0 #c8c2aa}

/* ---------------------------------------------------- clock / coins bar */
.map-topline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 0}
.map-topline>*{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  background:#f1efe1;border:1px solid #e2dcc7;border-radius:999px;padding:8px 15px;color:var(--ink)}
.map-topline .map-clock,.map-topline [data-topline=clock]{background:#f7ecd9;border-color:#ecd9b8;color:#8a6a3e}
.map-topline .map-coins,.map-topline [data-topline=coins]{background:#f8f0d3;border-color:#ecdfb2;color:#8b7238}
.map-topline .town-return{margin-left:auto}

.town-return{min-height:48px;padding:0 18px;border-radius:14px;
  background:#eef1e7;border:1px solid #d8dfce;color:var(--green);
  font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.town-return:hover{background:#e4ead9}

/* -------------------------------------------------- the place / job card */
.town-jobs{background:#fffdf7;border:1px solid #dce0d4;border-radius:18px;padding:18px;min-width:0}

.place-heading{font:clamp(20px,2.4vw,26px)/1.25 var(--serif);letter-spacing:-.4px;text-wrap:balance;margin-bottom:6px}
.place-description{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:14px;text-wrap:pretty}

.place-tasks{display:grid;gap:10px;margin:0}
@media(min-width:620px){.place-tasks{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}}

.place-job{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;text-align:left;min-height:64px;padding:12px 14px;
  background:#fffdf8;border:1px solid #e4e4d9;border-radius:14px;
  transition:background .15s,border-color .15s,transform .15s}
.place-job:not(:disabled):hover{background:#f4f5ea;border-color:#bdcbb9;transform:translateY(-1px)}
.place-job>span:first-child,.place-job .place-job-icon{display:grid;place-items:center;
  width:46px;height:46px;flex-shrink:0;font-size:26px;border-radius:12px;background:#e9eee4}
.place-job:nth-child(2n)>span:first-child,.place-job:nth-child(2n) .place-job-icon{background:#f5e9dc}
.place-job:nth-child(3n)>span:first-child,.place-job:nth-child(3n) .place-job-icon{background:#ece7f1}
.place-job strong{display:block;font-size:14px;font-weight:600;line-height:1.35}
.place-job small{display:block;font-size:12px;color:#8d9482;line-height:1.5;margin-top:3px}
.place-job .reward{font-size:12px;padding:4px 8px}
.place-job.done{background:#edf1e3;border-color:#cfdcc4}
.place-job.done strong{text-decoration:line-through;text-decoration-color:#9dac87}

/* School detour, locks, chapter progress, the "all done" note. */
.school-extras{margin-top:14px;padding:14px;background:var(--lavender);border:1px solid #ddd5ea;border-radius:14px}
.school-extras h3{font:19px/1.3 var(--serif);margin-bottom:5px}
.school-extras p{font-size:13px;line-height:1.6;color:#6b6480}
.school-extras>*+*{margin-top:9px}

.unlock-note{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 14px;
  border:1px dashed #d6cdb4;border-radius:12px;background:#fbf7ea;
  font-size:12px;line-height:1.55;color:#8a7f61}
.unlock-note strong{font-size:12px;color:#6f6444}

.progress-chapter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:11px 15px;border-radius:14px;background:#f2f4ea;border:1px solid #e0e4d4}
.progress-chapter small{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#8a9280}
.progress-chapter strong{font-size:13px;font-weight:600}
.progress-chapter .progress-track{flex:1 1 130px;min-width:90px;height:8px}

.work-done{display:flex;align-items:center;gap:13px;margin-top:14px;padding:15px;
  border-radius:16px;background:#e8efdf;border:1px solid #cfdcc4}
.work-done>span:first-child{font-size:30px;line-height:1}
.work-done strong{display:block;font:19px/1.3 var(--serif);font-weight:400}
.work-done p{font-size:13px;color:#6b7e6a;margin-top:3px;line-height:1.55}

/* ------------------------------------------------- roomy tablet layout  */
/* Landscape tablet and up: scene/map holds still on the left, the task list
   scrolls by itself on the right, and the page as a whole never scrolls. */
@media (min-width:760px) and (orientation:landscape),(min-width:1040px){
  body.has-town:not(.at-meal){height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  body.has-town:not(.at-meal) .topbar{flex:0 0 auto;height:72px}
  body.has-town:not(.at-meal) .brand{font-size:19px}
  body.has-town:not(.at-meal) .brand-icon{font-size:29px;padding:9px 7px}
  body.has-town:not(.at-meal) main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    padding-top:18px;padding-bottom:0;overflow:hidden}
  body.has-town:not(.at-meal) .welcome{flex:0 0 auto;margin-bottom:13px}
  body.has-town:not(.at-meal) .welcome h1{font-size:clamp(22px,2.6vw,30px);letter-spacing:-1px}
  body.has-town:not(.at-meal) .welcome p{font-size:11px;margin-top:5px}
  body.has-town:not(.at-meal) .wallet{padding:9px 16px}
  body.has-town:not(.at-meal) .wallet strong{font-size:20px}

  body.has-town:not(.at-meal) .game-layout{flex:1 1 auto;min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(0,38%)}
  body.has-town:not(.at-meal) .room-card{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
  body.has-town:not(.at-meal) .tablet{height:100%;min-height:0;display:flex;flex-direction:column;
    overflow:hidden;box-shadow:0 4px 0 #e8e9de}
  body.has-town:not(.at-meal) .tablet-heading,
  body.has-town:not(.at-meal) .tabs{flex:0 0 auto}
  body.has-town:not(.at-meal) #panel{flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-right:7px;margin-right:-7px}

  body.has-town:not(.at-meal) .bottom-row{flex:0 0 auto;margin:12px 0 6px}
  body.has-town:not(.at-meal) .tip strong{margin-bottom:1px}
  body.has-town:not(.at-meal) footer{flex:0 0 auto;padding:9px 0 11px}

  /* Keep the whole map inside the fixed left column without breaking its
     aspect ratio — width is the only lever, so the art and the --x/--y
     percentages can never drift apart. */
  body.has-town:not(.at-meal) .town-map{
    width:min(100%,max(280px,calc((100dvh - 430px) * 1.538)));
    margin-inline:auto}
  body.has-town:not(.at-meal) #town-view{padding:16px 16px 18px}
  body.has-town:not(.at-meal) .objective{padding:14px 18px;gap:11px}
  body.has-town:not(.at-meal) .objective strong{font-size:16px}
}

/* Wide desktop only: the map can afford a job column beside it. */
@media (min-width:900px) and (orientation:portrait),(min-width:1500px){
  .town-layout{grid-template-columns:minmax(0,1fr) minmax(0,290px)}
}

/* Portrait tablets: one column, so the map gets the full width and the stops
   stay far apart. */
@media (min-width:761px) and (orientation:portrait){
  body.has-town:not(.at-meal) .game-layout{grid-template-columns:minmax(0,1fr)}
  body.has-town:not(.at-meal) .tablet{max-width:none}
  .town-map{--stop-size:clamp(46px,5.6vw,58px);--stop-label:clamp(12px,1.5vw,14px)}
}

/* Phones: hand the map a little more of the screen, and trim the chips so
   neighbouring stops keep clear air between them. */
@media (max-width:560px){
  body.has-town main{padding-left:12px;padding-right:12px}
  #town-view{padding:14px 12px 16px}
  .town-map{--stop-size:40px;--stop-label:11px;border-radius:18px}
  .town-art{border-radius:18px}
  .map-stop{gap:3px}
  .map-stop strong{padding:2px 7px;box-shadow:0 1px 0 #d5cfb8}
  .town-header{margin-bottom:11px}
  .town-header p{font-size:12px}
  .map-topline>*{font-size:12px;padding:7px 12px}
  .map-topline .town-return{margin-left:0;flex:1 1 100%;justify-content:center}
  .town-jobs{padding:14px;border-radius:15px}
  .place-job{gap:10px;padding:11px}
  .place-job>span:first-child,.place-job .place-job-icon{width:40px;height:40px;font-size:23px}
}
@media (max-width:380px){
  .town-map{--stop-size:38px;--stop-label:10px}
  .map-stop strong{padding:2px 6px}
}

/* Coarse pointers: nothing tappable smaller than 48px. */
@media (pointer:coarse){
  #map-toggle,.town-return,.place-job,.map-stop{min-height:48px}
  #map-toggle{min-width:48px;font-size:12px}
  .map-stop{min-width:48px}
}

/* --------------------------------------------------------------------------
   Overrides for the older sheets. Kept here on purpose so style.css and
   workspace.css stay untouched; this file is loaded last.
   -------------------------------------------------------------------------- */

/* Sorting board: pieces were large enough to sit on top of one another at the
   app's percentage positions. Trim them and give each a cream halo so any
   remaining contact still reads as two separate objects. */
.board-sort .drag-piece{max-width:22%;min-width:56px;min-height:66px;padding:7px 8px;
  box-shadow:0 4px 0 #d9dccd,0 0 0 3px #fffdf7}
.board-sort .drag-piece.dragging{box-shadow:0 14px 28px #2a362d40,0 0 0 3px #fffdf7}
.board-sort .piece-icon{font-size:30px}
.board-sort .piece-label{font-size:12px;line-height:1.15}
.board-sort .drop-zone{background:#fffdf7d9;border-width:3px}

/* Cutlery board: the striped cloth fought with the drop targets. Calm the
   background and separate the targets with their own rings. */
.board-cutlery{background:linear-gradient(#f6f1e3,#ece5d3)}
.board-cutlery .cutlery-mat{background:#eef2e8;border-color:#c8d5c1}
.board-cutlery .drop-zone{background:#fffdf7f2;border-width:3px;box-shadow:0 0 0 5px #efe8d6}
.board-cutlery .drop-zone:nth-of-type(2n){background:#f4f8f0f2;box-shadow:0 0 0 5px #e4ecdd}
.board-cutlery .drop-zone.active{box-shadow:0 0 0 6px #7f9a7833}
.board-cutlery .zone-label{font-size:14px;color:#4f5c4b}
.board-cutlery .drag-piece{max-width:22%}

/* Never let a rogue wide child push the page sideways. */
html,body{max-width:100%;overflow-x:hidden}

@media (prefers-reduced-motion:reduce){
  .map-stop,.map-stop-icon,.map-stop strong,.place-job{transition:none!important}
  .map-stop:hover .map-stop-icon{transform:none}
}