:root{
  color-scheme:light;
  --paper:#F4F6F8; --paper-raised:#FFFFFF; --paper-sunken:#E7EBEF;
  --wash:rgba(218, 226, 221, 0.76);
  --ink:#1C2430; --ink-soft:#667085; --line:#DCE1E7; --frame:#9AA5B1;
  --accent:#2F6FED; --accent-fill:#2358C4;
  --danger:#E24C4B; --success:#2FA766;
  --on-fill:#FFFFFF;
  --shadow:0 4px 14px rgba(20,30,45,.08);
  --sunday:#E24C4B; --saturday:#2F6FED;
  --warn:#E24C4B;
  --font-head:"Sora","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}
/* This board is deliberately always light ("a whiteboard is white
   regardless of the room"), so it does not follow the OS dark-mode
   setting. */

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--paper) url("background.png") center top / cover no-repeat;
  color:var(--ink); font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent;
}
h1,h2{font-family:var(--font-head); font-weight:700; text-wrap:balance; margin:0;}
button,input,textarea,select{font-family:inherit; color:inherit;}
::selection{background:var(--accent); color:var(--on-fill);}

#app{
  max-width:480px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; background:transparent;
  position:relative;
}
@media (min-width:481px){
  body{background:var(--paper-sunken);}
  #app{box-shadow:var(--shadow); min-height:100vh;}
}

.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--paper-raised); border-bottom:2px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer; padding:2px;
}
.brand-mark{font-size:19px; line-height:1;}
.brand-name{font-family:var(--font-head); font-weight:700; font-size:15.5px; letter-spacing:-.01em;}
.brand-edit-icon{width:13px; height:13px; stroke:var(--ink-soft); fill:none; stroke-width:2; opacity:.65;}
.profile-chip{
  display:flex; align-items:center; gap:6px; background:var(--paper-sunken);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 8px;
  font-size:13px; font-weight:500; cursor:pointer;
}
.topbar-right{display:flex; align-items:center; gap:8px;}
.notif-btn{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--paper-sunken);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none;
}
.notif-btn.on{background:var(--accent-fill); border-color:var(--accent-fill);}
.profile-chip:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
#profile-emoji{font-size:16px;}

.weather-bar{
  display:flex; gap:8px; padding:8px 16px; background:var(--paper-raised); border-bottom:1px solid var(--line);
}
.weather-item{
  display:flex; align-items:center; justify-content:center; gap:6px; flex:1;
  background:var(--paper-sunken); border-radius:999px; padding:5px 10px; font-size:12.5px;
}
.weather-icon{font-size:15px; line-height:1;}
.weather-place{font-weight:700; color:var(--ink-soft);}
.weather-temp{font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent);}

.banner{
  font-size:12px; text-align:center; padding:8px 14px; color:var(--ink-soft);
  background:var(--paper-sunken); border-bottom:1px solid var(--line); line-height:1.5;
}
.banner.warn{background:#FBE7E6; color:#8A2A28;}

main.views{
  flex:1; overflow-y:auto; padding:18px 16px 12px; padding-bottom:96px;
  background:var(--wash);
}
.view-head{margin-bottom:14px;}
.view-head h1{font-size:19px; font-weight:700; letter-spacing:-.01em;}
.view-sub{margin:4px 0 0; font-size:13px; color:var(--ink-soft);}

.compose{display:flex; gap:8px; margin-bottom:16px;}
.compose input[type="text"], .compose textarea, .compose input[type="time"], .compose input[type="date"], .compose select{
  border:1px solid var(--line); background:var(--paper-raised);
  border-radius:10px; padding:10px 12px; font-size:16px; resize:none;
}
.compose input[type="text"]{flex:1;}
.btn{
  border:none; border-radius:10px; padding:0 16px; font-size:14px; font-weight:700;
  cursor:pointer; white-space:nowrap; color:var(--on-fill); transition:transform .1s ease;
  background:var(--accent-fill);
}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.45; cursor:default; transform:none;}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line); font-weight:500;}

.empty-state{
  text-align:center; color:var(--ink-soft); font-size:13.5px; line-height:1.7;
  padding:28px 12px; border:1.5px dashed var(--line); border-radius:12px;
}

/* Image attach/preview (board, todo, chat) */
.img-pick-btn{
  background:none; border:none; color:var(--ink-soft); font-size:12.5px; font-weight:500;
  cursor:pointer; padding:6px 4px; white-space:nowrap;
}
.img-pick-btn:hover{color:var(--accent);}
.compose-img-row, .row-img{display:flex; align-items:center; gap:8px; width:100%; margin-top:2px;}
.image-preview{position:relative; display:inline-block; max-width:120px; flex:none;}
.image-preview img{display:block; width:100%; border-radius:8px; border:1px solid var(--line);}
.image-preview .icon-x{
  position:absolute; top:-7px; right:-7px; background:var(--paper-raised); border:1px solid var(--line);
  box-shadow:var(--shadow); width:20px; height:20px; font-size:13px;
}
.attached-image{position:relative; display:inline-block; max-width:220px; margin-top:8px;}
.attached-image img{display:block; width:100%; border-radius:10px; border:1px solid var(--line);}
.attached-image .icon-x{
  position:absolute; top:-8px; right:-8px; background:var(--paper-raised); border:1px solid var(--line);
  box-shadow:var(--shadow); width:22px; height:22px;
}
.chat-img-pick-btn{font-size:16px; padding:6px; flex:none;}
.chat-input-bar .image-preview{max-width:34px; flex:none;}
.chat-input-bar .image-preview img{border-radius:6px;}
.chat-input-bar .image-preview .icon-x{width:16px; height:16px; font-size:10.5px; top:-5px; right:-5px;}
.chat-row .attached-image{max-width:180px;}

