/* ============================================================
   hub.css — the home screen.

   Sections that are not built yet stay visible and disabled rather
   than hidden. Someone who is not comfortable with technology needs
   the shape of the app to hold still: a menu that grows item by item
   has to be relearned each time, while a menu where things light up
   only ever needs learning once.
   ============================================================ */

.hub{
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--bg);
  color:var(--ink);
  transition:background var(--t-theme) ease, color var(--t-theme) ease;
}

.hub-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:max(14px,env(safe-area-inset-top)) 18px 0;
}

.hub-body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  min-height:0;
}

.hub-inner{
  width:100%;
  max-width:380px;
}

.hub-title{
  font-family:Marcellus,serif;
  font-weight:400;
  font-size:clamp(24px,6.6vw,32px);
  letter-spacing:.01em;
  text-align:center;
  margin:0 0 28px;
}

/* ---------------- sections ---------------- */
.tiles{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:72px;
  padding:0 22px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .2s, transform .12s;
}
.tile:hover:not([disabled]){ border-color:var(--soft); }
.tile:active:not([disabled]){ transform:scale(.994); }

.tile-name{
  font-family:Karla,sans-serif;
  font-weight:500;
  font-size:17px;
  color:var(--ink);
}

.tile-hint{
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:13px;
  color:var(--soft);
  text-align:right;
}

/* Not greyed into invisibility: the label carries the meaning, so the
   section reads as planned rather than broken. */
.tile[disabled]{
  cursor:default;
  background:transparent;
  border-style:dashed;
}
.tile[disabled] .tile-name{ color:var(--soft); }

.tile-soon{
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft);
  opacity:.75;
  border:1px solid var(--line);
  border-radius:99px;
  padding:5px 11px;
  white-space:nowrap;
}

/* ---------------- clients and its table switch ---------------- */

/* The two share a row, so the row weighs the same as each section
   below it. */
.tile-row{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.tile-row .tile{
  flex:1 1 auto;
  min-width:0;
  min-height:86px;
}

/* Solid border and a filled surface, exactly like Клієнти.
   An earlier version used a dashed outline to keep the two apart, but
   dashed already means "not yet" everywhere else on this screen — so
   the one working button on the row looked like the disabled ones.
   Shape does the separating instead: square against a wide rectangle
   is difference enough. */
.tile-square{
  flex:0 0 auto;
  width:86px;
  min-height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  cursor:pointer;
  transition:border-color .2s, transform .12s;
}
.tile-square:hover{ border-color:var(--soft); }
.tile-square:active{ transform:scale(.97); }

.tile-square svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Set in the same ink as Клієнти, only smaller. Grey lettering is the
   other thing that reads as unavailable here. */
.tile-square span{
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--ink);
  text-align:center;
}

/* ---------------- note ---------------- */
.hub-note{
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:13px;
  line-height:1.55;
  color:var(--soft);
  text-align:center;
  margin:28px 0 0;
}

.hub-foot{
  display:flex;
  justify-content:center;
  padding:0 20px max(18px,env(safe-area-inset-bottom));
}

@media(max-width:400px){
  .tile{ min-height:66px; padding:0 18px; }
  .tile-name{ font-size:16px; }
  .tile-square{ width:78px; min-height:78px; }
  .tile-row .tile{ min-height:78px; }
}