/* flathour ops — tokens. Sea-chart blues on fog paper; buoy orange only marks
   things that need doing today. One bold device: the 荷札 (shipping tag). */
:root {
  --paper: #EDF1EF;
  --card: #F8FAF9;
  --ink: #1C2733;
  --slate: #4A5464;        /* the siding of Flat Hour's building */
  --ink-2: #4A5F64;
  --line: #C9D3D0;
  --tide: #2C5D73;
  --tide-wash: #DCE7EA;
  --buoy: #E2572B;
  --buoy-wash: #FBE3D9;
  --kelp: #5B7A3C;
  --kelp-wash: #E3EBD9;
  --tag: #F3E9D2;          /* kraft-paper tag */
  --tag-edge: #D9C9A3;
  --t-default: #E6EAE9; --t-gray: #DEE2E1; --t-brown: #EADFD5; --t-orange: #F8E0CF;
  --t-yellow: #F5EBC4; --t-green: #DCEAD6; --t-blue: #D6E5EE; --t-purple: #E6DEEF;
  --t-pink: #F2DCE6; --t-red: #F5D7D3;
  --radius-s: 4px; --radius-m: 8px;
  --rail: 196px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1E22; --card: #16282D; --ink: #E3ECEA; --ink-2: #9DB0B2; --line: #2B4248;
    --tide: #8CC0D6; --tide-wash: #1D3B46; --buoy: #FF7A4D; --buoy-wash: #3D2219;
    --kelp: #9CC27A; --kelp-wash: #22331B; --tag: #3A3427; --tag-edge: #5A4F38;
    --t-default: #263A3F; --t-gray: #2A3B3F; --t-brown: #3A3029; --t-orange: #44301F;
    --t-yellow: #403A1E; --t-green: #24392A; --t-blue: #1F3746; --t-purple: #322A40;
    --t-pink: #3E2633; --t-red: #452624;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1E22; --card: #16282D; --ink: #E3ECEA; --ink-2: #9DB0B2; --line: #2B4248;
  --tide: #8CC0D6; --tide-wash: #1D3B46; --buoy: #FF7A4D; --buoy-wash: #3D2219;
  --kelp: #9CC27A; --kelp-wash: #22331B; --tag: #3A3427; --tag-edge: #5A4F38;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.7 "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--tide); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--buoy); outline-offset: 2px; border-radius: 2px; }
h1, h2, .display { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 700;
  letter-spacing: .02em; line-height: 1.3; }
h1 { font-size: 1.75rem; margin: 0 0 .25rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }

/* shell */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--slate); color: #fff; padding: 1.25rem .75rem; position: sticky;
  top: 0; height: 100vh; display: flex; flex-direction: column; gap: .25rem; }
.rail .mark { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1.05rem;
  padding: 0 .25rem 1rem; color: #fff; text-decoration: none; display: flex; align-items: center;
  gap: .5rem; white-space: nowrap; }
.rail .mark img { width: 36px; height: 36px; flex: none; }
.rail a.nav { display: block; padding: .7rem .75rem; border-radius: var(--radius-m);
  color: rgba(255,255,255,.82); text-decoration: none; min-height: 44px; }
.rail a.nav[aria-current="page"] { background: rgba(255,255,255,.16);
  color: var(--paper); }
.rail a.nav:hover { color: var(--paper); }
.rail .sync { margin-top: auto; font-size: .8rem; padding: .5rem; line-height: 1.5;
  color: rgba(255,255,255,.72); }
.rail .sync.bad { color: #FFB49A; }
main { padding: 1.5rem clamp(16px, 3vw, 2.5rem) 4rem; max-width: 1180px; width: 100%; min-width: 0; }
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.25rem; }

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; z-index: 5;
    flex-direction: row; overflow-x: auto; padding: .4rem; gap: .25rem;
    padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }
  .rail .mark, .rail .sync, .rail .who { display: none; }
  .kpis { gap: 1rem 1.5rem; }
  .kpi b { font-size: 1.3rem; }
  form.search input { min-width: 0; flex: 1; }
  form.search { width: 100%; }
  .rail a.nav { white-space: nowrap; padding: .55rem .8rem; }
  main { padding-bottom: 6rem; }
}

/* generic surfaces */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1rem 1.1rem; }
.grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem;
  align-items: start; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.chip { display: inline-block; padding: 0 .5rem; border-radius: 99px; font-size: .8rem;
  line-height: 1.6rem; background: var(--t-default); color: var(--ink); margin: 0 .25rem .25rem 0;
  white-space: nowrap; }
