/* Claude-authored design pass, integrated and browser-reviewed 20 September 2026. */
/* ===========================================================================
   claude-design.css — Feet on the Table: material + clarity pass.
   Load LAST, after iteration.css.

   Paint only. Every rule below changes colour, background, shadow, border
   COLOUR (never width), text colour/weight, or adds an absolutely-positioned,
   pointer-events-free pseudo-element inside a parent that is ALREADY
   positioned. Nothing here sets display, position (one documented exception),
   width, height, padding, margin, transform, overflow, pointer-events or
   touch-action, so all 16 map stops, the home jobs, Eat + feet and the drag
   geometry stay exactly where iteration.css puts them.
   =========================================================================== */

/* ------------------------------------------------------------ 1 · palette */
:root{
  --fot-paper:#fffdf5; --fot-edge:#ded7c0; --fot-ink:#33473c;
  --fot-quiet:#6c7767; --fot-green:#3d604b; --fot-leaf:#8fa47f;
  --fot-plum:#8a76ab;  --fot-honey:#e0c079; --fot-clay:#bf8360;
  --fot-focus:#564089;
}

/* -------------------------------------------------- 2 · shell and header */
.topbar{background:linear-gradient(#fffefb,#f7f5ea);border-bottom-color:var(--fot-edge)}
.brand-icon{background:radial-gradient(circle at 34% 28%,#f5f0de,#e2e3d1);box-shadow:inset 0 0 0 1px #d9dac7,0 2px 0 #e3e4d2}
.tagline{color:#84887a}
.save-status{color:#5c7360}
.save-status.offline{color:#96652f}
.icon-button{background:linear-gradient(#fffdf6,#f3f2e5);border-color:#d1d6c4;box-shadow:0 2px 0 #e5e6d7;color:#4c5948}
.icon-button:hover{background:#faf8ec;border-color:#b5c2a9}
.icon-button:active{box-shadow:0 1px 0 #e5e6d7}
.eyebrow{color:#868a75}
.welcome p{color:var(--fot-quiet)}
.wallet{background:linear-gradient(#f7f3e4,#eee9d7);border-color:#e0d9c2;box-shadow:inset 0 1px 0 #fffdf2,0 2px 0 #e9e4d1}
.coin{background:radial-gradient(circle at 34% 28%,#f9e9b6,#e2c06c);box-shadow:inset 0 0 0 2px #fbf1cf,0 1px 0 #c8a65a}
.wallet small{color:#7f7a63}

/* ------------------------------------------------- 3 · room card and scene */
.room-card{background:linear-gradient(#fffefb,#fffdf5);border-color:var(--fot-edge);box-shadow:0 4px 0 #edecde}
.room-header{background:linear-gradient(#fdfcf6,#f6f5ea);box-shadow:inset 0 -1px 0 #e9e8da}
.live-dot{box-shadow:0 0 0 3px #8194751f}
.day-chip{background:#ecead9;color:#69725f;box-shadow:inset 0 0 0 1px #dedbc7}
.room{box-shadow:inset 0 0 70px #6b5b3b14,inset 0 -1px 0 #e2dccb}
.room-speech{background:linear-gradient(#fffdf4,#fcf7e6);border-color:#ded4bc;color:#47533f;box-shadow:0 3px 0 #d9cbb544,0 7px 14px #6b5c3d14}
.room-speech:after{background:#fcf7e6;border-color:#ded4bc}
.scene-badge{color:#51604c;background:#faf4e6e8;border-color:#eadfc9}
.scene-label{color:#606c59;background:#fbf8efd6;border-color:#e3dbc6}
.objective-icon{background:linear-gradient(#efeaf6,#e5dff0);box-shadow:inset 0 0 0 1px #ffffffa6}
.objective small{color:#79826f}
.objective div>span{color:var(--fot-quiet)}
.goal-time{border-color:#cfd4c2;background:#fdfcf2}
.level-strip{background:linear-gradient(#f7f8f0,#f2f4e9)}
.level-strip>span{color:#737e6b}
.level-dot{box-shadow:inset 0 0 0 1px #00000012}
.level-dot.done{background:#6d8a72}

/* ------------------------------------------------ 4 · tablet and controls */
.tablet{background:linear-gradient(#fffefa,#fdfbf0);border-color:var(--fot-edge);box-shadow:0 7px 0 #e8e9de,0 14px 24px #3c4a3a12}
.tablet-heading{color:#7d8672}
.tabs{background:#edefe4;box-shadow:inset 0 1px 2px #3c4a3a1a}
.tabs button{color:#6b7566}
.tabs button:hover{color:var(--fot-green)}
.tabs button.active{background:#fffdf5;color:var(--fot-green);box-shadow:0 1px 0 #cfd6c3,0 2px 6px #354b3f14}
.panel-title{color:var(--fot-ink)}
.panel-description,.place-heading p{color:#68735f}
.chore-card{background:linear-gradient(#fffdf6,#fbf9eb);border-color:#e1dfcf;box-shadow:0 2px 0 #ecead9}
.chore-card:hover{background:linear-gradient(#f9faf1,#f3f5e8);border-color:#b6c5b1;box-shadow:0 3px 0 #dfe4d4}
.chore-card:active{box-shadow:0 1px 0 #ecead9}
.chore-icon{box-shadow:inset 0 0 0 1px #ffffffbf,0 1px 0 #00000012}
.chore-info strong{color:var(--fot-ink)}
.chore-info small{color:#7b8474}
.chore-arrow{color:#98a58d}
.reward{background:linear-gradient(#fbf2d5,#f4e8bf);color:#86682c;box-shadow:inset 0 0 0 1px #ecdcab}
.primary{background:linear-gradient(#4a7056,#3a5c47);box-shadow:0 3px 0 #2b4836,inset 0 1px 0 #ffffff2b}
.primary:hover{background:linear-gradient(#456a51,#2e513c)}
.primary:active{box-shadow:0 1px 0 #2b4836,inset 0 1px 0 #ffffff2b}
.secondary,.small-button{background:linear-gradient(#f8f9f0,#ecefe1);border-color:#cdd5c1;color:#4a5847;box-shadow:0 2px 0 #dfe2d2}
.secondary:hover,.small-button:hover{background:#f2f5e8;border-color:#b4c3a8}
.secondary:active,.small-button:active{box-shadow:0 1px 0 #dfe2d2}
.text-button{color:#7c8775}
.progress-track{background:#e7ebdb;box-shadow:inset 0 1px 2px #3c4a3a24}
.progress-fill{background:linear-gradient(90deg,#aab88f,#8ba077)}
.challenge-meter .progress-fill{background:linear-gradient(90deg,#bdadd3,#9b86bb)}
.deadline-label{color:#7b856f}
.deadline-label strong{color:#4d6a4c}
.quiet-note{color:#7d8674}
.tip>span{color:#a4895f}
.tip p>span{color:#7b8170}
.inventory-count{color:#7d8676}
footer{color:#8b8f7e}

/* -------------------------------------------- 5 · shop and travel cards */
.shop-item{border-bottom-color:#e5e3d2}
.shop-icon{background:radial-gradient(circle at 32% 26%,#fdefe1,#f2dcc6);box-shadow:inset 0 0 0 1px #ffffffab,0 2px 0 #00000012}
.shop-top strong{color:var(--fot-ink)}
.shop-top p{color:#78826d}
.shop-bottom{color:#5f6b58}
.travel-card{background-color:#fffdf5;background-image:linear-gradient(90deg,#ddc99c 0 4px,#fffdf500 4px),linear-gradient(#fffdf5,#f6f2e1);color:#41543f;box-shadow:inset 0 0 0 1px #e5dec8,0 3px 0 #ebe5d2}
.travel-card:hover{background-image:linear-gradient(90deg,#cbb27c 0 4px,#fffdf500 4px),linear-gradient(#fffefa,#f2eddb);box-shadow:inset 0 0 0 1px #d8cfaf,0 3px 0 #e3dcc4}
.travel-card:active{box-shadow:inset 0 0 0 1px #d8cfaf,0 1px 0 #e3dcc4}
.travel-progress{background:linear-gradient(#f3edd9,#e7e0c7);color:#586248;box-shadow:inset 0 0 0 1px #dcd2b2}
.town-map{box-shadow:inset 0 0 0 1px #d6cdb1,0 3px 0 #eae5d3}
.map-stop strong{color:#39503f;text-shadow:0 1px 0 #fffdf2,0 0 6px #fffdf2cc}
.map-stop.active strong{text-shadow:none}

/* ------------------------------------------- 6 · meal, food and the dock */
.food-option{position:relative;background:linear-gradient(#fffdf6,#f4f1e1);color:#4a5545;box-shadow:inset 0 0 0 1px #ffffffb3,0 2px 0 #e6e2cf}
.food-option:hover{background:linear-gradient(#fffefa,#f2f2e2);box-shadow:inset 0 0 0 1px #fff,0 2px 0 #dcdfcc}
.food-option:active{box-shadow:inset 0 0 0 1px #fff,0 1px 0 #dcdfcc}
.food-option.selected{background:linear-gradient(#eff4e4,#e2ebd2);border-color:#8ea37e;color:#37533d;box-shadow:0 0 0 3px #8ea37e38,0 2px 0 #ccd6bb}
.food-option.selected::after{content:'\2713';position:absolute;top:4px;right:6px;font-size:11px;line-height:1;color:#4a7350;pointer-events:none}
.meal-food-preview{background:linear-gradient(#fffdf4,#f6f2e1);box-shadow:inset 0 0 0 1px #e6dfc8}
.eat-dock{border-top-color:#d5d9c6;background:linear-gradient(#fffdf5,#faf7e8);box-shadow:0 -7px 12px #fffdf5}
.bag-item{background:linear-gradient(#fffdf6,#f5f2e3);box-shadow:inset 0 0 0 1px #ffffffb3,0 2px 0 #e6e2cf}
.bag-item:hover{box-shadow:inset 0 0 0 1px #fff,0 3px 0 #ddddc9}
.attention{background:linear-gradient(#f7ede1,#f0e2cd);color:#5a5647;box-shadow:inset 0 0 0 1px #e9ddc6}
.attention.safe{background:linear-gradient(#edf3e5,#e2ebd5);box-shadow:inset 0 0 0 1px #d5e0c7}
.attention.warning{background:linear-gradient(#f9e7d3,#f4d8bc);box-shadow:inset 0 0 0 1px #eccdaa}
.attention strong{color:#47583f}
.attention p{color:#726f5f}
.distraction{background:linear-gradient(#f8f9f1,#f1f3e7);border-color:#dde2d2;color:#4c5a48}
.distraction span:last-child{color:#6f8064}
.feet-button{background:linear-gradient(#78618f,#67507e);text-shadow:0 1px 0 #6d5f8a;box-shadow:0 4px 0 #82749c,inset 0 1px 0 #ffffff33}
.feet-button:hover{background:linear-gradient(#705987,#5f4976)}
.feet-button.held{background:linear-gradient(#5f8a63,#4c7350);box-shadow:0 2px 0 #34583b,inset 0 1px 0 #ffffff2e}
#last-trick{color:#6a7561}

/* ----------------------------------------- 7 · room discovery interactions */
.room-target{background:linear-gradient(#fffdf3f5,#f5efdce8);border-color:#ded8c0;color:#35543f;box-shadow:0 3px 10px #263a2820,inset 0 0 0 1px #fffdf2cc}
.room-target small{color:#5b6753}
.room-target.hovered{background:linear-gradient(#e6f2d4,#d3e8bd);box-shadow:0 6px 14px #3d5a3033,0 0 0 4px #68875433}
.discovery-ghost{filter:drop-shadow(0 5px 4px #29392066) drop-shadow(0 0 9px #fff3cf99)}
.room-prop{filter:drop-shadow(0 3px 2px #67533c66)}

/* -------------------------------------------------------- 8 · the salon */
.style-request{background:linear-gradient(#fffaea,#fcf0cd);color:#67512f;box-shadow:inset 0 0 0 1px #ecd9a6,0 5px 12px #6b5a2e1f}
.style-request::after{content:'';position:absolute;left:calc(50% - 6px);bottom:-6px;width:12px;height:12px;background:#fcf0cd;border-right:1px solid #ecd9a6;border-bottom:1px solid #ecd9a6;transform:rotate(45deg);pointer-events:none}
.salon-head{background:radial-gradient(circle at 38% 32%,#f1bf8f,#e0a271 60%,#cd8b5d);border-color:#6b4429;box-shadow:0 14px 0 #b38563,inset 0 -10px 16px #a86f4a33}
.salon-head::before{background:linear-gradient(#6d4832,#4c3020)}
.salon-head::after{background:linear-gradient(#a9c2b6,#8aa89c)}
.salon-face{color:#4d3628;text-shadow:0 1px 0 #ffffff5c}
.hair-lock{background:linear-gradient(90deg,#38261f 0 18%,#7a5235 52%,#43301f);border-color:#8a6444;box-shadow:0 1px 2px #3a271f33}
.hair-lock.styled{background:linear-gradient(90deg,#523623 0 18%,#a97b4c 52%,#5e3d28);border-color:#b08a5c;box-shadow:0 1px 3px #3a271f3d,inset 0 0 0 1px #e2c28f40}

/* ------------------------------------------------------ 9 · the harvest */
.crop-row-label{color:#486140;border-bottom-color:#9aac82;background:linear-gradient(#ffffff00,#8fa47f17);text-shadow:0 1px 0 #ffffff8c}
.crop-plant{filter:drop-shadow(0 4px 3px #4a3e2833)}
.crop-plant.young{filter:drop-shadow(0 3px 2px #4a3e2826) saturate(.8) brightness(1.04)}
.crop-plant.cut{filter:grayscale(.45) drop-shadow(0 2px 2px #4a3e281f)}

/* -------------------------------------------------- 10 · the hidden room */
.search-room{background-color:#ece0c8;background-image:repeating-linear-gradient(90deg,#00000000 0 26px,#8a6f4a14 26px 28px),linear-gradient(#ece0c8 0 53%,#cdb590 53%);border-color:#e0c9a6;box-shadow:inset 0 0 0 3px #fffdf24d,inset 0 22px 30px #8a6f4a1a}
.search-room::before{content:'';position:absolute;left:0;right:0;top:53%;bottom:0;background:repeating-linear-gradient(90deg,#00000014 0 2px,#00000000 2px 58px);pointer-events:none}
.search-room::after{content:'';position:absolute;left:0;right:0;top:53%;height:7px;background:linear-gradient(#fffaf0,#d6c09b);pointer-events:none}
.search-furniture{filter:drop-shadow(0 6px 6px #5b452a3d)}
.hidden-object{background:radial-gradient(circle at 50% 45%,#fff8e3ab,#fff8e300 70%);text-shadow:0 2px 2px #654c29,0 0 9px #fff3d18c}
.hidden-object:hover{background:radial-gradient(circle at 50% 45%,#fff2cbe0,#fff2cb3d 72%)}
.hidden-object.found{filter:grayscale(.6)}

/* ------------------------------------------------------ 11 · the patient */
.patient-head{background:radial-gradient(circle at 38% 30%,#e9b183,#d59968 64%,#c5885a);color:#4c3427;box-shadow:inset 0 -7px 12px #a86f4a2e}
.patient-shirt{background:linear-gradient(#b8d7db,#9cc2c8);border-color:#74a1a6;box-shadow:inset 0 6px 0 #ffffff59,inset 0 -12px 18px #5d868c26}
.patient-legs{box-shadow:inset 0 0 0 1px #ffffff26}
.care-site{background:#fff8e5c4;border-color:#bd7f60;color:#a3584a;box-shadow:0 0 0 4px #ba785a1f}
.care-site.done{background:#d7edc1;border-color:#79a36a;color:#3d6a3a;box-shadow:0 0 0 4px #79a36a2e}

/* ------------------------------------------------------ 12 · the bakery */
.task-board .mixing-bowl{border-color:#c4d9d2;background:radial-gradient(ellipse at 42% 32%,#f0dcb2 0 52%,#d7bf92 72%,#c0a87e);box-shadow:inset 0 12px 20px #ffffff40,inset 0 -16px 24px #8d75492e,0 8px 0 #b6cbc4}
.dough-swirl{color:#bd9c62;text-shadow:0 2px 0 #ffffff59}
.task-board .bakery-shelf{background-image:repeating-linear-gradient(90deg,#00000000 0 40px,#8a6a3f14 40px 43px),linear-gradient(#ecd0a5 0 78%,#c09a6b 79%);border-color:#b6946a;box-shadow:inset 0 2px 0 #fff4dd80,0 -4px 9px #8a6f4a1a}
.bakery-shelf>span{color:#6b4d2e}

/* ------------------------------------------- 13 · adventure board surfaces */
.board-adventure.task-board{box-shadow:inset 0 2px 12px #354b3f14,inset 0 0 0 1px #ffffff73}
.board-adventure.task-board::before{background-image:linear-gradient(#ffffff42,#0000000f),repeating-linear-gradient(90deg,#00000000 0 2px,#00000012 2px 4px,#00000000 4px 64px)}
.board-adventure .adventure-stage{background:linear-gradient(#fffdf5,#faf7ea);color:#7d8672}
.board-adventure .adventure-title{color:var(--fot-ink)}
.board-adventure .adventure-order{background:linear-gradient(#fffdf5f7,#f9f5e6f7)}
.adventure-order li,.adventure-order .order-line{background:linear-gradient(#f4f4e8,#eceade);box-shadow:inset 0 0 0 1px #ffffffa6}
.board-adventure .drop-zone.adventure-target:not(.pizza-base){background:#fffdf7d9;box-shadow:inset 0 0 0 2px #ffffff8f}
.board-adventure .adventure-target .zone-label{color:#4d5a4a}
.board-adventure .adventure-target.active{box-shadow:0 0 0 6px #7f9a7833,inset 0 0 0 2px #ffffffab}
.board-adventure .adventure-target.done{box-shadow:inset 0 0 0 2px #ffffffab,0 2px 0 #cfdcc4}
.board-adventure .drag-piece.adventure-piece{background:linear-gradient(#fffdf7,#f6f2e2);box-shadow:0 4px 0 #0000001a,0 0 0 3px #fffdf7,0 7px 13px #3c4a3a1c}
.board-adventure .adventure-piece .piece-label{color:#495645}
.board-adventure .adventure-piece:hover{background:linear-gradient(#fffefb,#f3f5e4);box-shadow:0 4px 0 #00000014,0 0 0 3px #fffdf7,0 9px 17px #3c4a3a24}
.board-adventure .drag-piece.adventure-tool{background:linear-gradient(#fbf2ca,#f1e1a6);border-color:#dcc36e;box-shadow:0 4px 0 #d9c37f,0 0 0 3px #fffdf7,0 8px 15px #7a682e26}
.board-adventure .adventure-choice{background:linear-gradient(#fffdf7,#f8f4e5);box-shadow:0 4px 0 #0000001a,0 7px 13px #3c4a3a14}
.board-adventure .adventure-choice:not(:disabled):hover{background:linear-gradient(#f9fbf2,#eef2e1)}
.board-adventure .adventure-choice.chosen{background:linear-gradient(#eff5e5,#e3ecd5)}
.board-adventure .adventure-choice.wrong{background:linear-gradient(#f9ecdf,#f2dfcb)}
.board-adventure .adventure-result{background:linear-gradient(#fffdf5f7,#faf6e8f7)}
.adventure-mark{box-shadow:inset 0 0 0 1px #ffffff4d}

/* ----------------------------------------- 14 · modal and legacy task art */
dialog{background:linear-gradient(#fffefa,#fdfbef);border-color:var(--fot-edge);box-shadow:inset 0 2px 0 #fffefb,0 30px 100px #27352940}
.modal-heading h2{color:var(--fot-ink)}
.modal-heading button{background:#f0f1e5;color:#4d5948;box-shadow:inset 0 0 0 1px #e0e2d0}
.modal-copy{color:#68735f}
.task-timer{color:#8d6a39}
.task-area{background:linear-gradient(#f5f4ea,#eeece0);border-color:#e0e1d4}
.plate{background:radial-gradient(circle at 38% 30%,#fffdf5,#f2f3e5);box-shadow:inset 0 0 0 5px #ecf1e8,0 4px 0 #dadfd1,0 10px 18px #3c4a3a1a}
.dirt{background:radial-gradient(circle at 35% 30%,#c5a574,#a78459)}
.tidy-grid button{background:linear-gradient(#ece5d6,#e2dac7);box-shadow:inset 0 0 0 1px #ffffff80,0 2px 0 #d5ccb8}
.task-input,.code-input{border-color:#b5c2a8;background:#fffefa}
.feedback{color:#8a6845}
.journal-list{background:#eff1e8;color:#4e5a4c}
#toast{background:linear-gradient(#3f5c49,#31483a);box-shadow:inset 0 1px 0 #ffffff1f,0 6px 20px #24392b40}
.stats{background:linear-gradient(#f3f4ea,#eceee2);box-shadow:inset 0 0 0 1px #ffffff9e}
.bonus{background:linear-gradient(#f7ecbd,#f0e0a6);color:#816a38}

/* ------------------------------------------------- 15 · focus and contrast */
button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--fot-focus);outline-offset:3px}
.board-adventure .adventure-piece:focus-visible,
.board-adventure .adventure-tool:focus-visible,
.board-adventure .adventure-choice:focus-visible{outline-color:var(--fot-focus)}
.board-adventure .adventure-target.focus-within,
.board-adventure .adventure-target:focus-visible{outline-color:#4f7350}
.hidden-object:focus-visible,.map-stop:focus-visible,.bag-item:focus-visible,.food-option:focus-visible{box-shadow:0 0 0 3px #fffdf5e0}
@media (forced-colors:active){
  button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid Highlight;outline-offset:3px}
  .food-option.selected,.care-site.done,.adventure-choice.chosen{outline:2px solid Highlight;outline-offset:-3px}
}