/* ============================================================================
   Home Passport — Mobile skin (Modernist)
   Ισχύει ΜΟΝΟ κάτω από 900px. Ο desktop (≥900px) μένει ακριβώς ως έχει.
   Φορτώνεται ΜΕΤΑ το inline <style> του index.html.
   ========================================================================= */

/* Η mobile κονσόλα δεν εμφανίζεται ΠΟΤΕ σε desktop — εκεί ισχύει το κανονικό hero.
   (Χωρίς αυτόν τον κανόνα εμφανιζόταν άστυλη κάτω από το hero σε μεγάλες οθόνες.) */
#mobile-console { display: none; }

/* Ξεκάθαρη έξοδος στο τέλος του αποτελέσματος — το «‹ Αρχική» της κορυφής
   δεν φαίνεται όταν ο χρήστης έχει διαβάσει ως κάτω. */
.btn-back-home {
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
  font-weight: 800;
}
.btn-back-home:hover { background: rgba(214,145,136,.12); }

@media (max-width: 899px) {

  /* ---- 1. Γεωμετρία: μηδενικές γωνίες, γραμμές αντί για κενά ---- */
  .app, .card, .intent-card, .property-card, .news-card, .prof-sec,
  .plan-card, .plan-active, .vault-hub-card, .maint-row, .doc-section,
  .btn, .option-btn, .maint-date, .maint-ics, .pc-drop, .pc-note, .pc-result,
  .id-chip, .badge-pill, .card-tag, .card-time, .tab-btn, .lvl-btn,
  .intent-icon, .plan-badge, .plan-status, .maint-status, .result-ribbon,
  .alert-row, .prof-f input, .prof-f select {
    border-radius: 0 !important;
  }

  /* Το «τηλέφωνο» σε tablet-πλάτος: επίπεδο, χωρίς σκιά */
  .app { border: none !important; box-shadow: none !important; }

  /* ---- 2. Τυπογραφία: Commissioner τίτλοι, Inter σώμα, mono τα τεχνικά ---- */
  body { font-family: var(--font-ui); font-size: 15px; }
  .brand, .quiz-question, .result-title, .card-title, .intent-label,
  .plan-name, .maint-name, .checklist-title, .flags-title, .prof-sec h4 {
    font-family: var(--font-display) !important;
    letter-spacing: -0.01em;
  }
  .titleblock, .badge-pill, .card-tag, .card-time, .id-chip, .snap-score,
  .snap-pct, .plan-status, .plan-badge, .maint-status, .maint-interval,
  .news-date, .flags-count, .flag-meta, .tl-year, .result-ribbon, .tab-btn,
  .app-version, .doc-progress {
    font-family: var(--font-mono) !important;
    letter-spacing: 0.06em;
  }

  /* Ενότητες με κωδικό φύλλου (Φ.01 — ΕΝΕΡΓΕΙΕΣ) */
  .section-title, .snap-title {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--ink-soft) !important;
  }

  /* ---- 3. Hero: πινακίδα σχεδίου, flush-left ---- */
  .hero { padding: calc(20px + env(safe-area-inset-top)) 22px 24px; }
  .hero, .hero * { text-align: left !important; }
  .brand { font-size: 34px !important; line-height: 1.02 !important; }
  .brand-sub { letter-spacing: 0.18em !important; }
  .hero-copy { font-size: 14px !important; max-width: 32ch; }
  .badge-pill { border-radius: 0 !important; border-color: rgba(214,145,136,.4) !important; }
  .brand-logo { display: none; }

  /* ---- 4. Κάρτα ακινήτου: σκορ σε τρεις στήλες ---- */
  .property-card { border-left: none; border-right: none; }
  .snap-score { font-size: 26px !important; }
  .snap-bar { height: 4px !important; border-radius: 0 !important; }
  .snap-fill { border-radius: 0 !important; }

  /* ---- 5. Ενέργειες: πλήρους πλάτους γραμμές με κωδικό, όχι πλακίδια ---- */
  .intent-grid { display: block !important; margin: 0 -20px; }
  .intent-card {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 14px; width: 100%; padding: 17px 22px !important;
    background: transparent !important; border: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .intent-card:active { transform: none !important; background: var(--card) !important; }
  .intent-card::before, .intent-card::after { display: none !important; }
  .intent-icon { display: none !important; }
  .intent-code {
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: var(--orange); width: 34px; flex: none;
  }
  .intent-label { flex: 1; font-size: 16px !important; }
  .intent-card::after {
    display: block !important; content: "→"; position: static !important;
    font-family: var(--font-display); font-weight: 800; color: var(--ink);
    border: none !important; width: auto !important; height: auto !important;
  }
  /* Το AI intent ξεχωρίζει με accent γραμμή αντί για πλακίδιο */
  .intent-card.wide {
    background: var(--card) !important;
    border-left: 3px solid var(--orange) !important;
  }

  /* ---- 6. Λίστες ελέγχων ---- */
  .card-list { display: block !important; margin: 0 -20px; }
  .card {
    border: none !important; border-bottom: 1px solid var(--line) !important;
    padding: 16px 22px !important; background: transparent !important;
  }
  .card::before, .card::after { display: none !important; }
  .card-tag { background: var(--paper-alt) !important; border: none !important; height: auto; padding: 5px 8px; }
  .card-time { background: rgba(214,145,136,.14) !important; }
  .card-chevron { color: var(--ink) !important; }

  /* ---- 7. Ερωτήσεις & αποτέλεσμα ---- */
  .quiz-title-mini { text-align: left !important; font-family: var(--font-mono) !important; letter-spacing: .12em; }
  .quiz-question { font-size: 22px !important; }
  .options { gap: 0 !important; border-top: 1px solid var(--line); }
  .option-btn {
    background: transparent !important; border: none !important;
    border-bottom: 1px solid var(--line) !important; padding: 17px 2px !important;
    font-family: var(--font-display) !important; font-weight: 700;
  }
  .option-btn:hover, .option-btn.on { background: var(--card) !important; }
  .result-ribbon { letter-spacing: .1em !important; }
  .result-title { font-size: 26px !important; line-height: 1.1 !important; }
  .result-disclaimer { border-top: 1px solid var(--line) !important; }

  /* ---- 8. Κουμπιά: γεμάτο accent, ετικέτα flush-left ---- */
  .btn { justify-content: flex-start !important; text-align: left; padding: 15px 16px !important; letter-spacing: .04em; }
  .btn-primary { background: var(--orange) !important; color: #0A0B0E !important; }
  .btn-primary:active { background: var(--orange-dark) !important; }
  .btn-secondary { background: transparent !important; border: 1px solid var(--line) !important; }

  /* ---- 9. Πρόγραμμα φροντίδας / συντήρηση / φάκελος ---- */
  .plan-card, .plan-active, .maint-row, .prof-sec, .doc-section, .news-card, .vault-hub-card {
    border: 1px solid var(--line) !important; background: var(--card) !important;
  }
  .plan-card.featured, .plan-active { border-color: var(--orange) !important; background: var(--card) !important; }
  .plan-badge, .plan-status, .maint-status { letter-spacing: .08em !important; }
  .maint-date, .maint-ics, .prof-f input, .prof-f select {
    border: 1px solid var(--line) !important; background: var(--paper) !important;
  }
  .pc-drop { border: 1px dashed #2A3040 !important; }
  .checklist-item, .flag-row, .tl-row, .news-row, .doc-row {
    border-bottom-style: solid !important; border-bottom-color: var(--line) !important;
  }

  /* ---- 10. Κάτω μπάρα: επίπεδη, ενεργό με accent γραμμή ---- */
  .tabbar {
    background: var(--paper) !important; backdrop-filter: none !important;
    border-top: 1px solid var(--ink) !important; gap: 0 !important;
    padding: 0 0 calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .tab-btn {
    padding: 13px 4px !important; font-size: 10.5px !important; letter-spacing: .08em !important;
    text-transform: uppercase; color: var(--ink-soft) !important;
    border-top: 3px solid transparent !important; background: none !important;
  }
  .tab-btn:first-child, .tab-btn.on {
    color: var(--orange-dark) !important; background: var(--card) !important;
    border-top-color: var(--orange) !important;
  }
  .tab-cta { color: var(--orange-dark) !important; }

  /* ---- 11. Γωνιακά σημάδια: μόνο εκεί που μένουν κάρτες ---- */
  .property-card::before, .property-card::after,
  .news-card::before, .news-card::after { opacity: .5; }

  /* ==================================================================
     12. MOBILE ΚΟΝΣΟΛΑ — αντικαθιστά οπτικά το hero σε κινητό.
     Το αρχικό hero/property-panel κρύβονται· η κονσόλα παίρνει τη θέση τους.
     ================================================================== */
  .hero, #property-panel { display: none !important; }
  #mobile-console { display: block; background: var(--card); color: var(--ink); }

  .cs-top { padding: 20px 22px 24px; }
  .cs-eyebrow {
    font: 800 10px var(--font-display); letter-spacing: .16em; opacity: .5;
  }
  .cs-headline {
    font: 800 44px/0.94 var(--font-display); letter-spacing: -.03em; margin-top: 14px;
  }
  .cs-accent { color: var(--orange); }
  .cs-rule { height: 2px; background: rgba(243,244,246,.28); margin: 22px 0 16px; }
  .cs-sub { font-size: 13.5px; line-height: 1.55; opacity: .78; max-width: 300px; }

  .cs-status { border-top: 2px solid rgba(243,244,246,.22); }
  .cs-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px; border-bottom: 1px solid rgba(243,244,246,.16); cursor: pointer;
  }
  .cs-row-t { font: 800 15px var(--font-display); }
  .cs-row-s { font-size: 12px; opacity: .58; margin-top: 2px; }
  .cs-tag {
    font: 800 10px var(--font-mono); letter-spacing: .08em; padding: 5px 8px;
    border: 1.5px solid rgba(243,244,246,.42); flex: none; margin-left: 12px; white-space: nowrap;
  }
  .cs-row.alert .cs-tag { background: var(--orange); color: #0A0B0E; border-color: var(--orange); }
  .cs-row.caution .cs-tag { color: var(--orange); border-color: var(--orange); }
  .cs-row.good .cs-tag { color: #6FCF97; border-color: #6FCF97; }
  .cs-row.good .cs-row-s { opacity: .5; }

  /* Οπτική επιβεβαίωση ότι μια γραμμή μόλις άλλαξε — π.χ. μόλις γύρισες από έλεγχο */
  .cs-row.cs-just-updated { animation: csRowFlash 1.8s ease-out; }
  @keyframes csRowFlash {
    0%   { background: rgba(214,145,136,.35); }
    100% { background: transparent; }
  }

  /* Ένδειξη ότι υπάρχει περισσότερο περιεχόμενο κάτω — λύνει το «δεν καταλαβαίνω ότι πρέπει να κατέβω» */
  .cs-scrolldown {
    display: flex; align-items: center; gap: 8px; margin-top: 22px;
    font: 800 9.5px var(--font-mono); letter-spacing: .12em; opacity: .45;
    animation: csBob 1.8s ease-in-out infinite;
  }
  .cs-scrolldown span {
    width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-top: -4px;
  }
  @keyframes csBob {
    0%, 100% { transform: translateY(0); opacity: .3; }
    50%      { transform: translateY(4px); opacity: .6; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cs-scrolldown, .cs-row.cs-just-updated { animation: none; }
  }

  .cs-startblock { padding: 26px 22px; }
  .cs-start-label {
    font: 800 11px var(--font-display); letter-spacing: .14em; opacity: .5; margin-bottom: 14px;
  }
  .cs-start-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    background: rgba(243,244,246,.22); border: 2px solid rgba(243,244,246,.22);
  }
  .cs-start {
    background: var(--card); padding: 18px 14px; min-height: 108px;
    display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
  }
  .cs-start.on { background: var(--orange); }
  .cs-start-n { font: 800 11px var(--font-mono); letter-spacing: .08em; opacity: .55; }
  .cs-start.on .cs-start-n { color: #0A0B0E; opacity: .7; }
  .cs-start-l { font: 800 16px/1.12 var(--font-display); }
  .cs-start.on .cs-start-l { color: #0A0B0E; }

  .cs-cta { background: var(--orange); color: #0A0B0E; padding: 22px; margin-top: 8px; }
  .cs-cta-t { font: 800 19px/1.18 var(--font-display); max-width: 240px; }
  .cs-cta-row { display: flex; gap: 10px; margin-top: 16px; }
  .cs-cta-btn {
    flex: 1; padding: 12px; text-align: center; text-decoration: none;
    font: 800 12px var(--font-display); letter-spacing: .06em; cursor: pointer; border: 0;
  }
  .cs-cta-btn.primary { background: #14161F; color: #F3F4F6; }
  .cs-cta-btn:not(.primary) { background: transparent; color: #0A0B0E; border: 2px solid #0A0B0E; }

  /* ---- 13. Δελτίο Ελέγχου (αποτέλεσμα ελέγχων ως πιστοποιητικό) ---- */
  #view-result .result-ribbon { display: none !important; }
  #view-result .quiz-head + .rd-card ~ .result-ribbon,
  #view-result .rd-card { display: block; }
  .rd-card { margin: 0 -20px 0; border: 2px solid var(--line); }
  .rd-head {
    padding: 16px; border-bottom: 2px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
  }
  .rd-head-t { font: 800 10px var(--font-mono); letter-spacing: .14em; }
  .rd-head-d { font: 800 10px var(--font-mono); letter-spacing: .1em; opacity: .55; }
  .rd-verdict { padding: 22px 16px; border-bottom: 2px solid var(--line); }
  .rd-verdict-title { font: 800 30px/1.08 var(--font-display); letter-spacing: -.02em; }
  .rd-verdict-title em { font-style: normal; color: var(--orange); }
  .rd-verdict-text { font-size: 13.5px; line-height: 1.55; opacity: .75; margin-top: 14px; }
  .rd-stats {
    display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--line);
  }
  .rd-stat { padding: 14px 16px; }
  .rd-stat:first-child { border-right: 2px solid var(--line); }
  .rd-stat-v { font: 800 22px var(--font-display); }
  .rd-stat-l { font: 800 9.5px var(--font-mono); letter-spacing: .1em; opacity: .55; margin-top: 2px; }
  .rd-findings { padding: 6px 16px 10px; }
  .rd-finding {
    display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  .rd-finding:last-child { border-bottom: none; }
  .rd-finding-n { font: 800 12px var(--font-display); color: var(--orange); flex: none; }
  .rd-finding-t { font: 800 13.5px var(--font-display); }
  .rd-finding-s { font-size: 12px; opacity: .58; margin-top: 2px; }

  /* ---- 14. Κάρτα «Διαβατήριο» (1d) — στατιστικά ακινήτου 2×2 ---- */
  .pp-card {
    background: var(--card); border: 2px solid var(--line); border-radius: 0;
    padding: 18px; margin: 0 -20px 14px; cursor: pointer;
  }
  .pp-top { display: flex; justify-content: space-between; align-items: baseline; }
  .pp-eyebrow { font: 800 10px var(--font-display); letter-spacing: .16em; opacity: .55; }
  .pp-badge { font: 800 10px var(--font-display); letter-spacing: .12em; color: var(--orange); }
  .pp-address { font: 800 24px/1.08 var(--font-display); margin-top: 12px; }
  .pp-sub { font-size: 12px; opacity: .6; margin-top: 4px; }
  .pp-bar { display: flex; height: 6px; background: rgba(243,244,246,.16); margin-top: 16px; overflow: hidden; }
  .pp-bar-fill { background: var(--orange); height: 100%; }
  .pp-bar-label { font-size: 11px; opacity: .55; margin-top: 8px; }
  .pp-stats {
    display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--line);
    border-radius: 0; margin-top: 18px;
  }
  .pp-stat { padding: 12px 14px; border-right: 2px solid var(--line); border-top: 2px solid var(--line); }
  .pp-stat:nth-child(2n) { border-right: none; }
  .pp-stat:nth-child(-n+2) { border-top: none; }
  .pp-stat-v { font: 800 18px var(--font-display); }
  .pp-stat.accent .pp-stat-v { color: var(--orange); }
  .pp-stat-l { font: 800 9.5px var(--font-mono); letter-spacing: .1em; opacity: .55; margin-top: 2px; }

  .cs-greet {
    font: 800 13px var(--font-display); color: var(--orange); margin-bottom: 10px;
  }

  /* Οι Παρατηρήσεις μέσα στην κονσόλα — ίδιο πλαίσιο, μόνο περιθώρια για να
     ταιριάζει με τη γεωμετρία της κονσόλας (χωρίς στρογγυλές γωνίες). */
  .cs-obs-wrap { padding: 0 22px 8px; }
  .cs-obs-wrap .flags-box { border-radius: 0; }

  /* ---- 15. Οθόνη υποδοχής (τοπικός λογαριασμός, χωρίς server) ---- */
  .ob-wrap { padding: 26px 22px 40px; }
  .ob-eyebrow { font: 800 10px var(--font-mono); letter-spacing: .16em; opacity: .5; }
  .ob-title { font: 800 42px/0.96 var(--font-display); letter-spacing: -.03em; margin: 14px 0 16px; }
  .ob-lead { font-size: 13.5px; line-height: 1.6; opacity: .75; margin-bottom: 26px; }
  .ob-field { margin-bottom: 16px; }
  .ob-field label {
    display: block; font: 800 11px var(--font-display); letter-spacing: .06em;
    opacity: .65; margin-bottom: 7px;
  }
  .ob-opt { font-weight: 400; opacity: .55; letter-spacing: 0; }
  .ob-field input {
    width: 100%; box-sizing: border-box; padding: 13px 14px;
    background: var(--paper); border: 2px solid var(--line); border-radius: 0;
    color: var(--ink); font: 400 15px var(--font-ui); outline: none;
  }
  .ob-field input:focus { border-color: var(--orange); }
  .ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ob-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .ob-type {
    padding: 13px 6px; border: 2px solid var(--line); background: var(--card);
    color: var(--ink-soft); font: 800 10.5px var(--font-display); letter-spacing: .04em;
    cursor: pointer;
  }
  .ob-type.on { background: var(--orange); color: #0A0B0E; border-color: var(--orange); }
  .ob-go { width: 100%; margin-top: 12px; letter-spacing: .06em; }
  .ob-skip { width: 100%; margin-top: 8px; }
  .ob-note { font-size: 11.5px; line-height: 1.55; opacity: .55; margin-top: 20px; }
}