.chip[data-c="gray"]{background:var(--t-gray)} .chip[data-c="brown"]{background:var(--t-brown)}
.chip[data-c="orange"]{background:var(--t-orange)} .chip[data-c="yellow"]{background:var(--t-yellow)}
.chip[data-c="green"]{background:var(--t-green)} .chip[data-c="blue"]{background:var(--t-blue)}
.chip[data-c="purple"]{background:var(--t-purple)} .chip[data-c="pink"]{background:var(--t-pink)}
.chip[data-c="red"]{background:var(--t-red)}
.check { display:inline-block; width:1.1rem; height:1.1rem; border:2px solid var(--ink-2);
  border-radius: 3px; vertical-align: -3px; }
.check.on { background: var(--kelp); border-color: var(--kelp); }

/* search */
form.search { display: flex; gap: .5rem; }
form.search input { font: inherit; padding: .55rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--card); color: var(--ink); min-width: 14rem; }
button, .btn { font: inherit; padding: .55rem 1rem; border-radius: var(--radius-m); border: 0;
  background: var(--tide); color: var(--paper); cursor: pointer; min-height: 44px; text-decoration: none;
  display: inline-flex; align-items: center; }

/* tables */
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-m); }
table { border-collapse: collapse; width: 100%; font-size: .925rem; }
th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: .8rem; padding: .6rem .75rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--card); }
td { padding: .55rem .75rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.title a { font-weight: 700; color: var(--ink); text-decoration: none; }
td.title a:hover { text-decoration: underline; }
td.num { text-align: right; }

/* database list */
.dblist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.dblist a { display: block; padding: .9rem 1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-m); color: var(--ink); text-decoration: none; }
.dblist a:hover { border-color: var(--tide); }
.dblist .n { float: right; color: var(--ink-2); }

/* row detail */
dl.props { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4rem 1.25rem;
  margin: 0; }
dl.props dt { color: var(--ink-2); font-size: .875rem; padding-top: .1rem; }
dl.props dd { margin: 0; }
.body { max-width: 42rem; line-height: 1.85; }
.body .b-h { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; margin: 1.2rem 0 .3rem; }
.body .b-callout { background: var(--tide-wash); padding: .6rem .8rem; border-radius: var(--radius-m); }
.body .b-todo.on { color: var(--ink-2); text-decoration: line-through; }

/* the one bold device: 荷札 shipping tags */
.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.nifuda { position: relative; background: var(--tag); color: #2B2416; padding: 1rem 1rem .9rem 2.6rem;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border-radius: 0 var(--radius-s) var(--radius-s) 0; text-decoration: none; display: block;
  box-shadow: inset 0 0 0 1px var(--tag-edge); }
.nifuda::before { content: ""; position: absolute; left: 1rem; top: 50%; width: .8rem; height: .8rem;
  margin-top: -.4rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--tag-edge); }
.nifuda .to { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.3;
  display: block; }
.nifuda .what { display: block; margin-top: .35rem; }
.nifuda .when { display: block; font-size: .85rem; margin-top: .35rem; color: #5E5440; }
.nifuda.today { box-shadow: inset 0 0 0 2px var(--buoy); }
.nifuda.today .when { color: var(--buoy); font-weight: 700; }
.nifuda.done { opacity: .55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nifuda { color: #F1E7CF; }
  :root:not([data-theme="light"]) .nifuda .when { color: #CDBF9E; } }

.empty { padding: 2rem 1rem; color: var(--ink-2); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.list li:last-child { border-bottom: 0; }
.list a { color: var(--ink); text-decoration: none; font-weight: 700; }
.list a:hover { text-decoration: underline; }
.kpis { display: flex; gap: 2rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.kpi b { font-size: 1.6rem; font-family: "Zen Maru Gothic", sans-serif; display: block; line-height: 1.2; }
.kpi.alert b { color: var(--buoy); }

/* bars: one series, tide blue; value on hover/focus, month under each bar */
.bars { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1.5rem .75rem .5rem; }
.bars-plot { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-bottom: 1.4rem;
  overflow: hidden; }
.bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; outline-offset: 2px; }
.bar-fill { display: block; width: 100%; min-height: 1px; background: var(--tide); border-radius: 4px 4px 0 0; }
.bar-x { position: absolute; bottom: -1.4rem; left: 0; right: 0; text-align: center; font-size: .72rem;
  color: var(--ink-2); }
.bar-tip { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-size: .75rem; padding: .1rem .4rem; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 2; }
.bar:hover .bar-tip, .bar:focus .bar-tip { opacity: 1; }
.bar:hover .bar-fill, .bar:focus .bar-fill { background: color-mix(in srgb, var(--tide) 75%, var(--ink)); }
.nifuda .meta { display: block; font-size: .78rem; margin-top: .2rem; opacity: .75; }
.heat { display: inline-block; min-width: 2.2rem; padding: 0 .35rem; border-radius: 4px;
  background: color-mix(in srgb, var(--tide) var(--a), transparent);
  color: var(--ink); }
table.grades th { white-space: normal; font-size: .72rem; }

/* login */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: min(100%, 22rem); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 1.75rem 1.5rem; }
.login-card form { display: grid; gap: .9rem; margin-top: 1rem; }
.login-card label { display: grid; gap: .25rem; font-size: .875rem; color: var(--ink-2); }
.login-card input { font: inherit; padding: .65rem .75rem; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--paper); color: var(--ink); }
.login-card .err { color: var(--buoy); margin: 0; }
.rail .who { font-size: .8rem; padding: .25rem .5rem; color: rgba(255,255,255,.72); }
.rail .who button { background: none; padding: 0; min-height: 0; color: inherit; text-decoration: underline;
  font-size: .8rem; }

/* finance / labor */
select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--card); color: var(--ink); min-height: 44px; }
table.pl tr.key td { font-weight: 700; border-top: 1px solid var(--line); }
td.neg { color: var(--buoy); }
.bars.daily .bars-plot { gap: 2px; height: 140px; }
.bars.daily .bar.peak .bar-fill { background: var(--ink); }
.bars.daily .bar.sun .bar-fill { opacity: .55; }
.bars.daily .bar-x { left: 0; right: auto; text-align: left; white-space: nowrap; }
.alertline { border-color: var(--buoy); background: var(--buoy-wash); }
h3 { font-size: 1rem; }

.nowrap { white-space: nowrap; }

td:first-child, th:first-child { white-space: nowrap; }
.login-card .brand { display: flex; align-items: center; gap: .6rem; }
.login-card .brand img { width: 44px; height: 44px; color: var(--slate); }
.stack { display: grid; gap: 1rem; }

/* project hub */
.ball { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.ball-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .8rem 1rem; }
.ball-who { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line);
  padding-bottom: .4rem; margin-bottom: .2rem; font-family: "Zen Maru Gothic", sans-serif; font-size: 1.1rem; }
