/* Approved tactile homepage, 2026-09-28. Original sky, ocean and saved island
   stay owned by index.html/home-island-preview.js. Shared sg-button material
   lives in tokens.css; this file owns the homepage layout. */
body.home-coastal{
  --home-paper:#fff9e9;--home-ink:#214b40;--home-muted:#576d61;--home-sea:#2f6f4e;--home-deep:#205443;
  --home-soft:#e4eed9;--home-rim:#ddd5bf;--home-edge:#c9bea2;
  --home-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --home-heading:'Baloo 2','Hiragino Maru Gothic ProN',var(--home-font);
  --home-safe-top:env(safe-area-inset-top,0px);--home-safe-bottom:env(safe-area-inset-bottom,0px);
  --home-left:env(safe-area-inset-left,0px);--home-right:env(safe-area-inset-right,0px);
  font-family:var(--home-font);color:var(--home-ink);height:auto;min-height:100svh;overflow-x:hidden;overflow-y:auto;
}
.home-coastal .app{height:auto;min-height:100svh;max-width:560px;padding:14px max(20px,var(--home-right)) calc(118px + var(--home-safe-bottom)) max(20px,var(--home-left))}
.home-coastal .top{flex:none;overflow:visible;padding-top:var(--home-safe-top)}
.home-coastal .hd{min-height:44px;padding-right:110px;gap:10px}
.home-coastal .mark{width:38px;height:38px;border:2px solid #fff5d9;border-radius:15px;background:var(--home-paper);box-shadow:0 3px 0 #bbae8ba6}
.home-coastal .wm{font:800 19px/1.2 var(--home-heading);letter-spacing:.1em}
.home-coastal .greet{display:flex;align-items:flex-start;flex-wrap:wrap;gap:7px 10px;padding:21px 0 0}
.home-coastal .greet h1{flex-basis:100%;font:800 31px/1.15 var(--home-heading);letter-spacing:-.5px}
.home-coastal .greet p{order:1;flex-basis:100%;margin:0;font:600 13px/1.5 var(--home-font);color:var(--sky-ink)}
.home-coastal .chip{order:2;margin-top:5px;max-width:100%;white-space:normal;padding:5px 9px;border-radius:12px;font:600 11px/1.5 var(--home-font);color:var(--home-ink);background:var(--home-paper);border:1px solid var(--home-rim);box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--home-edge);backdrop-filter:none;-webkit-backdrop-filter:none}
.home-coastal #drewLangToggle{position:absolute;top:calc(14px + var(--home-safe-top));right:max(20px,calc((100vw - 520px)/2),var(--home-right));min-height:44px;padding:8px 11px;border:1px solid var(--home-rim);border-radius:16px;background:linear-gradient(#fffdf5,#f5e9cf);color:var(--home-deep);font:700 13px/1.2 var(--home-font);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--home-edge);z-index:10;transition:transform 150ms ease,box-shadow 150ms ease}
.home-coastal #drewLangToggle:active{transform:translateY(3px);box-shadow:inset 0 1px 1px #214b4020,0 1px 0 var(--home-edge)}
.home-coastal #hero{height:clamp(268px,34svh,330px);flex:none;margin:7px -4px 16px;text-decoration:none;opacity:1;overflow:hidden}
.home-coastal :is(#islLabel,#islAction){opacity:1}
.home-coastal #islLabel{top:13px;left:16px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;color:#fff9e9;text-shadow:0 1px 3px #143e4acc;font:700 10px/1.5 var(--home-font);letter-spacing:.16em}
.home-coastal #islAction{left:4px;right:4px;bottom:10px;min-height:59px;gap:12px;padding:13px 18px;font-family:var(--home-heading);font-size:20px;font-weight:800;white-space:normal;text-align:center}
.home-coastal #islAction svg{width:21px;height:21px;stroke-width:2.5}
.home-coastal #questBadge{display:none!important}
.home-coastal #homeIslandNote{position:absolute;bottom:84px;left:12px;right:12px;max-width:none;text-align:center;font:500 12px/1.5 var(--home-font);color:#fff9e9;text-shadow:0 1px 3px #143e4acc;z-index:3}
.home-coastal #homeLiveIsland{position:absolute;left:0;top:30px;width:100%;height:calc(100% - 125px);object-fit:contain;pointer-events:none;filter:none}
.home-coastal #homeLiveIsland[hidden]{display:none}
.home-coastal #stageWrap{visibility:hidden}
.home-coastal #homeIslandPlaceholder{position:absolute;inset:31px 10px 108px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.home-coastal #homeIslandPlaceholder svg{width:100%;height:100%;max-width:350px;overflow:visible}
.home-coastal #homeIslandLoading{position:absolute;left:50%;bottom:87px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:5px 12px;border-radius:12px;background:var(--home-paper);color:var(--home-deep);text-align:center;font:400 12px/1.5 var(--home-font)}
.home-coastal.home-has-preview #homeIslandPlaceholder,.home-coastal.home-has-preview #homeIslandLoading{display:none}
.home-coastal .mission{margin-top:0;padding:15px 13px 16px;gap:10px;text-align:left;justify-content:flex-start;backdrop-filter:none;-webkit-backdrop-filter:none}
.home-coastal .mission .ava{position:relative;width:53px;height:60px;flex-basis:53px;background:none;color:var(--home-deep);border-radius:15px;overflow:visible}
.home-coastal .mission .ava svg{width:25px;height:25px}
.home-coastal .home-object{object-fit:contain;display:block;filter:drop-shadow(0 3px 2px #2742321a)}
.home-coastal .mission .home-object{width:66px;height:66px;max-width:none;position:absolute;left:-7px;top:-5px}
.home-coastal .home-object + svg{display:none}
.home-coastal .mission .k{font:600 10px/1.5 var(--home-font);color:var(--sg-ink);opacity:1;letter-spacing:.035em}
.home-coastal .mission .v{font:800 19px/1.3 var(--home-heading);color:var(--sg-ink);margin:3px 0}
.home-coastal .mission :is(.s,.rd,.hb){font:400 12px/1.5 var(--home-font);color:var(--sg-ink);opacity:1;margin-top:2px;text-shadow:none}
.home-coastal .mission .go{opacity:1;color:var(--sg-ink);width:25px;height:34px;justify-content:center;align-items:center}
.home-coastal .duo{gap:14px;margin-top:22px}
.home-coastal .qcard{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-width:0;min-height:147px;padding:12px 14px 14px;gap:0;text-align:left;backdrop-filter:none;-webkit-backdrop-filter:none;--sg-radius:21px;--sg-depth:5px}
.home-coastal .qcard .ic{position:relative;width:43px;height:40px;border-radius:12px;margin-bottom:7px;flex:none;overflow:visible}
.home-coastal .qcard.resume .ic{background:none;color:var(--home-deep)}
.home-coastal .qcard.resume .home-object{position:absolute;width:56px;height:56px;max-width:none;left:-8px;top:-9px}
.home-coastal .qcard.talk .ic{width:37px;height:37px;border-radius:13px;border:1px solid #e8c5b0;box-shadow:inset 0 1px 0 #fff,0 2px 0 #ceb191;overflow:hidden}
.home-coastal .qcard .k{font:500 11px/1.5 var(--home-font);color:var(--home-muted);opacity:1}
.home-coastal .qcard .v{font:800 16px/1.35 var(--home-heading);color:var(--home-ink);white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip;margin:3px 0 7px}
.home-coastal .qcard .s{font:400 11px/1.5 var(--home-font);color:var(--home-muted);opacity:1;white-space:normal;overflow:visible;margin-top:auto;text-shadow:none}
.home-coastal .qcard .chev{right:13px;top:28px;font-size:21px;color:var(--home-deep);opacity:.8}
.home-coastal #dock{position:fixed;left:8px;right:8px;bottom:0;z-index:20;margin:0;padding:5px max(4px,var(--home-right)) calc(8px + var(--home-safe-bottom)) max(4px,var(--home-left));gap:2px;border:1px solid var(--home-rim);border-bottom:0;border-radius:25px 25px 0 0;background:linear-gradient(#fffdf5,#f9f1df);box-shadow:inset 0 2px 0 #fff,0 -3px 18px #123b4f20;backdrop-filter:none;-webkit-backdrop-filter:none}
.home-coastal #dock a{flex:1 1 0%;min-width:44px;min-height:64px;padding:4px 0 3px;flex-direction:column;gap:2px;justify-content:center;border-radius:17px;color:var(--home-muted);position:relative;transition:transform 140ms ease,background 140ms ease}
.home-coastal #dock a:last-child{flex-grow:1.25}
.home-coastal #dock a.on{background:var(--home-soft);box-shadow:inset 0 1px 0 #fff,0 2px 0 #baccb1;color:var(--home-deep)}
.home-coastal #dock a:active{transform:translateY(2px)}
.home-coastal #dock a span{display:block;font:500 11px/1.4 var(--home-font)}
.home-coastal #dock a.on span{font-weight:800}
.home-coastal #dock .home-nav-object{display:block;width:36px;height:36px;object-fit:contain;flex:none}
.home-coastal #dock .home-nav-object + svg{display:none}
.home-coastal #dock a .home-due{position:absolute;top:0;left:calc(50% + 8px);background:var(--home-sea);color:#fff;font:700 10px/1.3 var(--home-font);padding:1px 4px;border-radius:9px;border:1px solid var(--home-paper)}
.home-coastal :is(a,button):focus-visible{outline:3px solid #fff9e9;outline-offset:5px}
.home-coastal #dock a:focus-visible,.home-coastal #drewLangToggle:focus-visible{outline-color:var(--home-deep)}
.home-coastal #hero:focus-visible{outline-offset:0;border-radius:12px}
.home-coastal #hero:focus-visible .sg-button{outline-color:#fff9e9;outline-offset:5px}
.home-coastal .loading-resident{animation:home-loading-bob 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
.home-coastal .loading-tide{animation:home-loading-tide 3.5s ease-in-out infinite}
@keyframes home-loading-bob{50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes home-loading-tide{50%{opacity:.45}}
.home-coastal #homeIslandBeacon{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffe0a6;box-shadow:0 0 8px 4px #ffcf8e88;pointer-events:none;animation:home-beacon 5s ease-in-out infinite}
.home-coastal #homeIslandBeacon[hidden]{display:none}
@keyframes home-beacon{0%,100%{opacity:.55}50%{opacity:.9}}
@media(max-height:740px) and (max-width:600px){
  .home-coastal .app{padding-top:10px}
  .home-coastal .greet{padding-top:13px;gap:5px 9px}.home-coastal .greet h1{font-size:27px}
  .home-coastal #hero{height:240px;margin-top:2px;margin-bottom:12px}
  .home-coastal .mission{padding:10px 11px}.home-coastal .mission .v{font-size:18px}
  /* 次のレッスン in full above the dock at 375x667 (founder, 1 Oct): it sat 29px under the dock once the daily card joined */
  .home-coastal .duo{margin-top:10px;gap:12px}.home-coastal .qcard{min-height:135px;padding:12px}
}
@media(max-width:359px){
  .home-coastal .app{padding-left:max(14px,var(--home-left));padding-right:max(14px,var(--home-right))}
  .home-coastal .wm{font-size:16px;letter-spacing:.08em}.home-coastal .hd{gap:8px;padding-right:100px}
  .home-coastal #drewLangToggle{right:max(14px,var(--home-right))}
  .home-coastal .greet h1{font-size:27px}.home-coastal .greet p{font-size:12px}
  .home-coastal .mission{gap:7px}.home-coastal .mission .ava{width:43px;flex-basis:43px}
  .home-coastal .mission .home-object{width:57px;height:57px;left:-7px;top:1px}
  .home-coastal .mission .v{font-size:17px}.home-coastal .qcard .v{font-size:15px}
  .home-coastal #dock{left:4px;right:4px}.home-coastal #dock a span{font-size:10px}
}
@media(min-width:880px){
  .home-coastal #dock{left:18px;top:20px;bottom:20px;right:auto;width:190px;flex-direction:column;justify-content:flex-start;gap:9px;padding:15px 10px;border-radius:27px;border:1px solid var(--home-rim);box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--home-edge),0 12px 30px #163c4d20}
  .home-coastal #dock a{flex:none;width:100%;min-height:56px;flex-direction:row;align-items:center;justify-content:flex-start;padding:8px 9px;gap:10px}
  .home-coastal #dock a:last-child{flex-grow:0}.home-coastal #dock a span{font-size:14px}
  .home-coastal #dock a .home-due{left:auto;right:8px;top:6px;font-size:10px}
  .home-coastal .app{position:relative;left:100px;transform:none;padding-top:22px;padding-bottom:30px}
  .home-coastal #drewLangToggle{top:22px;right:max(20px,calc((100vw - 720px)/2))}
  .home-coastal #hero{height:330px}
}
@media(max-width:879px) and (max-height:500px) and (orientation:landscape){
  .home-coastal #dock a{min-height:44px;flex-direction:row;align-items:center;justify-content:center;gap:6px}
  .home-coastal #dock .home-nav-object{width:30px;height:30px}
  .home-coastal .app{padding-bottom:90px}
}
@media(prefers-reduced-motion:reduce){
  .home-coastal :is(.loading-resident,.loading-tide,#homeIslandBeacon){animation:none}
  .home-coastal :is(#homeLiveIsland,#drewLangToggle,#dock a){transition:none}
  .home-coastal #homeIslandBeacon{opacity:.65}
}

/* Keep the home island and its four main entries visible on portrait iPhone.
   Minimum rows retain readable controls; extreme zoom can flow naturally. */
@media(min-width:360px) and (max-width:600px) and (min-height:600px) and (orientation:portrait){
  .home-coastal .app{height:100svh;min-height:100svh;display:grid;grid-template-rows:auto minmax(140px,1fr) auto auto;gap:12px;padding:10px 18px calc(94px + var(--home-safe-bottom))}
  .home-coastal .greet{padding-top:12px;gap:3px 8px}
  .home-coastal .greet h1{font-size:27px}
  .home-coastal .greet p{font-size:12px;line-height:1.35}
  .home-coastal .chip{margin-top:3px;padding:3px 8px;font-size:10px}
  .home-coastal #hero{height:auto;min-height:140px;margin:0 -4px;flex:auto}
  .home-coastal #islLabel{top:4px}
  .home-coastal #homeLiveIsland{top:18px;height:calc(100% - 90px)}
  .home-coastal #islAction{min-height:48px;bottom:5px;padding:9px 14px;font-size:19px}
  .home-coastal #homeIslandNote{bottom:62px;font-size:11px}
  .home-coastal #homeIslandPlaceholder{inset:18px 10px 78px}
  .home-coastal .mission{padding:10px 11px;min-height:78px}
  .home-coastal .mission .v{font-size:17px;margin:2px 0}
  .home-coastal .mission :is(.s,.rd,.hb){font-size:11px;line-height:1.35}
  .home-coastal .duo{margin:0;gap:12px}
  .home-coastal .qcard{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto;min-height:91px;padding:9px 10px;gap:2px 7px;align-content:center}
  .home-coastal .qcard .ic{grid-row:1/3;width:30px;height:32px;margin:0}
  .home-coastal .qcard.resume .home-object{width:41px;height:41px;left:-6px;top:-4px}
  .home-coastal .qcard.talk .ic{width:30px;height:30px;border-radius:11px}
  .home-coastal .qcard .k{font-size:10px;line-height:1.3}
  .home-coastal .qcard .v{font-size:14px;line-height:1.2;margin:0}
  .home-coastal .qcard .s{grid-column:1/-1;font-size:10px;line-height:1.3;margin:3px 0 0}
  .home-coastal .qcard .chev{display:none}
}