/* ═══════════════════════════════════════
   PUUTARHA · KARTTA — styles.css
═══════════════════════════════════════ */

:root {
  --cream:#f0ead8; --paper:#e8e0c8; --warm:#f5f0e4;
  --fog:#c8c0a8; --stone:#908070; --soil:#261e0e;
  --moss:#3e5030; --fern:#527840; --sage:#6e9050; --meadow:#9ab878;
  --violet:#7a5a9e; --blue:#486ea8; --pink:#b05e90;
  --gold:#b09030; --teal:#388070; --rust:#985030;
  --hb:rgba(82,120,64,0.45);
  --cut:18px; --rad:8px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:"DM Mono",monospace;
  background:var(--cream);
  color:var(--soil);
  min-height:100vh;
}

/* scan lines */
body::before {
  content:""; position:fixed; inset:0;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(60,80,40,0.03) 2px, rgba(60,80,40,0.03) 3px
  );
  pointer-events:none; z-index:0;
}

.wrap {
  max-width:1200px; margin:0 auto;
  padding:1.5rem 1.4rem 4rem;
  position:relative; z-index:1;
}

/* ── CHAMFER SYSTEM ── */
.cham {
  position:relative;
  background:var(--border-c, var(--hb));
  border-radius:var(--rad);
  clip-path:polygon(
    0% var(--rad), var(--rad) 0%,
    calc(100% - var(--rad)) 0%, 100% var(--rad),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--rad) 100%, 0% calc(100% - var(--rad))
  );
  padding:2px;
  transition:background 0.2s ease;
}

.cham-inner {
  background:var(--bg, var(--paper));
  border-radius:calc(var(--rad) - 1px);
  clip-path:polygon(
    0% var(--rad), var(--rad) 0%,
    calc(100% - var(--rad)) 0%, 100% var(--rad),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--rad) 100%, 0% calc(100% - var(--rad))
  );
  width:100%; height:100%;
  position:relative; overflow:hidden;
}

/* pill — fully rounded, no cut */
.pill {
  display:inline-flex; align-items:center;
  background:var(--border-c, var(--hb));
  border-radius:20px; padding:2px;
}

.pill-inner {
  background:var(--bg, var(--paper));
  border-radius:18px; padding:0.18rem 0.65rem;
  font-family:"Orbitron",sans-serif;
  font-size:0.44rem; letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--c, var(--fern));
  white-space:nowrap; line-height:1.6;
}

/* ── TOPBAR ── */
.topbar { display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.topbar-line {
  flex:1; height:1px;
  background:linear-gradient(to right, transparent, var(--fern) 40%, var(--fern) 60%, transparent);
  opacity:.4;
}

h1 {
  font-family:"Orbitron",sans-serif;
  font-size:clamp(1.1rem,2.8vw,1.9rem);
  font-weight:600; color:var(--soil);
  letter-spacing:.08em; margin-bottom:.25rem;
}
h1 span { color:var(--fern); }
.sub {
  font-family:"Lora",serif; font-style:italic;
  font-size:.82rem; color:var(--stone); margin-bottom:1.1rem;
}

/* ── LAYOUT ── */
.layout { display:grid; grid-template-columns:1fr 310px; gap:1rem; align-items:start; }

/* ── CANVAS PANEL ── */
.canvas-outer { --border-c:var(--hb); --bg:var(--paper); }

.canvas-toolbar {
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem;
  border-bottom:1px dashed rgba(82,120,64,.25);
  flex-wrap:wrap;
}

.tool-btn {
  font-family:"Orbitron",sans-serif;
  font-size:.44rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.28rem .75rem; cursor:pointer; transition:all .15s;
  display:inline-flex; align-items:center;
  background:var(--warm); color:var(--fern);
  border:1.5px solid var(--hb); border-radius:20px;
  white-space:nowrap;
}
.tool-btn:hover, .tool-btn.active {
  background:var(--fern); color:var(--warm); border-color:var(--fern);
}
.tool-btn.danger { color:#a04030; border-color:rgba(175,80,60,.5); }
.tool-btn.danger:hover { background:rgba(175,80,60,.85); color:white; border-color:rgba(175,80,60,.85); }

#canvas-container {
  position:relative; width:100%; min-height:440px;
  background:#ddd8c8; cursor:crosshair;
}
#canvas-container.mode-select { cursor:default; }
#bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#svg-layer { position:absolute; inset:0; width:100%; height:100%; }

.upload-hint {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.6rem;
  pointer-events:none; opacity:.45;
}
.upload-hint-icon { font-size:2.5rem; }
.upload-hint-text {
  font-family:"Lora",serif; font-style:italic;
  font-size:.85rem; color:var(--stone);
}

/* loading overlay */
#loading {
  position:fixed; inset:0; z-index:500;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem;
}
#loading.hidden { display:none; }
.loading-text {
  font-family:"Orbitron",sans-serif; font-size:.55rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fern);
}
.loading-bar-wrap {
  width:200px; height:3px;
  background:rgba(82,120,64,.15); border-radius:2px; overflow:hidden;
}
.loading-bar {
  height:100%; width:0%; background:var(--fern);
  border-radius:2px; transition:width .3s ease;
}