.st { white-space: nowrap; }
.st-対応中 { color: var(--tide); font-weight: 700; }
.st-待ち { color: #8a6a1f; }
.st-完了 { color: var(--kelp); }
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.proj { display: grid; gap: .55rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; align-content: start; }
.proj:hover { border-color: var(--slate); }
.proj-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.proj-name { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1.2rem; }
.proj-sum { color: var(--ink-2); font-size: .9rem; }
.proj-next { display: grid; background: var(--paper); border-radius: var(--radius-s); padding: .45rem .6rem; }
.proj.st-完了 .chip.pst { background: var(--kelp-wash); }
.proj.st-待ち .chip.pst { background: var(--t-yellow); }
/* stage track: done = slate, now = buoy ring, later = hollow */
.track { list-style: none; display: flex; padding: 0; margin: .2rem 0; counter-reset: st; }
.track li { flex: 1; position: relative; display: grid; justify-items: center; gap: .3rem; min-width: 0;
  counter-increment: st; font-size: .72rem; color: var(--ink-2); text-align: center; }
.track li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.track li:first-child::before { display: none; }
.track li.done::before, .track li.now::before { background: var(--slate); }
.track .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); z-index: 1; }
.track li.done .dot { background: var(--slate); border-color: var(--slate); }
.track li.now .dot { border: 3px solid var(--buoy); background: var(--card); box-shadow: 0 0 0 3px var(--buoy-wash); }
.track li.now { color: var(--ink); font-weight: 700; }
.track .lbl { line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.track.big { margin: 1rem 0 1.25rem; }
.track.big li { font-size: .85rem; }
.track.big .dot { width: 18px; height: 18px; }
.track.big li::before { top: 8px; }
.lead { font-size: 1.05rem; max-width: 46rem; }
.btn.ghost { background: transparent; color: var(--tide); border: 1px solid var(--line); margin-left: .4rem; }
.nextform .row, .newissue .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.nextform input, .newissue input, .newissue textarea, .iform input, .iform textarea, .iform select {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--card); color: var(--ink); min-height: 44px; }
.nextform input#next { flex: 1 1 18rem; }
.newissue { display: grid; gap: .5rem; margin-top: 1rem; }
.newissue h3 { margin: 0; }
.issues { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.issue { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); }
.issue.st-完了 { opacity: .7; }
.issue summary { padding: .75rem 1rem; cursor: pointer; display: grid; gap: .15rem; min-height: 44px; }
.issue .ititle { font-weight: 700; }
.issue .imeta { font-size: .85rem; color: var(--ink-2); }
.issue .ibody, .issue .cmt, .issue .iform { margin: 0 1rem .75rem; }
.cmt { border-left: 3px solid var(--line); padding-left: .7rem; }
.cmt p { margin: .1rem 0 0; }
.iform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.iform textarea { flex: 1 1 100%; }
.activity li { display: grid; gap: .1rem; }
:target { scroll-margin-top: 1rem; }
.issue:target { border-color: var(--buoy); }
@media (max-width: 760px) { .track li { font-size: .62rem; } .projects { grid-template-columns: minmax(0,1fr); } }