/* Board notes */
.compose-note{flex-direction:column; align-items:stretch;}
.compose-main{display:flex; gap:8px; align-items:flex-end;}
.compose-note textarea{min-height:44px; flex:1;}
.note-grid{display:flex; flex-direction:column; gap:10px;}
.note-card{
  background:var(--paper-raised); border-radius:10px; border:1px solid var(--line);
  padding:12px 14px; border-left:3px solid var(--note-color, var(--accent));
  position:relative;
}
.note-head{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.note-avatar{font-size:15px;}
.note-name{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.note-time{font-size:11px; color:var(--ink-soft); margin-left:auto; font-variant-numeric:tabular-nums;}
.note-text{font-size:14.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word;}
.icon-x{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  border:none; background:transparent; color:var(--ink-soft); font-size:15px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-x:hover{background:var(--paper-sunken); color:var(--danger);}
.icon-edit{
  width:22px; height:22px; border-radius:50%; border:none; background:transparent;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.icon-edit svg{width:13px; height:13px;}
.icon-edit:hover{background:var(--paper-sunken); color:var(--accent);}
.note-actions{position:absolute; top:8px; right:8px; display:flex; gap:2px;}
.note-actions .icon-x, .note-actions .icon-edit{position:static;}

/* Inline edit forms (board/todo/event/chat) */
.inline-row{display:flex; gap:6px; width:100%;}
.inline-row > *{flex:1; min-width:0;}
.inline-input, .inline-textarea, .inline-select{
  border:1px solid var(--accent); background:var(--paper-raised); border-radius:8px;
  padding:8px 10px; font-size:15px; width:100%;
}
.inline-textarea{resize:none;}
.edit-actions{display:flex; justify-content:flex-end; gap:6px; margin-top:8px;}
.edit-actions .btn, .edit-actions .btn-ghost{padding:0 12px; height:30px; font-size:12.5px; border-radius:8px;}

/* ToDo */
.compose-todo{flex-wrap:wrap;}
.compose-todo .row-main{display:flex; gap:8px; width:100%;}
.compose-todo .row-main input[type="text"]{flex:1;}
.compose-todo .row-sub{display:flex; gap:8px; width:100%; margin-top:8px;}
.compose-todo .row-sub select, .compose-todo .row-sub input[type="date"]{flex:1; min-width:0; font-size:14px;}
.todo-list{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:8px;}
.todo-item{
  display:flex; align-items:flex-start; gap:10px; background:var(--paper-raised);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.todo-check{
  width:22px; height:22px; border-radius:6px; border:2px solid var(--frame);
  background:transparent; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--on-fill);
  margin-top:1px;
}
.todo-item.done .todo-check{background:var(--accent-fill); border-color:var(--accent-fill);}
.todo-check svg{width:13px; height:13px; opacity:0;}
.todo-item.done .todo-check svg{opacity:1;}
.todo-body{flex:1; min-width:0;}
.todo-text{font-size:14.5px; line-height:1.5; word-break:break-word;}
.todo-item.done .todo-text{text-decoration:line-through; color:var(--ink-soft);}
.todo-meta{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px;}
.todo-tag{font-size:11px; color:var(--ink-soft);}
.todo-due{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums;}
.todo-due.today{background:var(--accent-fill); color:var(--on-fill);}
.todo-due.overdue{background:var(--warn); color:#fff;}
.todo-done-wrap{margin-top:4px;}
.todo-done-wrap summary{font-size:13px; color:var(--ink-soft); cursor:pointer; padding:6px 2px;}

/* Calendar */
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-nav-btn{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper-raised); font-size:16px; cursor:pointer;
}
.cal-month-label{font-family:var(--font-head); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11.5px; color:var(--ink-soft); margin-bottom:4px;}
.cal-weekdays span:first-child{color:var(--sunday);}
.cal-weekdays span:last-child{color:var(--saturday);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:18px;}
.cal-cell{
  aspect-ratio:1; border-radius:8px; border:1px solid transparent; background:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:13px; cursor:pointer; color:var(--ink); font-variant-numeric:tabular-nums;
}
.cal-cell.outside{color:var(--ink-soft); opacity:.4;}
.cal-cell.today{border-color:var(--accent);}
.cal-cell.selected{background:var(--accent-fill); color:var(--on-fill);}
.cal-dot{width:5px; height:5px; border-radius:50%; background:var(--accent);}
.cal-cell.selected .cal-dot{background:var(--on-fill);}
.cal-day-detail h2{font-size:14.5px; font-weight:700; margin-bottom:10px;}
.event-list{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px;}
.event-item{
  display:flex; align-items:flex-start; gap:10px; background:var(--paper-raised);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; position:relative;
}
.event-item-google{background:var(--paper-sunken); border-style:dashed;}
.event-time{font-size:12px; font-weight:700; color:var(--accent); min-width:44px; font-variant-numeric:tabular-nums;}
.event-body{flex:1; min-width:0;}
.event-title{font-size:14px; font-weight:500; word-break:break-word;}
.event-memo{font-size:12.5px; color:var(--ink-soft); margin-top:2px; word-break:break-word;}
.event-author{font-size:11px; color:var(--ink-soft); margin-top:4px;}
.compose-event{flex-wrap:wrap;}
.compose-event input[type="time"]{flex:none; width:104px;}

/* Chat */
.chat-list{display:flex; flex-direction:column; gap:10px; margin-bottom:8px;}
.chat-row{display:flex; flex-direction:column; max-width:78%;}
.chat-row.own{align-self:flex-end; align-items:flex-end;}
.chat-row.other{align-self:flex-start; align-items:flex-start;}
.chat-meta{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft); margin-bottom:3px;}
.chat-bubble{
  padding:9px 13px; border-radius:14px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.chat-row.own .chat-bubble{background:var(--accent-fill); color:var(--on-fill); border-bottom-right-radius:4px;}
.chat-row.other .chat-bubble{background:var(--paper-raised); border:1px solid var(--line); border-bottom-left-radius:4px;}
.chat-time-row{display:flex; align-items:center; gap:6px; margin-top:3px;}
.chat-row.own .chat-time-row{flex-direction:row-reverse;}
.chat-time{font-size:10.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.chat-delete{
  border:none; background:none; color:var(--ink-soft); font-size:13px; line-height:1; cursor:pointer;
  padding:2px 4px; border-radius:6px;
}
.chat-delete:hover{background:var(--paper-sunken); color:var(--danger);}
.chat-time-row .icon-edit{width:18px; height:18px;}
.chat-time-row .icon-edit svg{width:11px; height:11px;}
.chat-input-bar{
  position:sticky; bottom:0; display:flex; gap:8px; padding:10px 0 4px; background:var(--wash);
}
.chat-input-bar input{
  flex:1; border:1px solid var(--line); background:var(--paper-raised); border-radius:18px;
  padding:11px 16px; font-size:16px;
}
.send-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--accent-fill);
  color:var(--on-fill); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.send-btn svg{width:17px; height:17px;}

/* Tab bar */
.tabbar{
  position:sticky; bottom:0; z-index:6; display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--paper-raised); border-top:2px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none;
  padding:6px 2px; font-size:10.5px; color:var(--ink-soft); cursor:pointer; border-radius:8px;
}
.tab-btn svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.tab-btn.active{color:var(--accent);}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,20,27,.55); display:flex; align-items:flex-end;
  justify-content:center; z-index:20;
}
@media (min-width:481px){ .modal-backdrop{align-items:center;} }
.modal{
  background:var(--paper); width:100%; max-width:440px; border-radius:16px 16px 0 0;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow:var(--shadow);
}
@media (min-width:481px){ .modal{border-radius:16px;} }
.modal h2{font-size:17px; margin-bottom:4px;}
.modal-sub{font-size:13px; color:var(--ink-soft); margin:0 0 16px;}
.field-label{display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin:14px 0 6px;}
#profile-name-input, #board-name-input{
  width:100%; border:1px solid var(--line); background:var(--paper-raised); border-radius:10px;
  padding:11px 13px; font-size:16px;
}
.emoji-grid, .color-grid{display:flex; flex-wrap:wrap; gap:8px;}
.emoji-opt{
  width:40px; height:40px; border-radius:10px; border:2px solid transparent; background:var(--paper-raised);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.emoji-opt.selected{border-color:var(--accent);}
.color-opt{width:28px; height:28px; border-radius:8px; border:2px solid transparent; cursor:pointer;}
.color-opt.selected{border-color:var(--ink);}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:20px;}

/* Login screen */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--paper-sunken);
}
.login-card{
  width:100%; max-width:360px; background:var(--paper-raised); border-radius:16px; box-shadow:var(--shadow);
  padding:32px 26px; text-align:center; border:1px solid var(--line);
}
.login-mark{font-size:34px; margin-bottom:10px;}
.login-card h1{font-family:var(--font-head); font-size:20px; letter-spacing:-.01em; margin-bottom:10px;}
.login-sub{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 22px;}
.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:12px 16px; font-size:14.5px; font-weight:700; cursor:pointer;
}
.btn-google:active{transform:scale(.98);}
.login-error{margin-top:14px; font-size:12.5px; color:var(--warn);}

.modal-secondary-actions{
  display:flex; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.btn-link{background:none; border:none; padding:4px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; font-weight:500;}
.btn-link-danger{color:var(--warn);}

[hidden]{display:none !important;}

@media (prefers-reduced-motion:no-preference){
  .view{animation:fadein .18s ease;}
}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}