.statusbar {
  display:flex; align-items:center; gap:1rem;
  padding:.4rem .9rem;
  border-top:1px dashed rgba(82,120,64,.2);
  flex-wrap:wrap;
}
.s-item {
  display:flex; align-items:center; gap:.35rem;
  font-family:"Orbitron",sans-serif;
  font-size:.42rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--stone);
}
.s-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--sage);
  animation:blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── SIDEBAR ── */
.sidebar { display:flex; flex-direction:column; gap:.8rem; }

.panel-head {
  padding:.5rem .9rem;
  border-bottom:1px dashed rgba(82,120,64,.22);
  font-family:"Orbitron",sans-serif;
  font-size:.48rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fern);
}
.panel-body { padding:.75rem .9rem; }

/* zone editor */
#zone-editor { display:none; }
#zone-editor.visible { display:block; }

.field-row { margin-bottom:.55rem; }
.field-label {
  display:block; font-size:.56rem; color:var(--stone);
  margin-bottom:.18rem; letter-spacing:.06em;
}
.field-row input, .field-row select {
  width:100%; padding:.3rem .5rem;
  background:var(--warm); border:1.5px solid var(--hb);
  border-radius:4px; font-family:"DM Mono",monospace;
  font-size:.7rem; color:var(--soil);
}
.field-row input:focus, .field-row select:focus {
  outline:none; border-color:var(--fern);
}

/* plant tags */
.plant-tags {
  display:flex; flex-wrap:wrap; gap:.28rem;
  margin-top:.35rem; min-height:26px;
}
.plant-tag {
  font-family:"DM Mono",monospace; font-size:.58rem;
  padding:.14rem .42rem;
  background:rgba(82,120,64,.12); border:1px solid var(--hb);
  border-radius:10px; color:var(--moss);
  display:flex; align-items:center; gap:.28rem;
}
.plant-tag .rm { cursor:pointer; opacity:.45; font-size:.68rem; line-height:1; }
.plant-tag .rm:hover { opacity:1; color:#a04030; }

/* plant picker option colouring */
select option.opt-antagonist { color:#a04030; background:rgba(175,80,60,.06); }
select option.opt-companion  { color:var(--moss); }

/* companion / relationship list */
.companion-list { margin-top:.4rem; max-height:220px; overflow-y:auto; }
.companion-item {
  font-size:.63rem; padding:.22rem .4rem; border-radius:3px;
  margin-bottom:.18rem; display:flex; align-items:center; gap:.38rem;
}
.companion-item.good    { background:rgba(82,120,64,.09); color:var(--moss); cursor:pointer; }
.companion-item.good:hover { background:rgba(82,120,64,.18); }
.companion-item.bad     { background:rgba(175,80,60,.07); color:#904030; cursor:default; }
.companion-item.neutral { background:rgba(144,128,112,.07); color:var(--stone); cursor:pointer; }
.companion-item.neutral:hover { background:rgba(144,128,112,.14); }
.companion-item.dimmed  { opacity:.4; cursor:not-allowed; }
.rel-emoji  { font-size:.85rem; line-height:1; flex-shrink:0; }
.insect-repel { font-size:.55rem; color:var(--stone); margin-left:auto; opacity:.7; }

/* zone list */
.zone-list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.32rem .5rem; border-radius:4px; cursor:pointer;
  margin-bottom:.28rem; border:1px solid transparent; font-size:.66rem;
}
.zone-list-item:hover { background:rgba(82,120,64,.08); border-color:var(--hb); }
.zone-list-item.active { background:rgba(82,120,64,.14); border-color:var(--fern); }
.zone-name-label { font-family:"Lora",serif; font-style:italic; }
.zone-del { opacity:0; color:#a04030; font-size:.78rem; cursor:pointer; margin-left:.4rem; }
.zone-list-item:hover .zone-del { opacity:.55; }
.zone-del:hover { opacity:1 !important; }

/* output / planting plan */
.output-zone {
  margin-bottom:.75rem; padding:.55rem .65rem;
  background:var(--warm);
  border-left:2.5px solid var(--sage); border-radius:0 4px 4px 0;
}
.output-zone-name {
  font-family:"Lora",serif; font-weight:600; font-size:.82rem;
  color:var(--soil); margin-bottom:.28rem;
}
.output-tags { display:flex; flex-wrap:wrap; gap:.22rem; }
.output-tag {
  font-size:.6rem; padding:.1rem .38rem;
  background:rgba(82,120,64,.11); border-radius:10px; color:var(--moss);
}

/* section divider */
.sec-div {
  font-family:"Orbitron",sans-serif; font-size:.44rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--stone); margin:.55rem 0 .3rem;
  display:flex; align-items:center; gap:.5rem;
}
.sec-div::after { content:""; flex:1; height:1px; background:rgba(82,120,64,.2); }

/* ── PRINT ── */
@media print {
  .canvas-outer, .topbar, h1, .sub, .statusbar,
  .tool-btn, #zone-editor, #loading { display:none !important; }
  .layout { grid-template-columns:1fr; }
}

/* ── RESPONSIVE ── */
@media (max-width:700px) {
  .layout { grid-template-columns:1fr; }
  #canvas-container { min-height:300px; }
}